爲什麼這兩種編寫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元素的列表中，然後在1個元素的列表中循環N次。你實際上可以直接全部綁定：

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

而這當然是最終的代碼。

Answer 2

沒有區別兩者之間的。

只是出於某種原因，其中一個你正在做一個循環，但最終，他們有相同的結果。

Answer 3

你的情況有不同之處在於你創造你的第一個片段一個新的jQuery對象沒有很好的理由其實沒有真正的區別（this是一個jQuery對象，所以沒有必要使用$(this)）。

通常所說的在你的插件函數中使用return this.each(...);是一個好主意，以保持所有的可鏈接性，並且無論你的插件的函數被調用的jQuery對象中有多少元素，你的代碼都能正常工作。

返回this.bind(...)也保留了鏈接性，但對於一個更復雜的插件，它不僅僅是綁定事件，而且通過each循環更易讀。

Answer 4

它們是等價的，因爲在jQuery插件中，this是jQuery對象，因此$(this)不做任何事情。

.bind將在jQuery對象中的所有元素上工作，並且當您執行.each時，您將分別在每個元素上調用.bind。

因此，它們是等價的，因爲它們都在元素上循環並將事件綁定到它們。

我建議使用第二個，它更乾淨，更快。