一起使用不同版本的 jQuery 和 jQueryUI [英] Using different versions of jQuery and jQueryUI together

问题描述

我正在开发一个项目，他们的框架使用 jQuery 1.3.2 和 jQueryUI 1.7.2.

升级框架中的版本是不可能的，所以我想并行运行 jQuery 1.4.4 和 jQueryUI 1.8.5.

我已经看到不同版本的 jQuery 可以像这样并行使用:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></脚本><script type="text/javascript">var j$132 = $.noConflict(true);<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script><script type="text/javascript">var j$144 = $.noConflict(true);

但这是否也适用于以下情况:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></脚本><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script><script type="text/javascript">var j$132 = $.noConflict(true);<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script><script type="text/javascript">var j$144 = $.noConflict(true);

解决方案

AFAIK，jQuery UI 没有等效的 $.noConflict().但是，您可以使用 jQuery UI 的本地副本，并使用与用于为不同库设置别名的技巧类似的技巧来包装整个 JS:

(函数(jQuery) {//... jQuery 1.3.2 的 jQuery UI 库代码})(j$132);

这可以使用服务器端构建脚本或处理 JS 文件但使用上述代码包装内容的处理程序优雅地实现.

尚未测试过这种方法，因此您可能不得不摆弄函数参数(尽管我认为假设它使用 jQuery 在插件代码中引用 jQuery 是安全的).

您使用它的方式是声明两个版本的 jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></脚本><script type="text/javascript">var j$132 = $.noConflict(true);<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script><script type="text/javascript">var j$144 = $.noConflict(true);

...然后包含您的 UI 代码，正如我上面指定的那样.

不，您不能在从 Google CDN 引用 UI JS 文件时执行此操作.

问题中的第二个代码块实际上是比这个答案更好的解决方案，因为它不需要将原始 UI 代码包装在自执行函数中并传递特定版本.这两种方法确实会导致页面上的状态完全相同.

I am working on a project where their framework uses jQuery 1.3.2 and jQueryUI 1.7.2.

Upgrading the versions in the framework is not a possibility so i wanted to run jQuery 1.4.4 and jQueryUI 1.8.5 in parallel.

I have seen that different versions of jQuery can be used in parallel like so:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
    <script type="text/javascript">
        var j$132 = $.noConflict(true);
    </script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
        var j$144 = $.noConflict(true);
    </script>

But would this also hold true for the following:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript">
        var j$132 = $.noConflict(true);
    </script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var j$144 = $.noConflict(true);
    </script>

解决方案

AFAIK, there's no $.noConflict() equivalent for jQuery UI. You can, however, use a local copy of jQuery UI and wrap the whole JS using a similar trick to what you use for aliasing the different libraries:

(function(jQuery) {
  // ... the jQuery UI lib code for jQuery 1.3.2
})(j$132);

This could be elegantly implemented using a server-side build script or a handler that serves the JS files but wraps the contents with the above code.

Haven't tested this approach, so you may have to fiddle around with the function parameter (although I think it's safe to assume it uses jQuery to reference jQuery within the plugin code).

The way you'd use this is declare both versions of jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script type="text/javascript">
    var j$132 = $.noConflict(true);
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
    var j$144 = $.noConflict(true);
</script>

... and then include your UI code, as I've specified above.

And no, you can't do this while referencing the UI JS files from Google CDN.

EDIT: The second code block in the question is actually a better solution than this answer, since it doesn't require wrapping the original UI code in a self-executing function and passing the specific version. Both approaches do result in exactly the same state on the page.

这篇关于一起使用不同版本的 jQuery 和 jQueryUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！