$(document).ready 简写

Posted 2023-03-06

【中文标题】$(document).ready 简写

【英文标题】：$(document).ready shorthand

【发布时间】：2011-08-25 15:17:46

【问题描述】：

下面是$(document).ready的简写吗？

(function($)

//some code

)(jQuery);

我看到这种模式被大量使用，但我找不到任何关于它的参考。如果它是$(document).ready() 的简写，是否有任何特殊原因可能无法正常工作？在我的测试中，它似乎总是在 ready 事件之前触发。

【问题讨论】：

在上述模式函数内定义的任何变量（例如var somevar;）都不会改变函数外同名变量的内容

代码具有确保 $ 代表该功能块中的 jQuery 的效果，因此代码可移植到 jQuery 的 $ 别名被禁用或定义为其他内容的地方。

【参考方案1】：

$(document).ready(handler) 的简写是$(handler)（其中handler 是一个函数）。见here。

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

【讨论】：

技术上它是一个立即调用的函数表达式。如果它是自我调用的，它会从自身内部调用自己。在网上搜索 iife，或跳至 Cowboy Alman's famous blog post。细节……嘘。

【参考方案2】：

简写为：

$(function() 
    // Code here
);

【讨论】：

第一个参数是$。可能想要添加它。它对jQuery(function($, undefined) );很有用

@raynos 它不是必需的。上面的代码作为$(document).ready(function() );的别名可以正常工作@

知道您免费获得$ 作为第一个参数很有用。

我仍然每个月左右访问一次这个答案。

【参考方案3】：

这不是$(document).ready() 的简写。

您发布的代码将内部代码封装起来，并使 jQuery 作为$ 可用，而不会污染全局命名空间。当您想在一个页面上同时使用原型和 jQuery 时，可以使用此选项。

在此处记录：http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/#use-an-immediately-invoked-function-expression

【讨论】：

感谢您回答问题

【参考方案4】：

正确的简写是这样的：

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

---

您发布的代码……

(function($)

//some code

)(jQuery);

…创建一个匿名函数并立即执行它，jQuery 作为参数$ 传入。它实际上所做的只是获取函数内部的代码并像往常一样执行它，因为$ 已经是jQuery 的别名。 :D

【讨论】：

如果加载了其他也使用$作为别名的工具，你可以说它还确保$是jQuery的别名

【参考方案5】：

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

"...为了确保您的插件不会与可能使用美元符号的其他库发生冲突，最好将 jQuery 传递给将其映射到美元符号的自执行函数（闭包），这样它不能被其他库在其执行范围内覆盖。”

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

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

【参考方案6】：

ready 的多框架安全简写是：

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

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

【讨论】：

也可以写成(function($) ... )(jQuery);

@MikeCauser 也是一个好方法，但不会在ready 上调用，而是立即调用

【参考方案7】：

这个呢？

(function($)  
   $(function() 
     // more code using $ as alias to jQuery
     // will be fired when document is ready
   );
)(jQuery);

【参考方案8】：

使用更短的变体

$(()=>

);

其中$ 代表jQuery，()=> 被称为'arrow function'，它从闭包继承this。 （所以在this 中你可能会有window 而不是document。）