关于 javascript：jQuerys $.each() 是如何工作的？


How does jQuerys $.each() work?

也许标题不好，但这是我的问题：
我正在构建一个框架来了解有关 javascript 的更多信息。我想使用"jQuery"风格。

如何创建一个 () 是可选的函数？

1
2
$("p").fadeOut(); //() is there
$.each(arr, function(k, v) {...}); //Dropped the (), but HOW?

这是我想出的，但它不起作用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$2DC = function(selector)
{
    return new function() {
        return {
            circle : function()
            {
                //...
            }
        }
    }
}


$2DC("#id1"); //Work
$2DC("#id2").circle(); //Work
$2DC.circle(); //DONT WORK
相关讨论

$ 实际上只是 jQuery 函数的别名。您可以使用以下命令调用该函数：

jQuery("p"); 或 $("p");

但请记住，在 JavaScript 中，您可以将"东西"直接附加到函数中。

1
2
3
4
5
6
function foo(){
}
foo.blah ="hi";
foo.func = function() { alert("hi"); };

foo.func(); //alerts"hi"

这就是(概念上)jQuery 的 each 函数的定义方式。

1
jQuery.each = function(someArr, callback) { ...

所以现在 jQuery.each 是一个可以这样调用的函数：

1
2
jQuery.each([1, 2, 3], function(i, val) {
});

或更熟悉的

1
2
$.each([1, 2, 3], function(i, val) {
});

所以对于你的特殊情况，支持：

1
$2DC.circle();

您必须将 circle 函数直接添加到 $2DC:

1
2
3
$2DC.circle = function(){
   // code
};
相关讨论

函数是 JavaScript 中的对象。因此，它们可以用作变量，就像整数、字符串等一样。

在您的示例中，$2DC 是一个返回包含 circle 函数的对象的函数。

$2DC.circle(); 不起作用，因为 circle 只是返回对象的属性，而不是 $2DC 本身的属性。

在 $.each 的情况下，这是因为 $ 包含 each 属性。您的 $2DC 也可以做到这一点。像这样：

1
2
$2DC.circle = function(){
}

现在，$2DC.circle(); 可以工作了。因此，正如您所见，函数是对象，因此可以像其他对象一样具有属性。

相关讨论

1
$2DC.circle(); //DONT WORK

这不起作用，因为 $2DC 没有任何名称为 circle 的函数。它只是一个函数。

其中 $2DC("#id2") 返回一个包含具有 circle 函数的对象的新函数，因此 $2DC("#id2").circle(); 对您来说很好。

如果你定义

1
2
3
$2DC.circle = function(){

};

你可以使用 $2DC.circle();

可以使用类似这样的方法来实现。

1
2
3
4
5
$.fn.each = function (otherparams);

$.each = function (collection, otherparams) {
  return $.fn.each.apply(collection, arguments.slice(1));
};

将 each 添加为 fn 的属性(它只是 jQuery.prototype 的别名)意味着它可以作为每个 jQuery 集合的方法使用。第二段代码意味着它可以作为参数传入集合中。

应用(和调用)是 javascript 的一些最有用的特性，一旦你习惯了它们。

创建你的基础函数，然后给函数添加方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
var f = function(text){
    alert(text);
}
f.fn1 = function(text){
    alert('fn:'+text);
}
f.fn2 = function(text){
    alert('fn2:'+text);
}

f('hi'); //hi;
f.fn1('hi'); //fn:hi;
f.fn2('hi'); //fn2:hi;

你所指的$.each方法是$函数对象的一个??属性。

jQuery 中的 $ 对象是一个函数对象，与 JavaScript 中的任何对象一样，您可以为该对象分配属性。

调用 $ 函数对象充当构造函数并返回由 jQuery.fn.init() 函数创建的新对象实例。 jQuery 的原型被复制到 jQuery.fn.init 以便新创建的对象实例可以访问在 jQuery.

上定义的方法和插件

试试这样：

1
2
3
4
5
6
7
8
9
10
11
$2DC = (function(selector)
{
    return new function() {
        return {
            circle : function()
            {
                //...
            }
        }
    }
})();

这样，$2DC 是函数返回的对象，而不是函数本身。

相关讨论