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 回答