JavaScript / jQuery闭包函数语法

时间:2010-12-17 16:23:07

标签: javascript jquery

有人可以解释以下功能之间的区别:

(function($){
  // can do something like 
  $.fn.function_name = function(x){};

})(jQuery);

我可以在下一个函数中使用jQuery吗?

(function(){

}());

以下内容与jquery.ready()相同吗?

$(function(){

});

谢谢!

2 个答案:

答案 0 :(得分:96)


(function($){
  // can do something like 
  $.fn.function_name = function(x){};

})(jQuery);

这是在参数中使用$的自执行匿名函数,以便您可以在该函数内使用它($)而不是jQuery,而不必担心与其他函数冲突因为在其他库中,$具有特殊含义。在编写jQuery插件时,该模式特别有用。

您可以在那里写任何字符而不是$

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

此处j将自动捕获末尾(jQuery)指定的jQuery。或者您可以完全忽略参数,但是您必须使用jQuery关键字而不是$,而不必担心碰撞。所以$包含在简短的参数中,这样你就可以在函数内部写$而不是jQuery


(function(){

}());

这是自动执行的匿名函数,但没有参数,并且由于最后()而自行运行/调用。

在某些情况下,这种模式非常有用。例如,假设您希望每次500毫秒后运行一段代码,您自然会选择setInterval

setInterval(doStuff, 500);

但是如果doStuff函数需要超过500毫秒才能完成它的工作呢?你会看到意想不到的结果,但setInterval会在指定时间一次又一次地调用该函数,而不管doStuff是否完成。

这就是该模式的用武之地,您可以将setTimeout与自动执行的匿名函数结合使用,并避免错误 setInterval,如下所示:< / p>

(function foo(){
   doStuff;

   setTimeout(foo, 500);

})()

此代码也将一次又一次地重复,但有一点不同。除非setTimeout完成,否则永远不会触发doStuff。比使用错误的setInterval更好的方法。

You can test it here.

请注意,您也可以编写这样的自执行匿名函数:

function(){
  // some code
}();

使用额外的大括号(就像之前的function关键字一样)只是编码惯例,可以在Crackford的着作,jQuery和其他地方看到。


$(function(){

});

这是就绪处理程序的简写语法:

$(document).ready(function(){

});

更多信息:

答案 1 :(得分:8)

我知道这个问题已经过时了,但我现在偶然发现它,其他人也是如此。我只想指出,虽然Sarfraz的答案很棒,但必须说不,在括号内写一个自执行,匿名函数 a < em>编码惯例。

function(){
  // some code
}();

无效并发出SyntaxError因为该函数正在被解析为FunctionDeclaration,而在这种情况下函数名称不是可选的

另一方面,Grouping Operator确保将内容评估为FunctionExpression

请参阅: Explain JavaScript's encapsulated anonymous function syntax