jQuery库(noConflict)冲突解决机制

很多JSFramework库选择使用$符号作为一个函数或变量名,而在实际的项目开发,模板语言，则有可能"$"符号是模板语言keyword。例如Veclocity模板语言,$它是keyword.与jQuery冲突(页面中直接写jq代码,引入的js文件不存在该问题)。

吐槽下为啥这么多js库喜欢用$($ is money?)。

jQuery是使用$符号作为函数或变量名最为典型的一个。在jQuery中,$符号仅仅是window.jQuery对象的一个引用,因此即使$被删除,jQuery依旧能保证整个类库的完整性。

jQuery的设计充分考虑了多框架之间的引用冲突。我们能够使用jQuery.noConflict方法来轻松实现控制权的转交。

在论述怎样解决jQuery冲突之前,我们有必要先对noConflict函数做一个了解,解决冲突的方法就藏在里面。

jQuery.noConflict

jQuery.noConflict([removeAll]);

缺省參数情况下:

执行这个函数将变量$的控制权让渡给第一个实现它的库。在执行完这个函数之后,就仅仅能使用jQuery变量訪问jQuery对象(函数不带參数),比如jQuery("div p")。

只是须要注意的是该函数必须在你导入jQuery文件之后,而且在导入还有一个导致冲突的库"之前"使用。当然也应该在其它冲突库被使用之前,除非jQuery是最后一个导入的。

当參数为true时,运行noConflict则会将$和jQuery对象本省的控制权所有移交给第一个产生他们的库。

只是详细的移交机制是怎样实现的呢?查阅源代码就可以发现,在jQuery源代码中定义了两个私有变量_jQuery,_$。详细例如以下截图:

easy理解的是,jQuery通过上面两个私有的变量映射了window环境下的jQuery和$两个对象,防止了变量被强行覆盖。

一旦noConflict被调用,jquery能够通过_jQuery,_$,jQuery,$四者之间的差异,来决定控制权的移交方式,详细代码例如以下图:

接下来看看參数设定问题,假设deep没有设置,_$覆盖了window.$,此时jQuery的别名$失效了,可是jQuery变量未失效,仍可使用。此时假设有其它库或代码又一次定义了$变量的话,其控制权就转交出去了。

反之deep设置为true时，_jQuery进一步覆盖window.jQuery,此时$和jQuery都将失效。

这样的操作的优点是,无论是框架混用还是jQuery多版本号共存这样的高度冲突的运行环境,因为noConflict的控制权移交机制,以及本身返回违背覆盖的私有变量jQuery对象,全然可以通过变量映射的方式解决冲突。

演示样例

了解了jQuery内部解决冲突的实现方式,接下来看看一些实际的情况吧。

1、将$引用的对象映射回原始的对象。

jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其它库的 $()
$("content").style.display = 'none';

2、恢复使用别名$,然后创建并运行一个函数,在这个函数的作用域中仍然将$作为jQuery的别名来使用。

在这个函数中,原来的$对象是无效的。这个函数对于大多数不依赖于其它库的插件都十分有效。

jQuery.noConflict();
(function($) { 
  $(function() {
    // 使用 $ 作为 jQuery 别名的代码
  });
})(jQuery);
// 其它用 $ 作为别名的库的代码

3、创建一个新的别名用来在接下来的库中使用jQuery对象。

var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其它库的 $() 代码
$("content").style.display = 'none';

基于这样的方式,全部的jQuery代码都通过j进行调用,避免了冲突的可能。

4、全然将jQuery移到一个新的命名空间。

var dom = {};
dom.query = jQuery.noConflict(true);
        结果:
// 新 jQuery 的代码
dom.query("div p").hide();
// 还有一个库 $() 的代码
$("content").style.display = 'none';
// 还有一个版本号 jQuery 的代码
jQuery("div > p").hide();

解决冲突方式

冲突的方式无非3中情况：

1、其它库先于jQuery引用($被占用).

最简单的我们能够在不论什么地方调用jQuery.noConflict函数,之后使用jQuery()座位jQuery对象的制造工厂。

 jQuery.noConflict();       //将变量$的控制权移交给先导入的库
	 jQuery(function(){
		 jQuery("p").click(function(){   //使用jQuery变量 
			 
		 });
 });
 $("pp").style.display='none';   //其它库的调用

此外,假设你想确保jQuery不会与其它库冲突,但又想使用一个类似"$"的快捷方式,能够使用例如以下代码:

var $mj=jQuery.noConflict();       //自己定义快捷变量
	 $mj(function(){
		 $mj("p").click(function(){   //使用jQuery变量 
			 
		 });
 });
 $("pp").style.display='none';   //其它库的调用

假设你不想给jQuery自己定义名称,却想使用$，有不与其它库冲突.能够有两种解决方案:

其一:

jQuery.noConflict();       
 jQuery(function($){
   $("p").click(function(){   //在函数内部继续使用$
			 
   });
 });
 $("pp").style.display='none';   //其它库的调用

其二:

jQuery.noConflict();       //将变量$控制权让渡
(function($){               //定义匿名函数形參为$
	$(function(){      //匿名函数内部均为jQuery的$
           $("p").click(function(){
           
           });
        });
})(jQuery);                //运行匿名函数且传递实參jQuery
 $("pp").style.display='none';   //其它库的调用

这是较为理想的方式,由于能够改变最少的代码来实现全面的兼容性

2、其它库后于jQuery被引用

你能够參考上述做一些冲突解决办法,事实上其根本就不冲突,你能够使用jQuery变量做一些jQuery的处理工作。

同一时候能够使用$()方法作为其它库的快捷方式。

3、不同版本号jQuery、且有其它库

能够參考上述演示样例,将jQuery全然移到还有一个命名空间。

var dom = {};
dom.query = jQuery.noConflict(true);
// 新 jQuery 的代码
dom.query("div p").hide();
// 还有一个库 $() 的代码
$("content").style.display = 'none';
// 还有一个版本号 jQuery 的代码
jQuery("div > p").hide();

最后

jQuery解决冲突的机制是十分灵活的,有了这些冲突解决方式,就能够在项目中安心的使用jQuery了。