三分钟带你玩转jQuery.noConflict()

jQuery是目前使用最广泛的前端框架之一，有大量的第三方库和插件基于它开发。为了避免全局命名空间污染，jQuery提供了jQuery.noConflict()方法解决变量冲突。这个方法，毫无疑问，非常有效。遗憾的是，jQuery的官方文档对该方法的描述不够清晰，许多开发者并不清楚当他们调用jQuery.noConflict()时，究竟发生了什么，从而导致在使用时出现了许多问题。尽管如此，jQuery.noConflict()背后实现原理依然值得Web开发者学习掌握，成为解决类似全局命名空间污染问题的利器。

jQuery.noConflict()的作用？

  jQuery.noConflict()的存在只有一个目的：它允许你在同一个页面加载多个jQuery实例，尤其是不同版本的jQuery。你可能会觉得奇怪，为什么要在一个页面加载/使用多个不同版本的jQuery对象呢？一般而言，有两种情况。第一种情况，你的业务代码采用了最新版的jQuery库，而你选用的第三方插件依赖的更早版本的jQuery库；第二种情况，你正维护着一个系统，它已有的业务代码由于各种原因，引用了较老版本的jQuery库，你新开发的模块采用的是其他版本的jQuery库。不论哪种情况，你都不得不面对，jQuery对象/方法冲突的问题。幸运的是，jQuery.noConflict()帮你解决了这个烦恼。

jQuery被加载时发生了什么？

当jQuery被页面引用/加载时，它被封装在一个自执行函数（匿名函数）里，它提供的所有一切变量、函数、对象都在匿名函数内部的可执行环境内，外部环境无法调用,以防止全局命名空间污染。

rush:js;">

避免第三方库的冲突

以上的代码片段展示了如何解决多版本jQuery的冲突。接下来，我们尝试解决jQuery库和第三方库的冲突，下面出现的代码片段在jQuery的官方文档中都有，有兴趣的程序猿可以仔细阅读官方文档体会其中的区别。

直接使用No-Conflict模式

使用No-Conflict模式，其实就是对jQuery进行重命名，再调用。

rush:js;">

使用自执行函数封装

使用这种方式，你可以在匿名函数内部继续使用标准的$对象，这也是众多jQuery插件采用的方法。需要注意的是，使用这种方法，函数内部无法再使用prototype.js定义的$对象了。

rush:js;">

使用标准jQuery(document).ready()函数

如果jQuery库在其它库之前引入，那么jQuery内部定义的jQuery和$会被第三方库覆盖，这时候再使用noConflict()已经没有什么意义了。解决的方法很简单，直接使用jQuery的标准调用方式。

rush:js;">

下面给大家介绍jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

实例

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

rush:js;"> $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍在运行！"); }); });

实例

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

rush:js;"> var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍在运行！"); }); });

实例

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

rush:js;"> $.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍在运行！"); }); });