$(document).ready速记


245

是以下简写$(document).ready吗?

(function($){

//some code

})(jQuery);

我看到这种模式使用了很多东西,但是我找不到任何引用。如果它是的简写$(document).ready(),是否有任何特定原因可能不起作用?在我的测试中,它似乎总是在ready事件之前触发。


在提到的模式函数内部定义的任何变量(例如var somevar;)都不会在函数外部更改相同名称的变量的内容
Timo Huovinen 2013年

3
该代码的作用是确保$表示该功能块中的jQuery,因此该代码可移植到jQuery的$别名被禁用或定义为其他名称的地方。
AsksAnyway,2014年

Answers:


252

的简写$(document).ready(handler)$(handler)handler函数在哪里)。看这里

您问题中的代码与无关.ready()。相反,它是一个以jQuery对象为参数的立即调用的函数表达式(IIFE)。其目的是将$变量的范围至少限制在其自己的块中,以免引起冲突。您通常会看到jQuery插件用于确保的模式$ == jQuery


14
从技术上讲,它是一个立即调用的函数表达式。如果它是自调用的,那就是从内部调用自身。在网上搜索iife,或跳至Cowboy Alman著名的博客文章。详细信息...
4406年


89

正确的速记是这样的:

$(function() {
    // this behaves as if within document.ready
});

您发布的代码…

(function($){

//some code

})(jQuery);

…创建一个匿名函数并jQuery作为arg传入,立即执行它$。它实际上所做的就是将代码放入函数中并像往常一样执行它,因为$它已经是的别名jQuery。:D


4
您可以说,如果加载了其他也使用$作为别名的工具,它也确保$是jQuery的别名
Jim Wolff


12

这些特定的行是jQuery插件的常用包装:

“ ...为了确保您的插件不会与其他可能使用美元符号的库发生冲突,将jQuery传递给将其映射到美元符号的自执行函数(闭包)是一种最佳做法,在执行范围内不会被另一个库覆盖。”

(function( $ ){
  $.fn.myPlugin = function() {
    // Do your awesome plugin stuff here
  };
})( jQuery );

来自http://docs.jquery.com/Plugins/Authoring


11

准备就绪的多框架安全简写为:

jQuery(function($, undefined) {
    // $ is guaranteed to be short for jQuery in this scope
    // undefined is provided because it could have been overwritten elsewhere
});

这是因为jQuery不是唯一使用$and undefined变量的框架


也可以写成(function($){ ... })(jQuery);
Mike Causer'1

2
@MikeCauser也是一种很好的方法,但是不会被调用ready,而是立即被调用
Timo


0

那这个呢?

(function($) { 
   $(function() {
     // more code using $ as alias to jQuery
     // will be fired when document is ready
   });
})(jQuery);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.