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