2010-01-08 74 views
18

這是什麼意思?關於jQuery關閉的一個簡單問題

(function($){ 
})(jQuery); 

使問題更清晰,什麼包裹在括號中的函數JS的意思(對不起,我在封閉的概念有些混亂)。那麼$參數呢?和最後括號中的「jQuery」?

我可以對mootools進行同樣的處理,並將它們合併到一個JS文件中嗎?

(function($){})(jQuery); 

(function($){})(mooTools); 

我只用jQuery工作,正在計劃通過MooTools

+0

[的JavaScript/jQuery的閉合功能語法(HTTP的可能重複://計算器。com/questions/4472528/javascript-jquery-closure-function-syntax) – Matt 2013-07-24 07:41:08

回答

24

結束語括號之間的功能職責是確保該功能作爲函數表達式進行評估。

發生這種情況的原因是Grouping Operator(括號),只能評估表達式

如果沒有括號的使用,它會被解釋爲函數聲明,這將導致語法錯誤,因爲函數名是可選的函數聲明。

(function(arg){ 
    alert(arg); // alerts test 
})("test"); 

在上面的例子中,函數表達式會自動執行,傳遞一個參數。

即圖案大量使用jQuery插件,因爲jQuery的可以在noConflict模式下運行時,$全局變量不會被創建,所以jQuery的全局對象作爲此匿名函數的一個參數傳遞和內可以自由地將其稱爲$(收到的參數)。請注意,像上面的例子一樣調用自執行函數表達式中的函數上下文(this關鍵字)將始終引用Global對象。

有關函數表達式和函數聲明之間的差異更深入的信息,給看看以下資源:

+0

@CMS究竟這個正確的術語是什麼?我一直稱它爲「自動執行匿名功能」我的術語是否準確? +1爲一個偉大的答案! – 2010-01-08 02:54:25

+1

@Doug:是的,我認爲你的術語是準確的,但請記住函數表達式也可以有一個名稱,它只是可選的(對於調試真的很有用,例如用於檢查調用堆棧,儘管JScript有非常嚴重的錯誤http:/ /groups.google.com/group/comp.lang.javascript/msg/5b508b03b004bce8,對於遞歸也很有用(因爲ES5嚴格模式下的'arguments.callee'將不可用)),所以*「自動執行函數表達式」 *可能會更精確一點點... – CMS 2010-01-08 04:20:09

+0

@CMS - 真棒,謝謝! – 2010-01-08 06:19:40

0

function($) { ... }創建了一個函數它接受一個名爲$的參數。

用括號括起來什麼也不做。

添加(jQuery)使用jQuery作爲參數調用函數。


這樣做是爲了使獨立的$功能在全球範圍內。
當您在函數中編寫$時,請參考參數$,而不是全局變量$

+6

另請注意,雖然在括號中包裝了一個函數「什麼都不做」,但如果您想在函數後面添加(jQuery),則這是必需的。 – 2010-01-08 01:45:00

1

下面是封閉的製品:http://www.jibbering.com/faq/faq_notes/closures.html

基本上,CMS所說,它是一個函數表達式。有一個很好的例子,可以幫助您更好地瞭解該頁面的2/3。

最後一組圓括號中的jQuery表示您將jQuery對象傳遞給內部函數。該內部函數採用該對象,並將其指定爲$。所以,當你訪問函數內的$時,你實際上是在處理你傳遞的jQuery對象。

至於混合這些與jQuery和Mootools,我從來沒有使用過Mootools,所以我不知道它是如何分配自己的。我唯一能想到的是,如果它使用像jQuery這樣的$,你可以調用jQuery.noConflict();並將jQuery重新分配給另一個變量,也許var $j = jQuery;然後,你可以像平常一樣使用Mootools。

6

CMS已經給你正確的答案,但我只是想補充說,這不是封閉。這只是()運算符用來返回表達式的結果,在這種情況下是一個函數表達式,並且在JavaScript中,可以直接調用返回的匿名函數。因此,這簡直是結合兩種:

var x = (1+1); // <--() evaluates an expression 

和:

var arr = [0,1,2]; 
arr.push(function(text){alert(text)}); 
arr[3]('hello'); // <-- function returned by array called directly 

而且作爲$參數,這僅僅是JavaScript的允許變量名的人物之一。你的例子是完全等同於:

(function(jQ){})(jQuery); 
(function(moo){})(mooTools); 
0

MooTools的等價物的命名空間$是:

(function($) { 
    // $ is the mootools one (aliasing document.id) 
})(document.id); 

您可以將它們合併成一個文件,但請記住,MooTools是一個典型的框架,只有$服務於選擇器的目的,而所有的功能進入元素/數組/類等原型。因此,在做mootools的工作原理:

var foo = $("bar"); 
foo.hide(); // the element inherits .hide() 

但在jQuery的它會失敗,需要轉錄爲

var foo = $("#bar"); 
$(foo).hide(); 

的一點是,你不能命名空間中的東西,MooTools的出口爲原型。

5

執行此操作的要點是,可以從連接到傳入對象的屬性和方法中利用在函數表達式內創建的對象,而不公開公開地顯示這些對象。這可以幫助防止可變碰撞。它還允許創建私人存儲空間是連接東西要訪問的變量..

(function($){ 
//jQuery is available here as $
var myPrivateArray = []; //this is private
$.addItem = function(item) { myPrivateArray.push(item); }
})(jQuery);

//I can't access myPrivateArray here... //but I can use jQuery.addItem to add something.