2


我知道这里的全局 jQuery 作为 $ 传递给函数有什么区别，

(function($){

})(jQuery);

和这个

$(function(){

})();
4

5 回答 5

3

第二种不是常见的模式（它会引发类型错误），除非您错误地包含了调用括号：

(function($){
    // Normal IIFE that happens to pass jQuery in as an argument
})(jQuery);

$(function(){
    // Shorthand DOM-ready event handler
}); // <-- Remove the invoking parentheses
于 2013-10-03T07:13:29.157 回答
1

$(function(){ // 这里的主干代码 }); ：

这是jQuery 的“DOMReady”</a> 函数的别名，该函数在 DOM 准备好被 JavaScript 代码操作时执行。这允许您编写需要 DOM 的代码，同时知道 DOM 可用并且可以由您的应用程序读取、写入和以其他方式修改。

不过，这不是一个模块。这只是传递给 DOMReady 别名的回调函数。在这种情况下，模块和回调之间的主要区别在于，jQuery 等待 DOM 准备好，然后在适当的时间调用回调函数——全部来自 jQuery 的上下文——而模块模式或立即调用函数定义后立即执行。在上面的示例中，模块接收 jQuery 作为参数，但这与使用 jQuery 的 DOMReady 事件不同，因为调用模块函数时，立即将 jQuery 作为参数传入。它不会等待 DOM 准备好。它在函数被解析后立即执行。

(function($) { // 这里的主干代码 })(jQuery);:

这是一个立即调用函数表达式（FKA“匿名函数”、“自调用函数”等）。

这是一个由调用 (jQuery) 括号立即调用的函数。将 jQuery 传入括号的目的是为全局变量提供局部范围。这有助于减少查找 $ 变量的开销，并在某些情况下允许对压缩器进行更好的压缩/优化。

在这种情况下，该函数被用作 JavaScript“模块”模式。大多数浏览器中当前实现的 JavaScript 版本中的模块不是像函数这样的特定结构。相反，它们是一种实现模式，它使用立即调用函数来围绕相关功能的“模块”提供范围和隐私。模块通过从模块的函数返回一个对象来公开一个公共 API——“揭示模块”模式是很常见的。但有时，模块是完全独立的，不提供任何外部方法来调用。

检查这个

于 2013-10-03T07:17:04.840 回答
1 
$(function(){

});

这只是 DOM-ready 事件处理程序的简写，相当于：

$(document).ready(function(){
    // execution when DOM is loaded...
});

现在结束这个：

(function($){
    // code here
})(jQuery);

此代码不会在 DOM 就绪时执行，但会直接执行。将 jQuery 作为参数传递给函数的好处是避免与美元符号 ( $) 的使用发生冲突，因为多个库将其用作速记引用。函数内的所有内容都可以安全使用$，因为这是作为对jQuery.

阅读有关$符号冲突的更多信息：jQuery noConflict

如果你结合这两个代码片段，你会得到一个很好的和可靠的设置：

// $ reference is unsafe here in the global scope if you use multiple libraries   

(function($){
    // $ is a reference to jQuery here, passed in as argument

    $(function(){
        // executed on dom-ready
    });

})(jQuery);

PS：因为function在 JavaScript 中既可以是语句也可以是表达式，取决于上下文，大多数人在它周围添加额外的括号以强制它成为表达式。

于 2013-10-03T07:18:18.300 回答
1

第一个片段将在 js 解析器遇到它时执行“function($){...}”，在其中创建一种私有上下文，其中 $ 参数 var 将指向 jQuery，因为它作为参数“(jQuery)”传递（如果你想避免与先前声明的 $ var 发生任何冲突，它会引用 jQuery 对象以外的东西，这很有用）

第二个看起来像 JQuery.ready 函数调用，但有语法错误。实际上有两种写法

$(document).ready(function(){
     /* DOM has loaded */
});

$(function(){
    /* DOM has loaded */
});
于 2013-10-03T07:22:15.627 回答
0 
(function ($)

})(jQuery);

它是一个被定义的函数，然后立即调用，其中 JQuery 对象作为参数传入。$ 是对 JQuery 的引用，您可以在函数内部使用它。这相当于：

var Test = function ($){};
Test(jQuery);

和这个：

$(function (){

});

是对 JQuery 的调用，传入一个函数，一旦文档完成加载，它应该执行该函数。

于 2013-10-03T07:16:32.017 回答