2012-07-20 50 views
2

我在學習jQuery,並試圖理解下面的代碼結構。瞭解基本的jQuery結構

if(jQuery) (function($){ 
    $.extend($.fn, { 
     MyPlugin: function(a, b) { 
     ....   
     } 
    }); 
})(jQuery); 

從我可以告訴,這首先檢查,看看是否存在jQuery對象。如果是這樣,它定義了一個內聯函數,它使用'fn'屬性擴展了jQuery對象。

我見過這個問題在其他地方問過,for example here,但我不理解的要點沒有得到解決。在哪裏我感到困惑...

- 爲什麼傳遞給初始函數的特殊jquery「$」對象?

- 爲什麼內聯函數傳遞了jQuery對象(在最後一行)?即:(function($){...})(jQuery);

謝謝。

回答

5

簡單的解釋

它只是創建了一個封閉在那裏你可以參考jQuery$,即使是在noConflict mode

也在jSang的回答(+1)的plugin authoring中解釋過。

從技術上講,它只是定義了一個匿名函數,它接受一個參數叫$並立即調用它傳遞jQuery作爲唯一的參數,所以$作爲一個別名jQuery此功能的範圍內 - 請注意,$在全球範圍內在這個封閉內部是無法訪問的。

這意味着,如果你有在全球範圍內使用$原型,您將無法訪問使用$瓶蓋內原型,爲本地範圍$它引用jQuery的優先。當然,如果在閉包中需要另一個庫的方法,您可以使用2個參數來定義它:(function($j, $p) {,並且假定其他庫使用$命名空間,則將其稱爲傳遞(jQuery, $)。或者更簡單地說,將你的閉包的本地範圍var別名爲與你其他庫的全局範圍var:(function($j) {不同,這意味着全局$仍然可以在函數的範圍內訪問。請注意,後一種效果可能是不可取的,因爲您不能完全確定您的用戶爲$分配了什麼內容,除非您明確地將其寫入文檔中。我猜想需要多個庫的插件有點偏離主題,所以讓我們把它留在那裏。


略爲詳細

noConflict docs頁面的實際閉合例子:

jQuery.noConflict(); 
(function($) { 
    $(function() { 
    // more code using $ as alias to jQuery 
    }); 
})(jQuery); 

那封別名jQuery作爲$的範圍內,如果您的用戶非常有用例如,Prototype或其他使用$全局名稱空間的庫。這使得你的插件更加堅固而且不易出錯。

無論jQuery是否控制$變量,都可以使用閉包,因此非常適合插件創作。

試想一下,如果你的最終用戶的一個有jQuery的在noConflict模式和原型使用$命名空間,你的插件試圖用jQuery方法擴展$?混沌和小馬!

當然,您可以跳過關閉並將$全部替換爲jQuery,但它會使您的代碼更長,更難以被許多開發人員讀取。

此外,如果您無法理解閉包,那麼How do JavaScript closures work?有很多有用的答案,即使這個問題不需要太多關於閉包的深入知識。 :)

4

我會盡我所能來回答這些問題。我在iPad上,所以如果我忽略了一些技術細節,請耐心等待。這些點有一點簡化,但它們有助於描述什麼是走向:)

  • $正被傳入,因爲$可能已被覆蓋,意味着別的東西。 jQuery也可以處於noCinflict模式。
  • (jQuery)正在做的是立即調用已定義的內聯函數。這被稱爲自我執行功能。雖然不正確(它不執行,我們這樣做),那是什麼它被稱爲。它將jQuery傳遞給函數,所以我們有一個$的值。正如在另一個答案中提到的,這會創建一個閉包。我建議使用Google搜索「JavaScript關閉」。你會發現一些非常有價值的信息:)

希望幫助:)

+0

哦不錯,你解決了自執行方面非常好,我忽略了最初+1 – 2012-07-20 05:08:19

3

你要找的擴展jQuery的新插件「的部分要擴展$ .fn」。並用封閉塊包裹。

(function($){ 
//do sth 
})(jQuery); 

上面的代碼是你必須考慮的部分。描述它見下面的例子:

1聲明函數和調用它

var fn = function(b){ /*do sth like alert(b)*/ }; 
fn('hiiii'); 

2。較短的語法是現在

(function(b){ /*do sth like alert(b)*/ })('hiiii'); 

如果更換b$和傳遞的參數'hiiii'jQuery的你結束了:

(function($){ /*do sth with $*/ })(jQuery); 

正如你在看第一個示例b是方法參數並且'hiiii'通過了第米在通話時間。 $是方法參數,jQuery是在通話時傳遞的參數。

原因是爲了避免與其他庫衝突,因爲$在幾乎所有的JS庫中都被廣泛使用。所以你可以在其他庫上使用jQuery。

如果你想了解更多有關如何開發插件去this post