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

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

$.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)到该对象。”

如果您查看 bind，它会调用 on，它会执行一些逻辑并最终执行以下行:

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

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

所以你说的是“为 jQuery 对象中的每个元素创建一个 jQuery 对象，然后为该 jQuery 对象中的每个元素将一个事件绑定(bind)到该元素。”

您现在循环了两次，一次是在 N 元素的列表中，然后是 N 次是在 1 个元素的列表中。你实际上可以直接全部绑定(bind):

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

当然，这就是最终代码。