的區別是什麼
之間在這裏,我知道全球jQuery是爲$到函數傳遞,匿名函數在JavaScript中使用jQuery
(function($){
})(jQuery);
而這一次
$(function(){
})();
的區別是什麼
之間在這裏,我知道全球jQuery是爲$到函數傳遞,匿名函數在JavaScript中使用jQuery
(function($){
})(jQuery);
而這一次
$(function(){
})();
(function ($)
})(jQuery);
它定義了一個函數,然後立即調用,並將JQuery對象作爲參數傳入。 $是JQuery的引用,您可以在該函數內部使用它。這是相同的:
var Test = function ($){};
Test(jQuery);
這:
$(function(){
});
是jQuery的調用,通過其一旦文檔加載完畢後應執行的功能。
第二個是不是一個普通的模式(它會拋出一個類型錯誤),除非你錯誤地包含了引用括號:
(function($){
// Normal IIFE that happens to pass jQuery in as an argument
})(jQuery);
$(function(){
// Shorthand DOM-ready event handler
}); // <-- Remove the invoking parentheses
$(function(){ // Backbone code in here }); :
這是jQuery’s 「DOMReady」函數的別名,當DOM準備好被JavaScript代碼處理時執行該函數。這使您可以編寫需要DOM的代碼,並知道DOM可用並準備好被應用程序讀取,寫入或修改。
雖然這不是一個模塊。這只是一個傳遞給DOMReady別名的回調函數。在這種情況下,模塊和回調之間的主要區別在於jQuery等待DOM準備就緒,然後在適當的時候調用回調函數 - 所有這些都來自jQuery的上下文 - 而模塊模式或立即調用函數在定義後立即執行。在上面的例子中,模塊接收jQuery作爲參數,但這與使用jQuery的DOMReady事件不同,因爲模塊函數被調用,立即傳入jQuery作爲參數。它不會等待DOM準備就緒。只要函數被解析,它就會執行。
(函數($){// 骨幹在代碼在這裏 })(jQuery的);:
這是一個緊調用函數表達式(FKA「匿名功能」,「自我呼叫功能「等)。
這是一個由調用(jQuery)括號立即調用的函數。將jQuery傳遞給括號的目的是爲全局變量提供本地範圍。這有助於減少查找$變量的開銷量,並且在某些情況下允許縮小器的更好的壓縮/優化。
在這種情況下,該函數被用作JavaScript「模塊」模式。在大多數瀏覽器中,當前實現的JavaScript版本中的模塊並不是特定的函數結構。相反,它們是一種實現模式,它使用立即調用功能來提供圍繞相關功能「模塊」的範圍和隱私。模塊通常會公開一個公共API - 「揭示模塊」模式 - 通過從模塊函數中返回一個對象。但有時候,模塊完全獨立,不提供任何外部方法來調用。
$(function(){
});
這只是對DOM準備的事件處理程序,即相當於速記:在
$(document).ready(function(){
// execution when DOM is loaded...
});
我們這樣的:
(function($){
// code here
})(jQuery);
這段代碼不會在DOM準備好時執行,但會直接執行。將jQuery作爲參數傳入函數的好處是避免與美元符號($
)的使用衝突,因爲多個庫將它用作速記引用。函數內部的所有內容都可以安全使用$
,因爲這是作爲參考jQuery
傳入的。
瞭解更多關於在$
符號衝突:jQuery noConflict
如果將二者結合起來的代碼片段,你會得到一個很好的和堅實的設置:
// $ reference is unsafe here in the global scope if you use multiple libraries
(function($){
// $ is a reference to jQuery here, passed in as argument
$(function(){
// executed on dom-ready
});
})(jQuery);
PS:在JavaScript由於function
能既是一種陳述,也是一種表達,取決於上下文,大多數人在其周圍添加額外的括號以強制它成爲表達式。
當js解析器遇到它時,第一個snipset將執行「function($){...}」,在其中創建一種私有上下文,其中$ argument var將指向jQuery,因爲它作爲參數傳遞「 (jQuery)「(如果你想避免與先前聲明的$ var相沖突,這會引用除jQuery對象之外的其他東西)
第二個看起來像JQuery.ready函數調用,但帶有語法錯誤。有雙向的actualy寫它
$(document).ready(function(){
/* DOM has loaded */
});
$(function(){
/* DOM has loaded */
});
'$(函數(){ })(); '不等於DOM-Ready,你必須在末尾刪除空括號 – muneebShabbir
@muneebShabbir好點。不知道如果添加這些括號會發生什麼情況。我會看看jsFiddle。 –