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

我了解JavaScriptclosures,我已经看到这在原生JS完成:

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

但是,添加jQuery spice是做什么的?

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

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

也许你有一个现有的脚本,使用jQuery,你喜欢重复使用,但你也使用也在同一页面中使用$的原型。

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

当你看到:

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

它是知道作为自我调用的匿名函数 。 这个函数在parsing后立即执行,因为最后加了() (这就是你如何运行js函数)。

请注意,额外的外括号只是惯例,你也可以这样写:

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

但是这个惯例大量使用,你应该坚持下去。

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

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

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

这里, j被映射到jQuery对象。

还要注意指定给自调用函数的参数仍然在该函数的范围内,并且不与外部作用域/variables冲突。


我已经写了一篇关于这个问题的文章,请看看:

  • Javascript自执行function
 (function() { // all JS code here })(); 

是立即调用的函数expression式( IIFE ),发音为“ iffy ”。 有些人也称他们为“匿名,自我执行的function”,或者只是“自我执行的function”。

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

这是一个IIFE,它接受参数“aParameter”,并将parameter passing给“参数”。

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

这个是相似的,但“jQuery”(THE jQuery对象实例)是IIFE的参数,在这种情况下,jQuery被作为'$'parameter passing。 通过这种方式,只需input'$',IIFE的主体就可以访问jQuery及其成员。 这是一个常见的jQuery约定,编写jQuery插件的人们通过这种方式来维护这个惯例是很常见的。

上面的代码不仅保留了jQuery约定,还确保了你和其他人都不会意外地打破这个约定。 例如,采取以下代码:

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

这段代码把'$'变成了绝对不是jQuery的东西。 如果有人在你的插件代码之外的其他代码中做了这个,然后你没有显式地将jQuery作为'$'传递给你的插件,那么你将不能像通常那样使用'$'作为jQuery。

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

到目前为止,最重要的一点是它使你的代码在使用jQuery的“不冲突”模式的页面上工作,它允许使用jQuery以及其他需要控制$ global的库。 出于这个原因,在编写jQuery插件时强烈build议使用(function($) { ... })(jQuery)技术。

次要的原因是它在自执行函数的范围内使局部variables$变成局部variables,并且局部variables访问比全局variables访问(边际)要快。 就个人而言,我不认为这是一个非常有说服力的理由 – 我无法想象使用jQuery而不是DOM方法的开销是可以接受的,但是将jQuery作为全局variables访问的开销并不会。 🙂

我想说,在写插件的时候使用这种技术的最好的理由是为了保持一致性 – 当不重要的时候,如果你习惯于这样做, 。 此外,你永远不知道什么时候有机会回收代码!