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元素列表中，然后在一个元素列表中N次。实际上你可以直接绑定所有内容：

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

当然，这是最终的代码。

Answer 2

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

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

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

Answer 3

两者之间没有任何区别。

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

Answer 4

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

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

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

我建议使用第二个，它更清洁，更快。

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

4 个答案: