javascript - 有什么方法可以阻止 JQuery 吃掉我的 <script> 标签

Question

我的 HTML 中有内联 javascript。每个需要动画或 Action ( slider 、扩展文本区域等)的单独组件都有自己的内联脚本，用于为该单独组件设置动画等。

我的设置方式是，每个脚本都是位置相关的:它引用自己在 DOM 中的位置，并遍历它以找到它想要操作的组件(例如“将 onclick 添加到父 div”)。这通常是一个非常糟糕的主意，原因如下:

• 必须到处重复相同的代码，失去了 DRY
• 非常冗长，一遍又一遍地重复相同的文本 block ，占用带宽
• 一堆内联脚本使 HTML 变得困惑，难以阅读

但是，第二个问题用GZIP很容易解决，我已经解决了第一个问题和最后一个问题。

这具有引用局部性的优点:它们所需的组件和脚本保存在一个位置，而不是分散在单独的文件中。另外，我将每组脚本隔离在 (function(){})() 中，并避免污染全局命名空间，因此每个组件的每组脚本都编写一次，并且根本不与其他地方编写的脚本交互。完美的模块化

所以问题是，当我进行 Ajax DOM 插入/替换时，如何阻止 JQuery 吃掉我的脚本标签？如果它没有吃掉我的脚本，因为每个组件都完全独立于它自己的脚本，我可以简单地运行新组件的 DOM 中的每个脚本标签，就是这样；一切都会安排妥当。不再需要根据更改的组件来决定需要重新运行哪些全局脚本。

但是，由于 JQuery 似乎坚持剥离我的脚本标签并将它们移动到某个地方，所以这不再有效。我可以通过修改替换整个文档的 HTML 来完成插入，但这会导致整个屏幕在回流时闪烁(以及其他问题)。有什么想法吗？

Answer 1

我不明确了解 jQuery，但大多数库都会从 XHR 返回的内容中删除脚本元素，并打算使用innerHTML 插入这些内容。这是因为插入innerHTML 不会执行脚本(在绝大多数浏览器中)。查看 jQuery 源代码，load 方法会删除脚本元素。

因此，他们删除了脚本元素，然后插入 HTML。这可确保脚本不会执行或导致问题。

一些库有一个“执行脚本”(或类似的)标志，如果设置，意味着它们会将脚本元素内容传递给eval，但这也存在陷阱。

一种解决方案是将所有脚本片段放入单独的文件中，然后在脚本元素上使用 src 属性。如果您找不到不删除脚本的 jQuery 方法，则可以非常简单地编写自己的“get”或“load”或任何不删除脚本的函数，或者使用已编写的数千个函数之一。

如果您仅使用脚本元素，则可以简单地创建一个脚本元素，设置 src 属性并将其放入 DOM 中(这是执行 AJAX 的一种方法)。