很多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了。
版权声明：本文博客原创文章，博客，未经同意，不得转载。