为什么这两种方式编写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元素列表中,然后N在1个元素的列表中循环.你实际上可以直接绑定所有:

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

当然,这是最终的代码.