5

我已经咨询了 jQuery 源代码,但我必须承认这可能超出了我的理解——或者我找错了地方。 https://github.com/jquery/jquery/blob/master/src/core.js

在第 222 行附近有一个看起来是递归的函数,然后在第 566 行附近又有一个在 .extend() 命名空间中声明的函数。

我只是好奇——这究竟是如何工作的?例如,当我打电话时:

$('.item').each(function(){
    // Do Something
});

它如何知道循环遍历 DOM 元素数组、何时停止、如何应用函数?它不能只是做

$('.item').doThis()

因为 doThis() 可能不是该对象的成员。

请赐教:)谢谢。

4

4 回答 4

2

据我所知,这

$('selector').each(func);

相当于这样做:

func = ...;
$selector = $('selector');
for (var i = 0; i < $selector.length; i++) {
    if (func.call($selector[i], i, $selector[i]) === false) {
        break;
    }
}

$ 选择返回的对象实际上是一个 DOM 元素数组,并附加了一大堆额外的方法,因此您基本上可以像使用 Array 一样使用它。希望这能说明问题!

于 2012-11-01T23:44:01.837 回答
2

不,它不是递归的。第222 行的函数是 jQuery 原型 ( $.fn) 上的函数,而它调用的函数是- 一个在第 566 行jQuery.each定义的静态属性。注意是如何工作的:如果没有给出要扩展的对象,它使用. 它既适用于代码的不同部分,也适用于代码的不同部分。extendthisjQueryjQuery.fn

那么这到底是如何工作的呢?

$obj.each(callback)正在调用该$.fn.each方法,该方法适用$.each于 jQuery 实例(DOM 包装器)本身:第 223 行

现在,在 中$.each,有四种情况:有或没有提供args的数组,以及在类似数组的结构或其他对象上。您没有传递额外的参数,并且 jQuery 实例有一个属性并且在数字索引中具有 DOM 元素,因此将执行第 596 行length中的循环。所以你的电话相当于

for (var i=0, len=$obj.length; i<len; i++)
    if ( callback.call($obj[i], i, $obj[i]) === false ) break;
于 2012-11-01T23:46:39.577 回答
0

您在 jQuery 中执行的每个查询都存储为类似数组的对象,这意味着您可以通过执行以下操作访问您的查询找到的 DOM 元素列表:

$('.item')[0] //The first item found by your query

在内部,$().each 使用 $.each,这是一种遍历集合的方法,调用作为参数传递的函数,并使用 'Function.apply' 将 'this' 设置为当前对象被迭代通过。

于 2012-11-01T23:48:38.330 回答
0

查看源代码中的第 566 到 605 行

它是迭代的并且相当简单。

于 2012-11-01T23:55:06.033 回答