如何在同一页面上运行不同版本的 jQuery？

Posted 2023-02-22

【中文标题】如何在同一页面上运行不同版本的 jQuery？

【英文标题】：How do I run different versions of jQuery on the same page?

【发布时间】：2010-10-06 09:47:17

【问题描述】：

我的公司购买了一种在页面上呈现 ASP.NET 控件的产品。此控件使用 jQuery 1.2.3 并向页面添加脚本标记以引用它。如果控件以任何方式修改（包括修改为引用不同版本的 jQuery），控件的开发人员将不支持使用该控件。

我即将开始开发自己的控件，并希望使用 jQuery 1.3 的功能和速度改进。这两个控件需要存在于同一页面上。

如何让购买的控件使用jQuery 1.2.3，新的自定义开发使用jQuery 1.3？同样出于好奇，如果我们要使用需要引用另一个版本的 jQuery 的附加控件怎么办？

【问题讨论】：

控件作者的作者不发布更新吗？还是新版本不兼容？很奇怪，一个商业第三方控件供应商创建了一个控件，该控件被硬编码为一个经常更新的开源 javascript 的特定版本。

如果您使用坚持使用固定版本 jQuery 的多个服务器控件，我看不出您是如何不被搞砸的。

并非每个插件作者都一丝不苟地更新/能够定期更新他的代码。我也遇到过这个问题，但后来我切换到了一个经常更新、社区驱动的同类产品。

我们在门户环境中遇到了类似的问题。每个 portlet 开发人员都可以/将捆绑他们测试其应用程序/portlet 的 jQuery 版本，并且大多数情况下不会同步。

【参考方案1】：

您可以通过在no-conflict mode 中运行您的jQuery 版本来实现这一点。 “无冲突”模式是让 jQuery 在具有其他框架（如 prototype）的页面上工作的典型解决方案，也可以在这里使用，因为它本质上为您加载的每个版本的 jQuery 命名空间。

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

此更改意味着您要使用的任何 jQuery 内容都需要使用 jq13 而不是 $ 来调用，例如

jq13("#id").hide();

让两个版本在同一个页面上运行并不是一个理想的情况，但如果你别无选择，那么上述方法应该允许你同时使用两个不同的版本。

同样出于好奇，如果我们要使用额外的控件会怎样 需要引用另一个版本的 jQuery 吗？

如果您需要添加另一个版本的 jQuery，您可以在上面进行扩展：

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>
<script src="jQuery1.3.1.js"></script>
<script>
    jq131 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

变量jq13 和jq131 将分别用于您需要的特定于版本的功能。

重要的是 原始开发人员使用的 jQuery 最后加载 - 原始开发人员可能在假设 $() 将使用他们的 jQuery 版本的情况下编写他们的代码。如果您在他们之后加载另一个版本，$ 将被您加载的最后一个版本“抓取”，这意味着原始开发人员的代码在最新的库版本上运行，从而使 noConflicts 有点多余！

【讨论】：

顺序真的很重要吗？ noConflict 函数的全部意义不在于将“$”变量返回给原始所有者吗？订购不应该很重要。重要的是，jQuery.noConflict 在应该进入非冲突模式的 jQuery 版本被加载之后立即被调用。

mtyaka 是完全正确的。如果传入“true”参数，则无需担心加载脚本的顺序。将 'true' 传递给 noconflict 会将 'jQuery' 变量和 '$' 变量恢复到原来的状态。没有它，只有 '$' 被恢复。

【参考方案2】：

似乎顺序无关紧要...例如：http://gist.github.com/136686。控制台输出位于顶部，所有版本似乎都在正确的位置。

【参考方案3】：

正如 ConroyP 所说，您可以使用 jQuery.noConflict 执行此操作，但在声明变量时不要忘记 var。 像这样。

<script src="jQuery1.3.js"></script>
<script>
    var jq13 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

您可以通过在函数) 之后添加 (jq13) 将所有 $ 连接到 jq13。像这样

(function($) 
 ... 
)(jq13); 

【讨论】：

没有 var 在这里没什么大不了的。没有 var 定义的变量具有全局范围。您希望 jq13 对象具有全局范围。

隐式全局变量是不好的编码习惯。如果你确定你想要一个全局变量，你应该使用 var 关键字在全局范围内声明它，或者，如果在函数内，手动将变量附加到窗口对象。见javascript.crockford.com/code.html#variable%20declarations

【参考方案4】：

在第二个版本中，将变量声明为 $.noConflict(true)。并使用声明的变量代替 jquery 代码中使用的 $ 。请检查以下代码：此代码在声明第二个版本的 jquery 后使用：

<script type="text/javascript">
var jQuery_1_9_1 = $.noConflict(true); function pageLoad(sender, args) 

        var $ddl = jQuery_1_9_1("select[name$=drpClassCode]");
        var $ddl1 = jQuery_1_9_1("select[name$=drpSubContractors]");
        $ddl.select2();
        $ddl1.select2();

        $ddl.bind("change keyup", function () 
            $ddl.fadeIn("slow");


        );

        $ddl.bind("change keyup", function () 
            $ddl1.fadeIn("slow");


        );
    

【参考方案5】：

让它工作起来是假的

var jq16 = $.noConflict(false);