Question

我们有一个项目，其中jQuery连接到我们的主要javascript应用程序JS文件中，我想知道在DOMReady之前调用jQuery方法是否安全？

我看到许多网站建议在 DOMReady之后触发你的jQuery javascript ，例如：

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

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

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

在我的测试中，它工作正常，但我只是想确保我不会留下浏览器随机性。我假设只要它低于jQuery定义就可以运行jQuery方法，并且只要它不是与DOM相关的活动。感谢您的任何意见。

Answer 1

您可以在DOMReady之前进行任何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 2

如果您确定在此步骤中已使用jquery调用的元素已存在，则可以安全地在那里编写代码。

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

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

Answer 3

是的，如果jQuery还没有加载到页面上，你只会遇到使用jQuery方法的问题。如果你可以保证你的脚本将在jQuery加载后运行，那么应该没有任何问题。

您可以将jQuery <script>标记放在JS <script>标记之前。或者如果将JS捆绑在一起，只需确保首先捆绑jQuery。

应该注意的是，尽管jQuery加载后你可以使用jQuery方法，但是某些元素（对于选择器）可能还不可用，这取决于你放置JS <script>标记的位置（或者更准确，当你的代码运行时）...所以如果你的代码依赖于DOM，等待DOM“准备好”可能不是一个坏主意。

<强>旁注：如果您只需要$.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方法是否安全？

3 个答案: