Jquery中的(function($){...})(jQuery)

標籤：jquery

        當你第一眼看到“(function($){...})(jQuery)”的時候，你有什麼感覺？呵呵呵，我當時還是止不住的從心底裡罵了一句——操，這他媽什麼勞什子。時過境遷，對於現在無比倚重Jquery的我，自感當時的自己是那麼的無知，今天忙裡偷閒，解釋一下究竟“(function($){...})(jQuery)”該怎樣理解：

        代碼一：

<html><head><title>代碼一</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript">(function(name){alert(name);})("GaoHuanjie");</script></head><body></body></html>

        說明：在瀏覽器中運行上面代碼，會彈出一個對話方塊，對話方塊的內容為GaoHuanjie。

        上面代碼中執行的JavaScript指令碼和“(function($){...})(jQuery)”是一樣的，也就是說“(function($){...})(jQuery)”中的函數會自動被執行，那麼究竟該怎樣理解“(function($){...})(jQuery)”呢？“(function($){...})(jQuery)”實際上表示的是已處於調用狀態的匿名函數：function($){...}是定義的匿名函數，參數為$（之所以將參數聲明為$是為了不與其他庫衝突）；為了調用該函數則在該匿名函數的後面添上了括弧和實參（這裡為jQuery），但又由於操作符的優先順序，函數本身也需要用括弧，所以又為匿名函數添加了括弧。
        釋疑解惑：

        一、我運行下面代碼為什麼報錯——jQuery is not defined：

<html><head><title>代碼二</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript">(function($){alert($);})(jQuery);</script></head><body></body></html>

        嗯嗯，瀏覽器在解析上述js指令碼時確實會出現問題，假如為jQuery添加英文雙引號，再次使用瀏覽器運行上述指令碼則不會出錯，為什麼不加就會出錯呢，呵呵呵，其實這裡的jQuery還是一個變數，如果為上述代碼引入jQuery庫，再次使用瀏覽器運行上述代碼則不會出現問題：

<html><head><title>代碼三</title><script type="text/javascript" src="./jquery-1.6.2.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript">(function($){alert($);})(jQuery);</script></head><body></body></html>

        【0分下載資源】

        在引入jQuery庫後之所以不會出錯是因為jQuery庫中定義了jQuery變數。

        二、和$(function(){ })相比，(function($){...})(jQuery)的執行時機也是在網頁DOM載入完畢後才執行嗎？

        不是的，比如如下例子：

<html><head><title>代碼四</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript">(function(){alert(document.getElementById("name").value);})();</script></head><body><input type="hidden" id="name" name="name" value="GaoHuanjie" /></body></html>

        上述例子在瀏覽器中啟動並執行時候會報錯，究其原因(function(){...})()函數的執行時機並不是在DOM載入完畢後才執行，而是隨著頁面自上而下來執行，如果將其改成如下代碼則再次使用瀏覽器運行指令碼則不會出現問題：

<html><head><title>代碼五</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><input type="hidden" id="name" name="name" value="GaoHuanjie" /><script type="text/javascript">(function(){alert(document.getElementById("name").value);})();</script></body></html>

        一句話：“$(function(){ });”用於存放操作DOM對象的代碼，執行其中代碼時DOM對象已存在；“(function(){})(jQuery);”用於存放開發外掛程式的代碼，執行其中代碼時DOM不一定存在。