在 DOMReady 之前调用 jQuery 方法安全吗？

Question

我们有一个项目，其中 jQuery 连接到我们的主要 javascript 应用程序 JS 文件中，我想知道在 [=23= 之前调用 jQuery 方法是否安全]准备好了吗？

我看到很多网站建议触发你的 jQuery javascript after DOMReady，例如：

$(function(){
  $.each(myObject, function(index, val) {
    ...
  });
});

但是，这似乎会延迟脚本执行，有时会导致其他应用程序功能出现问题。由于 jQuery 已经包含在同一个 JS 文件中（在顶部），在不等待 DOMReady 的情况下触发 jQuery 方法是否不安全？

$.each(myObject, function(index, val) {
  ...
});

在我的测试中，它工作正常，但我只是想确保我不会被浏览器随机性所左右。我假设运行 jQuery 方法没问题，只要它低于 jQuery 定义，并且只要它不是 DOM 相关的活动。感谢您的任何输入。

Answer 1

如果您确定要使用 jquery 调用的元素在这一步已经存在，您可以安全地在那里编写代码。

例如，您可以在将元素编写为 html 之后编写 jquery 选择器和事件绑定。

我们使用 ready 函数只是为了确保所有内容都已加载并且完整页面 html 在那里，因为在某些情况下根据您的逻辑，您不确定是否 html元素是否存在，或者您的事件可能会影响其他一些元素。

Answer 2

您可以在 DOM 就绪之前进行任何 jQuery 次调用。要记住的一件事是，如果您引用 DOM 元素，则执行的代码将仅应用于 DOM 中已经存在的元素。

例如：

<div class="item">

</div>
<script>
    console.log(jQuery('.item').length); // It will output 1
</script>
<div class="item">

</div>
<script>
    console.log(jQuery('.item').length); // It will output 2
</script>

使用DOMReady 事件进行初始化只是一种确保所有元素都存在于DOM 中的做法。

Answer 3

是的，如果 jQuery 尚未加载到页面上，您只会运行使用 jQuery 方法遇到问题。如果你能保证你的脚本运行在 jQuery 加载后，应该不会有任何问题。

您可以通过将 jQuery <script> 标签放在您的 JS <script> 标签之前来做到这一点。或者，如果您将 JS 捆绑在一起，只需确保先捆绑 jQuery。

应该注意的是，虽然您可以在 jQuery 加载后立即使用 jQuery 方法，但某些元素（对于选择器）可能尚不可用，具体取决于您放置JS <script> 标签（或者更准确地说，当你的代码运行s 时）...所以如果你的代码依赖于 DOM，等待 DOM 到 "be ready" 可能不是个坏主意。

旁注： 如果您只需要 $.each 一个对象，则不必依赖 jQuery，以下任一选项都可以在没有任何 lib 依赖项的情况下工作：

旧浏览器支持 (IE8-)

for(var prop in myObject) {
  if(myObject.hasOwnProperty(prop)) {
    console.log('The value of '+ prop +' in myObject is '+ myObject[prop]);
  } 
}

对于较新的浏览器 (IE9+)

Object.keys(myObject).forEach(function(prop) {
  console.log('The value of '+ prop +' in myObject is '+ myObject[prop]);
});

在 DOMReady 之前调用 jQuery 方法安全吗？

Is it safe to call jQuery methods before DOMReady?

javascript

jquery

domready