javascript - 如何使用 .noConflict 解决 3 个或更多 JQuery 依赖版本之间的 JQuery 冲突？

Question

我发现了许多其他类似的问题，但这个特定场景对于前面的问题适用的更典型的场景来说有些独特。

在这个例子中，我的理解和解决两个版本的 JQuery 之间冲突的常规方法如下:

<script type="text/javascript" src="../Static/jquery-1.3.2.min.js" ></script>

<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript">
    var JQuery_1_12_1 = $.noConflict(true);
    $JQuery_1_12_1(document).ready(function () {

            // Code dependent on JQuery 1.12.1 can safely execute here without 
            // conflicting with version 1.3.2
    });
</script>

<script type="text/javascript">
            // Code executed within this block will use 1.3.2
</script>

或者，我可以复制为 1.3.2 定义 1.12.1 的 noConflict 变量所实现的方法，结果是相同的。

我难以解决的问题是，我遇到了以前从未处理过的情况，其中存在需要以无冲突方式组合在一起的链接库依赖项。

目前的情况如下:

<script type="text/javascript" src="../Static/jquery-1.3.2.min.js" ></script>


<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript">
    var JQuery_1_12_1 = $.noConflict(true);
    $JQuery_1_12_1(document).ready(function () {

            // Code dependent on JQuery 1.12.1 can safely execute here without 
            // conflicting with version 1.3.2 but do to the lack of the dependent version this code will always break
    });
</script>

<script type="text/javascript">
            // Code executed within this block will use 1.3.2
</script>

正如您所注意到的，jquery-ui.js 和 jquery.js 之间存在相互依赖关系，并且由于这种相互依赖关系，$JQuery_1_12_1 变量不能同时适用于两者。

或者，为 jquery-ui.js 库创建一个单独的 noConflict 变量需要将其放置在单独的脚本标记的上下文中，这实际上会破坏依赖关系，并且代码将无法正常运行。

如何解决这个问题？

我还尝试使用其中一个 JQuery 库的相同版本来缓解冲突，但它们各自都有一组不交叉的独特功能。因此，代码中每个所需的应用程序只有一个版本可以工作。

Answer 1

第一:不要使用多个版本的 jQuery。它会使您的页面变得臃肿且复杂。使用最新版本的 jQuery，如果您的插件无法与该最新版本配合使用，请更新它们，以便它们能够配合使用(理想情况下，如果可以的话，请将拉取请求发送回插件的存储库)有一个)，或者使用积极维护的东西。

<小时/>

现在，如果由于某种原因你不能这样做:

任何半体面的 jQuery 插件都会使用 jQuery 变量的值在插件加载时，通过执行以下操作:

(function($) {
    // Plugin code
})(jQuery);

如果您随后加载不同版本的 jQuery，该插件仍会使用较早的版本，因为它在加载时捕获了 jQuery 的值。

因此，在加载给定 jQuery 版本后立即加载该版本的 jQuery 插件。

然后:对您自己的代码执行相同的操作。

<script src="../Static/jquery-1.3.2.min.js" ></script>
<script src="../plugin/that/needs/version/132.js"></script>
<script src="../your/code/that/needs/version/132.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script src="../your/code/that/needs/what/jQueryUI/is/using.js"></script>

...您的脚本代码执行与行为良好的插件相同的操作:

(function($) {
    // Use $ here
})(jQuery);

如果您的代码(不寒而栗)需要使用两个版本的jQuery，请在变量中捕获每个版本:

<script src="../Static/jquery-1.3.2.min.js" ></script>
<script src="../plugin/that/needs/version/132.js"></script>
<script>
var jQuery_v132 = jQuery;
</script>
<script src="../your/code/that/needs/version/132.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
var jQuery_whatever = jQuery;
</script>
<script src="../your/code/that/needs/what/jQueryUI/is/using.js"></script>
<script src="../your/code/using/both.js"></script>

...使用两者的代码酌情使用 jQuery_v132 或 jQuery_whatever。

(我使用了“whatever”，因为我不知道您的 jquery-ui 1.12.1.custom/jquery.js 文件是什么版本的 jQuery，但它不太可能是 jQuery 1.12 .1.)