javascript - 将脚本添加到 DOM 对象

Question

我想添加一个脚本，该脚本在加载/渲染后立即应用于某种类型的 DOM 对象。这种类型的对象总是与 javascript 脚本一起出现，我想将它们放在某个标签中。如下这样做对吗？如果是这样，我怀疑 span 不是此处使用的最佳标签，因为它可能与内部元素的显示方式交互。我应该使用什么标签？

<span>
  <div>the dom object to be modified by the script</div>
  <script>theJavascriptFunctionThatModifiesTheDomObject()</script>
</span>

Answer 1

由于以下原因，我怀疑这是在 DOM 加载特定元素后加载脚本的最佳方式:-

• 它会使您的页面加载速度变慢。
• 用户将以离散的方式看到您的完整页面。

相反，你应该这样做:-

• 为您的元素指定一个选择器。
• 在正文末尾添加您的单个 JavaScript 代码。
• 使用该脚本更新 DOM 元素。

编辑:解决方案1:将 JS 附加到 body 的末尾，以便它可以访问所有 DOM 元素。由于您使用 ajax 在 DOM 中注入(inject)元素，因此您可以为 XHR 对象定义一个成功处理程序，它将修改 DOM 中的元素。

解决方案2:您可以在JS中定义一个单独的方法并将该方法绑定(bind)到某个事件上。在 HTML 标记中定义一个数据事件属性，并在成功处理程序中将元素附加到 DOM，使用 jquery 数据方法提取数据事件并触发该事件。

至少它会让您的标记远离脚本逻辑。

一些有用的链接:

Best practices for speeding up your website - yahoo

Why we should load scripts at end - SO Link