$(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,那么你真的不需要它(这样做也可以改善页面加载时间 )。