这些功能有什么区别？

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
});

现在，您的问题是与其他库的冲突。 其他库（例如Prototype）也使用$符号，因为它是调用该库的便捷快捷方式。 如果使用提供的最后一个ready函数，则可以确保在该函数内部， $将引用jQuery，因为jQuery会将自身传递给该函数（作为第一个参数）。

例如，在第二个ready函数中， $可能也已设置为Prototype，并且您不确定是否要使用$调用jQuery。 在您的示例中， Hi! 而不是jQuery。 万一是原型，那是一回事。 考虑：

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