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

时间:2018-09-25 12:46:50

标签: javascript jquery jquery-ui

我发现了许多其他类似的问题,但是这种特定情况对于先前的问题适用的更典型的情况来说是独一无二的。

我的理解以及用于解决两个版本的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变量所实现的方法,结果将是相同的。

我很难解决的问题是,我遇到了以前不必处理的链接库依赖项需要以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库来缓解冲突,但是它们每个都有一套独特的功能,这些功能不会交叉。因此,代码中的每个所需应用程序只能使用一个版本。

1 个答案:

答案 0 :(得分:2)

第一:请勿使用多个版本的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_v132jQuery_whatever

(我使用“无论如何”,是因为我不知道您的jquery-ui 1.12.1.custom/jquery.js文件是什么版本的jQuery,但它不太可能是jQuery 1.12.1。)