JavaScript / jQuery 闭包函数语法

IT技术 javascript jquery
2021-03-09 14:52:51

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

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

})(jQuery);

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

(function(){

}());

以下是否与 jquery.ready() 相同?

$(function(){

});

谢谢!

2个回答

(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到处使用关键字,而不是$仍然不必担心碰撞。So$包含在简写的参数中,以便您可以在该函数内部编写$而不是在jQuery周围编写


(function(){

}());

那又是自动执行的匿名函数,但没有参数,并且因为()最后而运行/调用自身

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

setInterval(doStuff, 500);

但是如果doStuff函数需要超过 500 毫秒来完成它正在做的事情呢?你会看到意想不到的结果,但setInterval无论是否doStuff完成,都会在指定的时间一次又一次地调用该函数

这就是该模式的用武之地,你可以setTimeout结合自执行匿名函数来做同样的事情,避免像这样的坏事 setInterval

(function foo(){
   doStuff;

   setTimeout(foo, 500);

})()

这段代码也会一次又一次地重复,但有一个区别。setTimeout除非doStuff完成,否则永远不会被触发比使用 bad 更好的方法setInterval

你可以在这里测试。

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

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

在周围使用额外的大括号(如 beforefunction关键字)只是编码约定,可以在 Crackford 的着作、jQuery 和其他地方看到。


$(function(){

});

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

$(document).ready(function(){

});

更多信息:

进一步注意jQuery(someFunction)将 jQuery 对象作为第一个参数传递给回调。这允许您执行文档就绪处理程序的这个稍微安全但仍然简洁的版本:jQuery(function($){ ...use $ here without fear of global collision... });
2021-04-28 14:52:51
期待setTimeout我个人将其归入“反模式”类别好处的原因为简洁起见,在代码清晰度、IDE 代码辅助和调试方面不值得丢失;我会将代码缩短留给自动缩小工具。
2021-05-09 14:52:51
function() { /* Some code */ }();实际上是不是有效的语法。
2021-05-21 14:52:51

我知道这个问题很老,但我现在偶然发现了它,其他人也可能如此。我只是想指出的是,虽然Sarfraz的答案是伟大的,但必须说,没有,写一个自动执行的,匿名函数括号内是不是一个编码约定

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

不会工作并给出 aSyntaxError因为函数被解析为 a FunctionDeclaration,并且在这种情况下函数名称不是可选的

另一方面,分组运算符确保内容被评估为FunctionExpression.

请参阅: 解释 JavaScript 的封装匿名函数语法