Question

我有一本書Jquery in Action，它在提及消除與其他庫的衝突時提到了這三個函數。但是，我不知道他們之間有什麼不同，也不瞭解這本書的解釋。

jQuery(function($) { 
    alert('I"m ready!'); 
}); 

var $ = 'Hi!'; 
jQuery(function() { 
    alert('$ = ' + $); 
}); 

var $ = 'Hi!'; 
jQuery(function($) { 
    alert('$ = ' + $); 
}); 

有沒有人知道區別是什麼？謝謝。

Answer 1

如果您採用簡化版本，可能會更容易理解。第一個準備就緒的功能並不比提醒更多。另外兩個很有意思。

函數具有範圍，這意味着當您在一個變量中使用變量時，它將在層次結構中上升直到找到它。

在您的第二個就緒功能中，$將上升到Hi!，因爲如果您在該功能內部開始時沒有其他$。

但是，在第三個就緒塊中，$將不會轉到Hi!，因爲它的定義更接近 - 作爲參數傳遞的定義（function($) {）。這$將是jQuery函數（即在那個函數$ == jQuery），因爲這是如何實現jQuery的ready功能。

所以：

var $ = 'Hi!'; 

jQuery(function() { 
    alert('$ = ' + $); // in this scope, $ will refer to the 'Hi!' 
}); 

jQuery(function($) { // the $ here will 'shadow' the $ defined as 'Hi!' 
    alert('$ = ' + $); // in this scope, $ will refer to jQuery 
}); 

現在你的問題是關於與其他圖書館衝突。其他庫（例如原型）也使用$符號，因爲它是調用庫的方便捷徑。如果你使用你提供的最後一個就緒函數，你可以是當然那個函數裏，$將引用jQuery，因爲jQuery將自身傳遞給該函數（作爲第一個參數）。

在第二個就緒函數中，例如$也可能已設置爲Prototype，並且您不確定是否使用$調用jQuery。在你的例子中，它是Hi!而不是jQuery。如果是Prototype，它是一樣的。試想一下：

// Prototype is loaded here, $ is referring to Prototype 

jQuery(function() { 
    $('selector').addClass('something'); // Oops - you're calling Prototype with $! 
}); 

在另一方面：

// Prototype is loaded here, $ is referring to Prototype 

jQuery(function($) { // this $ is shadowing Prototype's $, this $ is jQuery 
    $('selector').addClass('something'); // Yay - you're calling jQuery with $ 
}); 

Answer 2

當你輸入jQuery(function ($) { ...的$只是一個別名jQuery對象。你實際上可以使用任何合法的標識符而不是$，這仍然是jQuery對象的別名。

在第二個示例中，警報將會顯示'$ = Hi！'因爲在這種情況下，$指向剛剛在函數上方聲明的var。

第三個示例有效地掩蓋了函數上面聲明的$，因爲$將解析爲函數內部的jQuery對象。

我希望這對你有意義。

Answer 3

第一個代碼塊聲明瞭一個準備好的處理程序，該程序在DOM完全加載後執行。它只是產生一個警告框。

jQuery(function($) { 
    alert('I"m ready!'); 
}); 

第二個代碼塊還聲明瞭一個準備好的處理程序，但它證明了衝突。 $變量被故意設置爲一個字符串（這可能發生在衝突的js庫中），因此不能用作jQuery對象。在處理程序功能的範圍內，$仍然分配給該字符串，因此警報顯示爲$ = Hi!。

var $ = 'Hi!'; 
jQuery(function() { 
    alert('$ = ' + $); 
}); 

第三代碼塊也聲明瞭一個現成的處理程序，但它聲明一個局部$參數。 jQuery對象將自身作爲第一個參數傳遞給ready處理程序，因此在函數範圍內，$引用jQuery對象，並且警報將打印$ = ...，其中...是jQuery對象的表示形式。

var $ = 'Hi!'; 
jQuery(function($) { 
    alert('$ = ' + $); 
});