jQuery(function(){...})與(function($){...})(jQuery)的“兄弟”情結

記得那時在學習寫基於jQuery的插件時，了解到(function($){...})(jQuery)的代碼結構，一開始還沒發覺，后來百度了解它的語意時，從搜索結果中發現了jQuery(function(){...})，當時就懵逼了（只知道$(function(){}) 23333）。后面通過別人的回答和博客逐漸了解清楚了，今天突然又看到了這個，概念又有些模糊了，恰有時間自己也來總結一下。

本文有些標題黨了，其實這兩個小東西並不能算兄弟，只不過是長的有些像而已。

1、jQuery(function(){...}):

用過jQuery的人應該都熟悉它真正的兄弟$(function(){...})【完整版：jQuery(document).ready(function(){...})】,表示在DOM（文檔對象模型）加載好之后對DOM節點進行相應的操作。

 

2、(function($){...})(jQuery):

這其實是定義一個匿名函數function($){...}，然后立即傳入實參jQuery執行該函數。由於操作符的優先級，所以給匿名函數加上括號，之所以只在形參處使用$，而實參處使用jQuery，是為了避免與其他庫中的$沖突。

為了便於理解，可以將上述語句拆分一下：

var fn = function($){
        //code
        ....
};
fn(jQuery);//調用函數fn

注意，拆分只是為了方便理解，不是真的存在fn函數。在使用時為了方便和簡化代碼，將之壓縮為(function($){...})(jQuery)，它的作用可以理解為預定義一些函數（方法），在寫基於jQuery的插件時，經常會用到。