理解jQuery的noConflict() 方法

    许多JS框架类库都选择使用$符号作为函数或变量名，jQuery是典型的一个。如果其他框架也使用$符号作为简写，那同时使用两种框架，有可能导致脚本运行错误。jQuery团队考虑到这个问题，并用noConflict() 方法去解决由此引发的冲突。
    以上造成冲突的原因本质上是两个库对变量$的控制权冲突，noConflict()方法会将变量交给使用该方法的上一个实现它的JS库。
    jQuery.noConflict 方法包含一个可选的布尔参数[1]，用以决定移交 $ 引用的同时是否移交 jQuery 对象本身：
   jQuery.noConflict([removeAll])
    缺省情况下，执行 noConflict 会将变量 $ 的控制权移交给第一个产生 $ 的库；当 removeAll 设置为 true 时，执行 noConflict 则会将 $ 和 jQuery 对象本身的控制权全部移交给第一个产生他们的库。
    那么这个机制是如何实现的呢？阅读 jQuery 源码开头，首先做的一件事情是这样的：

1. // Map over jQuery in case of overwrite
   
2. _jQuery = window.jQuery,
   
3. 
   
4. // Map over the $ in case of overwrite
   
5. _$ = window.$,

    jQuery 通过两个私有变量映射了 window 环境下的 jQuery 和 $ 两个对象，以防止变量被强行覆盖。一旦 noConflict 方法被调用，则通过 _jQuery, _$, jQuery, $ 四者之间的差异，来决定控制权的移交方式，具体的代码如下：    

1. noConflict: function( deep ) {
   
2.                 if ( window.$ === jQuery ) {
   
3.                         window.$ = _$;
   
4.                 }
   
5. 
   
6.                 if ( deep && window.jQuery === jQuery ) {
   
7.                         window.jQuery = _jQuery;
   
8.                 }
   
9. 
   
10.                 return jQuery;
    
11.         }

    如果 deep 没有设置，_$ 覆盖 window.$，此时 jQuery 别名 $ 失效，但 jQuery 本身完好无损。如果有其他类库或代码重新定义了 $ 变量，它的控制权就完全交接出去了。反之如果 deep 设置为 true 的话，_jQuery 覆盖 window.jQuery，此时 $ 和 jQuery 都将失效。

这种操作的好处是，不管是框架混用还是 jQuery 多版本共存这种高度冲突的执行环境，由于 noConflict 方法提供的移交机制，以及本身返回未被覆盖的 jQuery 对象，完全能够通过变量映射的方式解决冲突。

但无法避免的事实是可能导致的插件失效等问题，当然通过简单修改上下文参数即可恢复 $ 别名：

1. var query = jQuery.noConflict(true);
   
2. (function ($) {
   
3. // 插件或其他形式的代码，也可以将参数设为 jQuery
   
4. })(query);

完整的从语法到实例的过程：

语法

静态函数jQuery.noConflict()的语法如下：

jQuery.noConflict( [ removeAll ] )

参数

参数	描述
removeAll	可选/Boolean类型是否彻底移交对变量jQuery的控制权，默认为false。

返回值

jQuery.noConflict()函数的返回值是jQuery类型，返回变量jQuery的引用。

示例&说明

以下是加载Prototype和jQuery库的情况：

 type="text/javascript" src="prototype.js">
  type="text/javascript" src="jquery.js">
  type="text/javascript"> // 让出对变量$的控制权 jQuery.noConflict(); // 使用jQuery进行DOM操作 jQuery("#uname").hide(); // 使用Prototype进行DOM操作 $("myDiv").setStyle( {color: "#ffffff"} ); 

运行代码 (以下代码请自行复制到演示页面运行，注意不要同时执行，请分别执行)

此外，我们还可以使用其他自定义的变量名来操作jQuery：

// 让出对变量$的控制权，并将jQuery赋给新的别名j var j = jQuery.noConflict(); // 基于jQuery进行DOM操作(使用变量j) j("#uname").hide(); // 基于Prototype进行DOM操作 $("myDiv").setStyle( {color: "#ffffff"} );

即使是多个库共存，我们也可以在jQuery.ready()的回调函数或其他自定义函数中将局部变量$作为jQuery的别名使用：

// 让出jQuery库对变量$的控制权 jQuery.noConflict(); jQuery(document).ready(function($){     // 使用局部变量$进行jQuery操作     $("p").css("color", "");     }); (function($){     // 使用局部变量$进行jQuery操作     $("ul li").addClass("item");     }(jQuery));

如果要实现两个版本的jQuery库共存，我们可以编写如下代码：

 type="text/javascript" src="jquery-1.4.2.js">
  type="text/javascript" src="jquery-1.11.1.js">
  type="text/javascript"> // 让出jQuery-1.11.1对变量$和变量jQuery的控制权 var j = jQuery.noConflict( true ); document.writeln( j.fn.jquery ); // 1.11.1 document.writeln( $.fn.jquery ); // 1.4.2 document.writeln( jQuery.fn.jquery ); // 1.4.2 /*
 * 如果前面的jQuery.noConflict()没有传入参数true，
 * 也就是说只让出变量$的控制，则$表示1.4.2，jQuery表示1.11.1
 * 此时，jQuery.fn.jquery为1.11.1
 */  

三个版本的jQuery库共存，对应的jQuery示例代码如下：

 type="text/javascript" src="jquery-1.4.2.js">
  type="text/javascript" src="jquery-1.8.3.js">
  type="text/javascript" src="jquery-1.11.1.js">
  type="text/javascript"> // 让出jQuery-1.11.1对变量$和变量jQuery的控制权，使用变量j来控制 var j = jQuery.noConflict( true ); // 让出jQuery-1.8.3对变量$的控制权 jQuery.noConflict(); document.writeln( j.fn.jquery ); // 1.11.1 document.writeln( jQuery.fn.jquery ); // 1.8.3 document.writeln( $.fn.jquery ); // 1.4.2 

注意：多个可能存在全局变量重名冲突的JS库，变量的实际控制权一般取决于JS库的加载顺序。以上面三个版本的jQuery库的示例代码为例，后加载的jQuery库的变量覆盖了之前版本的变量，因此每次让出变量的控制权，控制权就会交给上一个JS库。