Question

大家好我是jquery和javascript的新手。我已经编写了代码并希望对其进行测试。但是我在某些方面陷入困境，需要专家的帮助。

这是我在 myfile.js

中定义的jquery类

$.fn.MyClass = function(arg1 ,arg2, arg3) {

  function MyFirstFunc (arg1, arg3) {
     //Do some thing 
     return arg1 + arg3;

  };

  function MySecFunc (arg2, arg3) {
     //Do some thing 

  };
MyFirstFunc(arf1 ,arg2);
}

在我的index.html文件中，我必须在DOM对象上调用我的jquery类，如此

$("#div1").MyClass(agr1_val, arg2_val, arg3_val);

现在我想对这些函数进行单元测试，并将测试用例保存在一个单独的文件中。我选择了Qunit。我写过以下测试

test('MyFirstFunction function test', function() {
    equal(MyFirstFunc (4, 5),"9" ,"function working correctly");
});

同样在我的index_test.html文件中，我已经给出了myfile.js的路径，但仍然Qunit给了我错误

死于测试＃1的文件：///var/www/test.js：2：1：MyFirstFunc未定义

任何人都可以指导我做错的地方以及如何通过将测试用例保存在单独的文件中来测试功能或者任何其他更好的方法。

由于

Answer 1

首先，你要在jquery对象中声明错误的方法。

而不是：

function MyFirstFunc (arg1, arg3) {

您应该使用：this.MyFirstFunc = function(arg1, arg3) {

此外，您应该使用jQuery对象调用您的方法，如下例所示：

equal($("#div1").MyClass(1, 2, 3).MyFirstFunc(4, 5),"9" ,"function working correctly");

以下是一个有效的Qunit测试示例：

$.fn.MyClass = function(arg1 ,arg2, arg3) {

    this.MyFirstFunc = function(arg1, arg3) {
        //Do some thing 
        return arg1 + arg3;

    };

    this.MySecFunc = function(arg2, arg3) {
        //Do some thing 
    };

  return this.MyFirstFunc(arg1, arg3);
};

$(function() {
    $("#div1").MyClass(1, 2, 3);
});

test('MyClass function test', function() {
    equal($("#div1").MyClass (1,2,3),"4" ,"function working correctly");
});

Answer 2

未定义MyFirstFunc方法。必须在返回数组中定义MyFirstFunc和MySecFunc才能公开使用这些函数。您可以这样定义

$.fn.MyClass = function (arg1, arg2, arg3) {

    function MyFirstFunc(arg1, arg3) {
        //Do some thing 
        return arg1 + arg3;

    };

    function MySecFunc(arg2, arg3) {
        //Do some thing 

    };

    return {
        MyFirstFunc: function (arg1, arg3) {
            return MyFirstFunc(arg1, arg3);
        },
        MySecFunc: function (arg2, arg3) {
            return MySecFunc(arg2, arg3);
        }
    }
}

用

进行测试

test('MyFirstFunction function test', function() {
    equal($().MyClass().MyFirstFunc(4, 5),"9" ,"function working correctly");
});

Answer 3

问题不在于您的测试用例，而在于您的功能定义。您不能简单地在另一个函数中声明一个函数，并期望在全局命名空间中访问它。 JavaScript中函数定义的基本属性是它们是唯一提供范围的东西，因此当您使用函数作为对象时，对象的“实例变量”（在函数内声明）只能在该对象内部访问。

如果您尝试使用方法创建对象，则需要将这些函数分配给对象的实例变量。 JavaScript中对象的实例变量是通过在构造函数（用于定义对象的函数）中分配this.<variable>来定义的。所以要给MyClass两个方法，你应该这样做：

MyClass = function(arg1, arg2, arg3) {

    this.myFirstFunc = function(arg1, arg2) {
        //Do something
    };

    this.mySecFunc = function(arg1, arg2) {
        //Do something
    };
};

var myInstance = new MyClass(x,y,z);
myInstance.myFirstFunc(a,b);

请注意，简单地为函数的参数提供与构造函数参数相同的名称不会将构造函数中的参数传递给方法。定义函数不会传递具体参数，因此MyFirstFunc arg1和arg2被解释为您可能传递给MyFirstFunc的参数的名称，而不是将外部函数的参数传递给MyFirstFunc的指令。

最后，$.fn属性是jquery.prototype的别名，所以你使用$.fn.MyClass = function...做的是为JQuery对象分配一个新属性，实际上是用你的库修补库自己的附加组件。虽然我不知道你的用例，但这可能不是你想要定义函数的方式。

测试jquery函数

3 个答案: