$(document).ready(function(){…})中的自调用函数;

我已经封装了我的javascript

jQuery(document).ready(function($) { }); 

我想知道通过以下两种方式调用函数内部的含义是什么:

 jQuery(document).ready(function($) { $(function () { // do something }); }); 

VS

 jQuery(document).ready(function($) { (function () { // do something })(); }); 

编辑:

我还想知道两者中哪一个更“正确”的做事方式? 随意添加您自己的实现。

不同之处在于执行顺序:

 jQuery(document).ready(function($) { $(function () { // inner handler }); // outer handler }); 

内部ready处理程序内的代码在外部处理程序中的代码之后执行: http : //jsfiddle.net/nmD8b/ 。

 jQuery(document).ready(function($) { (function () { // do something })(); // outer handler }); 

立即函数表达式中的代码在定义函数的位置执行,即在代码遵循表达式之前执行: http : //jsfiddle.net/nmD8b/ 。


如果要扩展变量范围,请使用第二种方法。 第一种方式没有多大意义,您应该只在实际需要时注册ready事件处理程序。 在这种情况下,DOM已经准备就绪,因为您将处理程序绑定在另一个就绪处理程序中。

如果您不想扩展变量范围,请不要使用它们。 只需将所有代码放在外部处理程序中。

每个人都在说:

 jQuery(document).ready(function ($) { }); // is the document.ready as: jQuery(function ($) { }); // <-- this is the short-hand version // the $ inside the parenthesis really just means that $ is to refer to jQuery inside. // you could just do: $(function () { }); // if you know it will be anyway 

使用立即函数更适用于在常规Javascript中创建“类”/“命名空间”等。

 (function (myNamespace) { function myNamespace () { } return myNamespace; }(window.myNamespace = window.myNamespace || {})); 
 jQuery(document).ready(function($) { 

&&

 $(function () { 

是一回事

除了第二个只在jQuery 1.0+中工作(我认为,如果错了,有人会更正)

此外

$jQuery命名空间的简写符号。 因此jQuery($(相同$( 。然后你可以编写与jQuery(document)相同的$ jQuery(document) ,其中$是命名空间的简写, ()提供给定的参数,在这种情况下,是javascript中相同的document

$(function是jQuery的doc.ready调用函数,正常返回将是通常所说的jQuery Object 。其中索引0是传递的元素,其他一切都是本机js返回该元素或jquery道具和方法。

  • 使用$(function () {}); 文档准备好后的任何时候都是完全安全的,指定的函数会立即触发。 Quote :

如果在初始化DOM之后调用.ready(),则会立即执行传入的新处理程序。

注意:正如Felix所指出的,jQuery似乎阻止了.ready()嵌套调用。

  • 无论是在文档就绪事件内部还是外部使用,使用(function () {})()可以正常工作。 它(i)创建一个封闭(ii)立即触发(iii)不关心文件是否准备就绪。

第一个是多余的,所以IMO第二个更好。

事实上,如果你不需要一个闭包,那么使函数内联; $(function () {}); 作为一个封闭本身。

鉴于$(function() {})$.ready的别名,你的第一个例子只是$.ready包含在$.ready ,这实际上没有任何意义,即使我不认为它有任何严重的性能影响。

您的第二个示例是人们通常在其JavaScript文件的最外层部分执行的操作,以防止污染全局变量范围 :

 ;(function($) { $(document).ready(function() { // Do something }); })(jQuery); 

这就是我到目前为止在大多数JavaScript文件中看到的内容。 它可以防止全局变量范围污染,并确保$实际上即使在noConflict模式下也引用jQuery


关于$.ready一个重要注意事项是,如果你在结束标记之前加载JavaScript,那么你真的不需要它(这样做也可以改善页面加载时间 )。