动态 JS 和 jquery 混淆

我们有一个由许多应用程序共享的HTML模板。现在我们必须从供应商那里实现一些 js，我们被要求在 body 标签之后放置一个 js 引用，并且 js 实际上使用 document.getElementsByTagName（'script'）和 insertBefore 方法在 head tag 之后动态注入一些 js，所以最终的 html 看起来像这样：

<head>
    <script> A </script>
    <script> B </script>
<body>
    <script> first </script>

问题，由于脚本A/B使用的是jQuery，并且由于这是一个模板html，因此使用此模板的应用程序可能会加载其他一些不同的jquery，我应该如何避免混淆？我知道我们应该使用$.noConflit方法，但我不确定如何做到这一点。

我们不允许更改第一个/A/B 脚本，所以我认为我们应该为这些人保留"$/jquery"。我还想确保每个应用程序加载的jQuery仍然可以使用$

哎呀，以下内容是在假设A/B是内部/"你的"的情况下编写的。由于情况并非如此，后者并不严格适用 - 祝你好运！

要编写与其他代码很好地隔离的代码（即独立于其他代码$或jQuery），请使用模块模式。

一个简单的窗体如下所示：

;(function ($) {           // Dependencies bound here (in parameters)
    // Rest of your code;
    // you can be assured that $ is for "your" jQuery
    // because it was bound/injected when the script was executed.
})(jQuery.noConflict())    // Dependencies injected here - immediately.

这使得隔离依赖项并"绑定"到特定对象变得容易 - 在这种情况下，jQuery可以在运行此脚本后重新分配，并且不会产生任何影响，因为正确的jQuery对象已经绑定。如果需要，这也可以很容易地转换为 RequireJS（或其他模块加载器）。

只需确保在 A/B 脚本之前加载"您的"版本的 jQuery，并在 C 脚本之前加载"他们的"版本（如果需要）。请记住，默认情况下脚本元素执行是同步的。

<head>
    <script src="YourVersionOfJQuery"> </script>
    <script> A </script>
    <script> B </script>
<body>
    <script src="TheirDependenciesAndMaybeOldjQueryVersion"> </script>
    <script> /* other setup as required */ </script>
    <script> C </script>

您可能必须"玩"不同的顺序。

相关内容

最新更新

热门标签：