为什么这两种编写jQuery插件的方法是等价的

Why are these two ways of writing a jQuery plugin equivalents?

本文关键字：方法 插件 jQuery 两种 为什么      更新时间：2023-09-26

为什么这两种编写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');
    });
};

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

$.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');
    });
};

当然，这是最后的代码。

在您的情况下，除了您在第一个代码段中创建了一个新的jQuery对象之外，没有什么真正的区别（this是一个jQuery对象，因此不需要使用$(this)）。

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

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

两者之间根本没有区别。

只是出于某种原因，在其中一个循环中，你正在进行循环，但最终，它们会得到相同的结果。

它们是等价的，因为在jQuery插件中，this是jQuery对象，所以执行$(this)没有任何作用。

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

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

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

相关文章：