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

Question

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

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

我该如何让已购买的控件使用jQuery 1.2.3，而新的自定义开发使用jQuery 1.3呢？另外，令人好奇的是，如果我们使用需要引用另一个jQuery版本的附加控件会怎样呢？

- Alex Angas

---

控件的作者没有发布更新吗？还是新版本不兼容？非常奇怪的是，一个商业第三方控件供应商创建了一个控件，它被硬编码到一个经常更新的开源JavaScript的特定版本中。 - BlackMael

如果您使用多个服务器控件并坚持使用固定版本的jQuery，我无法看出您如何不会遇到问题。 - BlackMael

并不是每个插件作者都能够精心地定期更新他的代码。我也曾面临过这个问题，但后来我转向了一个经常更新、由社区驱动的等效方案。 - Robin Maben

我们有一个类似的问题，这是由于处于门户环境中。每个Portlet开发人员都可以/将会捆绑他们测试应用程序/Portlet的jQuery版本，而这些版本大多数情况下不会同步。 - Stefan

Answer 1

你可以通过在 无冲突模式 下运行你的 jQuery 版本来实现这一点。"无冲突" 模式是在页面上与其他框架（如 prototype）一起使用 jQuery 的典型解决方案，也可以在这里使用，因为它基本上为你加载的每个版本的 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有些多余！

- PConroy

---

排序真的很重要吗？难道noConflict函数的整个意义不是将“$”变量返回给原始所有者吗？排序不应该很重要。然而，重要的是，在加载应该进入非冲突模式的jQuery版本后立即调用jQuery.noConflict。 - mtyaka

mtyaka说得非常正确。如果你传入'true'参数，就不必担心加载脚本的顺序了。将'true'传递给noconflict函数会将'jQuery'变量和'$'变量都还原到它们原来的状态。如果没有'true'参数，则只会还原'$'变量。 - Muhd

Answer 2

像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); 

- Tigran Tokmajyan

---

没有var也无关紧要。没有使用var定义的变量具有全局作用域。你希望jq13对象具有全局作用域。 - Alana Storm

隐式全局变量是不良的编码习惯。如果你确定需要一个全局变量，应该使用var关键字在全局作用域中声明它，或者在函数内手动将变量附加到window对象上。请参见http://javascript.crockford.com/code.html#variable%20declarations。 - Muhd

Answer 3

看起来顺序并不重要...例如：http://gist.github.com/136686。控制台输出在顶部，所有版本似乎都在正确的位置。

- Aaron Gibralter

Answer 4

将其变为false以使其工作

var jq16 = $.noConflict(false);

- Hisen

Answer 5

在第二个版本中，声明一个变量为$.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");


        });
    }

- Manish Ojha