关于 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 是函数返回的对象,而不是函数本身。


原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/268763.html

(0)
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论