jQuery(function ($) { ... }($)); 的目的答案

【问题标题】：Purpose of jQuery(function ($) { ... }($));jQuery(function ($) { ... }($)); 的目的
【发布时间】：2015-02-10 12:39:00
【问题描述】：

我在学习过的各种项目中都看到了这种模式，有时在使用 jQuery 时，开发人员会将他们的代码包装在这个函数中：

jQuery(function ($) {
    'use strict';

    /* Application code */

}($)); /* End jQuery */

我试图在 jQuery 文档中查找解释，但并没有真正找到太多。您能否向我解释一下为什么以及何时应该使用它？对于这样的事情是否有更好的做法/替代方案。

【问题讨论】：

它是$(document).ready(function(){}) 的同义词。它在页面加载时调用，因此您可以访问 DOM。
Is $(document).ready necessary?的可能重复
这看起来不像是常规模式，实际上我看起来部分无用。使用$ 立即调用函数function ($) {}，并将其结果作为参数传递给jQuery()。

标签： javascript jquery ecmascript-5

【解决方案1】：

$ 是 jQuery 的别名，有时它会与其他 javascript 库（如 mootools）发生冲突，mootools 也在内部使用 $ 符号。

因此，您刚刚在方法范围内为您的代码保护了 $ jQuery 别名：

jQuery(function ($) {
    'use strict';

    /* Application code */

}($));

另一种类似的方法是具有这样的范围：

(function($){
    $(function(){ // <----here you have just secured the $ for your code.
        'use strict';

        /* Application code */
    });
})(jQuery);

【讨论】：

另外，OP，这个表示法将所有内容都包装在一个立即调用的函数表达式（又名 IIFE）中。
@spike 真的！这就是我在答案中发布的内容，但没有使用术语 IIFE 并且 doc ready 只会在页面中触发一次，所以我认为会这样做。
作为补充：只要function ($) {'use strict'}($) 不返回函数，那么外部jQuery() 就没有用。即使那样，它也可能具有误导性。
@Jai - jep，我想我会为这个人提供一些谷歌术语。

【解决方案2】：

读完你就会明白...

http://api.jquery.com/jquery.noconflict/

【讨论】：

【解决方案3】：

它非常类似于：

$(document).ready(function(){});

【讨论】：

【解决方案4】：

没有外部包装器，它是一个插件定义，参见：Basic plugin creation。

【讨论】：