Question

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

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

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

Answer 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有点多余！

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

Answer 3

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

Answer 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");


        });
    }

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

4 个答案: