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的就绪功能的实现方式。

所以：

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）也使用$符号，因为它是调用库的便捷快捷方式。如果你使用你提供的最后一个就绪函数，你可以确定在该函数内部，$将引用jQuery，因为jQuery将自己传递给该函数（作为第一个参数）。 / p>

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

这些功能有什么区别？

3 个答案: