javascript - 为什么这两种编写 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

Let's reduce from one to the other:

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

When you start your function this is a jQuery object, so $(this) doesn't buy you anything, it could easily become:

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

So you are saying "For each element in the jQuery object, create a jQuery object and bind an event to that object."

If you look in bind, it calls on, which performs some logic and finally does this line:

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

That means it is going to apply the event to every element in that jQuery object, so you are actually saying:

So you are saying "For each element in the jQuery object, create a jQuery object, and for every element in that jQuery object bind an event to that element."

You are now looping twice, once in a list of N elements and then N times in lists of 1 element. You can actually just all bind directly:

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

And that of course, is the final code.

Answer 2

在您的情况下，除了您在第一个片段中无缘无故地创建一个新的 jQuery 对象（this是一个 jQuery 对象，因此无需使用$(this)）之外，没有真正的区别。

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

Returningthis.bind(...)也保持可链接性，但对于一个不仅绑定事件的更复杂的插件，each循环通常更具可读性。

Answer 3

两者之间根本没有区别。

只是出于某种原因，您在其中一个中进行了循环，但最终，它们具有相同的结果。

Answer 4

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

.bind将对 jQuery 对象中的所有元素起作用，并且当您这样做时，.each您将单独调用.bind每个元素。

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

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