Question

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

<head>
    <script> A </script>
    <script> B </script>

<body>
    <script> first </script>

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

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

Answer 1

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

要编写与其他代码完全隔离的代码（即独立于其他地方的$或jQuery），请使用Module Pattern。

一个简单的表格如下：

;(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>

您可能必须以不同的顺序“玩”。

动态js和jquery conflits

1 个答案: