jQuery美元符号($)作为函数参数？

Question

我理解JavaScript闭包,我在原生JS中看到过这个:

(function () {
  // all JS code here
})();

但是,添加jQuery spice有什么作用呢？

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

Answer 1

当你看到:

(function() {
  // all JS code here
})();

它被称为自我调用的匿名函数.该函数一解析就会执行,因为最后添加了()(这就是你运行js函数的方式).

请注意,额外的外括号只是惯例,您也可以将它写成:

function() {
  // all JS code here
}();

但是这个惯例在各地都被广泛使用,你应该坚持下去.

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

这里,$映射到jQuery对象,以便您可以使用 $而不是jQuery关键字.你也可以在那里放一些其他角色:

(function(j) {
  // all JS code here
})(jQuery);

这里,j映射到jQuery对象.

另请注意,为自调用函数指定的参数仍在该函数的范围内,并且不与外部作用域/变量冲突.

我写了一篇关于这个主题的文章,请查看:

• Javascript自执行功能

Answer 2

它是一种将jQuery映射到$的方式,以便不是页面中的所有代码都能看到它.

也许你有一个现有的脚本使用你想要重用的jQuery,但你也使用在同一页面中也使用$的原型.

通过使用该构造中的代码包装任何jQuery,您可以为包含的部分重新定义$ to jQuery,而不会与页面中的其他代码发生冲突.

Answer 3

(function() {
   // all JS code here
})();

是一个立即调用的函数表达式(IIFE),发音为" iffy ".有些人还称他们为"匿名,自动执行的功能",或称"自动执行功能".

(function(aParameter) {
   alert(aParameter);  // will alert "an argument"
})("an argument");

这是一个IIFE,它接受参数'aParameter'并传递参数"一个参数".

(function($){
   alert($(window).jquery);  // alert the version of jQuery
})(jQuery);

这个是类似的,但"jQuery"(jQuery对象实例)是IIFE的参数,在这种情况下,jQuery作为'$'参数传递.通过这种方式,只需输入'$',IIFE的主体就可以访问jQuery及其成员.这是一个常见的jQuery约定,人们编写jQuery插件以这种方式维护这个约定是很常见的.

上面的代码不仅维护了jQuery约定,还确保了你和其他任何人都不会意外地违反该约定.例如,请使用以下代码:

var $ = function() {
   alert('foo');
}

这段代码将'$'转换为绝对不是jQuery的东西.如果有人在插件代码之外的其他代码中执行此操作,然后您没有明确地将jQuery作为'$'传递给您的插件,那么您将无法像通常那样使用'$'作为jQuery.

Answer 4

以这种方式将jQuery传递给闭包有两个原因.

到目前为止,最重要的一点是它使您的代码在使用jQuery的"无冲突"模式的页面上工作,这允许使用jQuery以及希望控制$全局的其他库.因此,在编写jQuery插件时强烈建议使用该(function($) { ... })(jQuery)技术.

第二个原因是它$在自执行函数的范围内创建局部变量,并且局部变量访问(全局变量)访问(略微)快于全局变量访问.就个人而言,我不认为这是一个非常令人信服的理由 - 我无法想象使用jQuery而不是DOM方法的开销是可以接受的,但是访问jQuery作为全局变量的情况不会.:-)

我想说的是,当最好的理由使用这种技术不是编写插件是一致性-你就不太可能去忘掉它时,它是,如果你在做这件事的习惯很重要,当它不.此外,你永远不知道什么时候你有机会回收代码!