我可以避免在每个JavaScript文件中放入$(document).ready()调用吗?

Can I avoid putting $(document).ready() calls in each JavaScript file?

本文关键字：document ready 调用 可以避免 JavaScript 文件      更新时间：2023-09-26

所以，简单的问题，是否有可能编写jQuery代码而不编写$(document).ready(function()在每个。js文件?Js文件包含在<script src="app/jsCode/test.js"></script> ?谢谢你。

只需要在DOM完全加载时执行的代码。即使这样，你也可以使用快捷方式简写:

$(function() {...});

唯一需要在$(document).ready()块内的Javascript代码是试图立即访问页面的DOM的Javascript代码。如果你有很多其他Javascript(如实用程序函数，库等)，只是由其他Javascript调用，那些不需要在$(document).ready()块，因为他们不尝试访问DOM时，第一次加载。

在我的应用程序/页面中，我倾向于从$(document).ready()块中调用一些初始化函数，并将其余的代码放在任何块之外，但这对你是否有意义取决于你在做什么以及你的代码是如何组织的。

$(document).ready(function() {
    initHeader();
    initComments();
})

但是，回答你的问题。所有实际启动将立即访问DOM的操作的javascript必须在$(document).ready()块中(或类似类型的延迟，直到DOM准备好)。

可以尽量避免$(document).ready调用。

  1. 将所有脚本移动到页面底部，这样文档就完全创建了，脚本可以访问整个文档。
    2. 你的脚本可以分为:a. Libraries，比如jQuery。b. 实现当前页面功能的脚本。按照依赖关系的顺序放置脚本，并将主应用程序脚本放在序列的末尾。所以你的实际应用脚本可以访问DOM和依赖项。
  2. 现在，如果有必要，将主脚本包装到$(document).ready()调用中。

通常我会这样做，定义一个函数__main__()，并将其作为ready处理程序放在我的主脚本main.js的底部。

// Define your functions
function func1() {
 // blah blah blah
}
function func2() {
 // implement blah blah blah
}
function __main__() {
 // do main intializations
 func1(); // call func1 to initialize function point 1
 func2(); // call func2 to init other stuff
 // blah blah blah
}
$(document).ready(__main__);

该"包装器"的目的是允许浏览器实际创建所有DOM元素，以便在随后评估jQuery选择器时，它们找到需要操作的节点。

这意味着不，这是不可能的，除非你愿意赌你的jQuery不工作——除非你做一些不依赖于DOM的事情(这是不可能的)。

您可以将包装器缩短为

$(function() {
    // ...
});

但是这并没有改变什么

可以。

您可以使用一个中央调用.ready()来初始化所需的代码:

$().ready(function(){
   my_class.init();
   my_class2.init();
});

你的类可以在单独的外部文件中

你可以这样写:

$(function(){
    // do stuff
});

但是，我不确定你是否理解这个习语的意思。这表示"当文档完全加载并且所有DOM节点都可用时，运行此代码"。

如果你正在编写一些不依赖于选择DOM节点或不需要文档完全加载的JS代码，你可以并且通常应该将该代码放在此块之外。例如，如果您正在声明类和对象原型。但是，如果您需要注册事件处理程序或评估选择器，最好等到DOM加载完成。

相关文章：