0

我们有一个由许多应用程序共享的 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 加载，我应该如何避免冲突？我知道我们应该使用 $.noConflit 方法，但我不知道该怎么做。

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

4

1 回答 1

0

糟糕，以下内容是在假设 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>

您可能不得不“玩”不同的顺序。

于 2013-09-17T23:55:38.680 回答