jQuery / javascript 包装代码查询答案

【问题标题】：jQuery / javascript wrapped code queryjQuery / javascript 包装代码查询
【发布时间】：2011-02-28 17:23:47
【问题描述】：

我继承了一些用以下方式包装的 javascript 代码：

(function ($) {
    //some javascript using jQuery here...               
} (jQuery));

它有什么作用？

【问题讨论】：

这是重复的，但很难搜索。我自己找不到副本。
stackoverflow.com/questions/5145092/…

标签： javascript jquery

【解决方案1】：

它立即调用一个匿名函数，将全局jQuery 作为参数传递给函数调用，然后由$ 参数引用。

这可确保 $ 是该函数的本地变量，因此如果其他库使用全局 $ 标识符，它不会发生冲突。

这样想：

   // create a function that receives jQuery as an argument
function keepItLocal( $ ) {

    // execute your jQuery code in here
    //   where $ is now a reference to jQuery     

};

   // invoke the function, passing in the global jQuery
keepItLocal( jQuery );

因为在 JavaScript 中限定变量范围的方式是在函数中，所以这是防止全局命名空间污染的常见模式。

如果我们这样做：

$ = jQuery;

$('.someClass').someMethod();

...如果 $ 之前定义过，我们可能会覆盖它，或者其他代码可能会出现并覆盖它。

【讨论】：

【解决方案2】：

这是 jQuery 的一个令人愉快的闭包。它通过创建一个匿名函数来工作：

function ($)
{

}

然后用参数jQuery包装它以立即调用

(
  function($)
  {

  }
)(jQuery);

这会强制 $ 具有 jQuery 的值，而不会默认为 window.$，这可能已被另一个库覆盖。

它是插件扩展jQuery的常用快捷键。

此外，document.ready 事件还有一个类似的别名快捷方式：

jQuery(function($){

});

在这种情况下，将一个函数传递给 jQuery 工厂方法（jQuery 或 $）以在 document.ready 事件上执行。该参数将为jQuery，但它允许开发人员将别名重命名为他们喜欢的任何名称，通常是$ 快捷方式。

【讨论】：

【解决方案3】：

这是编写 jQuery 插件的标准模式：http://docs.jquery.com/Plugins/Authoring

【讨论】：

【解决方案4】：

我认为使用闭包（您发布的代码是闭包）有助于避免变量与代码的其他部分发生冲突。

正如 James 所描述的，正是因为这个原因，插件才以这种方式编写。

顺便说一句，通常闭包写成

(function ($) {
// do something cool here!
})(jQuery);

【讨论】：

【解决方案5】：

jquery自定义插件的写法就是这样

http://docs.jquery.com/Plugins/Authoring

【讨论】：