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 回答