1

我们有一个项目，其中 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 相关的活动。感谢您的任何意见。

4

3 回答 3

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 中的做法。

于 2015-07-15T19:25:40.730 回答
1

是的，如果 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]);
});
于 2015-07-15T19:27:03.640 回答
0

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

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

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

于 2015-07-15T19:21:20.157 回答