为什么这两种方式编写jQuery插件等价？

Question

为什么这两种方式编写jQuery插件等价？

---

第一种方式：

$.fn.myplugin = function () {
    return $(this).each(function() {
        return $(this).bind('click', function () {
            console.log('Hi');
        });
    });
};

---

第二种方式：

$.fn.myplugin = function () {
    return this.bind('click', function () {
        console.log('Hi2');
    });
};

Answer 1

让我们从一个减少到另一个：

$.fn.myplugin = function () {
    return $(this).each(function() {
        return $(this).bind('click', function () {
            console.log('Hi');
        });
    });
};

当你启动你的函数时， this是一个jQuery对象，所以$(this)不会给你买任何东西，它很容易变成：

$.fn.myplugin = function () {
    return this.each(function() {
        return $(this).bind('click', function () {
            console.log('Hi');
        });
    });
};

所以你说“对于jQuery对象中的每个元素，创建一个jQuery对象并将事件绑定到该对象。”

如果你在看bind ，它调用on ，执行一些逻辑，最后做这一行：

return this.each( function() {
    jQuery.event.add( this, types, fn, data, selector );
});

这意味着它将把事件应用于该jQuery对象中的每个元素，所以你实际上是在说：

所以你要说的是“对于jQuery对象中的每个元素，创建一个jQuery对象，并为该 jQuery对象中的每个元素将事件绑定到该元素。”

您现在循环两次，一次在N元素的列表中，然后在1个元素的列表中循环N次。 你实际上可以直接绑定所有：

$.fn.myplugin = function () {
    return this.bind('click', function () {
        console.log('Hi2');
    });
};

当然，这是最终的代码。

Answer 2

在你的情况下，没有真正的区别，除了你在你的第一个片段中创建一个新的jQuery对象没有任何理由（ this是一个jQuery对象，所以不需要使用$(this) ）。

一般来说，使用return this.each(...);是个好主意return this.each(...); 在你的插件函数中，无论在调用插件函数的jQuery对象中有多少元素，都可以保持一切可链接并使代码工作。

返回this.bind(...)也保持了可链接性，但是对于一个更复杂的插件，它不仅仅是绑定一个事件， each循环的内容往往更具可读性。

Answer 3

两者之间没有任何区别。

只是出于某种原因，其中一个你正在做一个循环，但最后，他们有相同的结果。

Answer 4

它们是等价的，因为在jQuery插件中， this是jQuery对象，所以做$(this)什么都不做。

.bind将处理jQuery对象中的所有元素，当你执行.each时，你会分别在每个元素上调用.bind 。

所以，它们是等价的，因为它们都循环遍历元素并将事件绑定到它们。

我建议使用第二个，它更干净，更快。