jQuery:如果在页面底部使用外部JS,为什么要使用document.ready？

Question

我将所有JS作为外部文件包含在页面的最底部.在这些文件中,我有几个像这样定义的方法,我从ready事件中调用它:

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

然而,当我删除ready函数并直接调用方法时,一切都运行相同,但执行速度明显更快 - 在一个非常基本的文件上几乎快一秒!由于此时应该加载文档(因为所有标记都出现在脚本标记之前),还有什么理由仍然使用ready事件吗？

Answer 1

好问题.

围绕整个"在页面底部放置脚本"的建议以及它试图解决的问题存在一些混淆.对于这个问题,我不打算讨论是否在页面底部放置脚本会影响性能/加载时间.$(document).ready 如果您还将脚本放在页面底部,我只会谈论您是否需要.

我假设你正在引用那些你在你的脚本中调用立即(任何东西那样简单功能的DOM document或document.getElementById).我还假设你只询问这些[DOM-referencing]文件.IOW,您的DOM引用代码所需的库脚本或脚本(如jQuery)需要在页面的前面放置.

回答你的问题:如果你在页面底部包含你的DOM引用脚本,不,你不需要$(document).ready.

解释:没有"onload"像$(document).ready经验法则那样的相关实现的帮助:任何与页面内DOM元素交互的代码都应该放在/包含在页面的下方,而不是它引用的元素.最简单的方法是在结束前放置代码</body>.看到这里和这里.它也适用于IE的可怕"操作中止"错误.

话虽如此,这绝不会使使用无效$(document).ready.在加载对象之前引用一个对象是在DOM JavaScript中开始时最常见的错误之一(见证了它太多次计算).它是jQuery的问题解决方案,它不需要你考虑这个脚本相对于它引用的DOM元素的位置.这对开发者来说是一个巨大的胜利.这只是他们不得不考虑的一件事.

此外,将所有DOM引用脚本移动到页面底部通常很困难或不切实际(例如,任何发出document.write调用的脚本都必须保持不变).其他时候,您正在使用一个框架来渲染一些模板或创建动态javascript片段,其中引用需要在js 之前包含的函数.

最后,它曾经是"最佳实践",将所有DOM引用代码都插入其中window.onload,但是$(document).ready出于良好的文档原因,它已被实现所黯然失色.

所有这些加起来$(document).ready是一个非常优越,实用和通用的解决方案,太早引用DOM元素的问题.