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('$ = ' + $); 
});