当一个项目中引入多个第三方库的时候,由于没有命名空间的约束(命名空间就好比同一个目录下的文件夹一样,名字相同就会产生冲突),库与库之间发生冲突在所难免。
那么,既然有冲突的问题,为什么要使用多个库呢?原因是jQuery 只不过是DOM 操作为主的库,方便我们日常Web 开发。但有时,我们的项目有更多特殊的功能需要引入其他的库,比如用户界面UI 方面的库,游戏引擎方面的库等等一系列。而很多库,比如prototype、还有我们JavaScript 课程开发的Base 库,都使用“$”作为基准起始符,如果想和jQuery 共容有两种方法:
1. jQuery库在其他库之后导入
在其他库和jQuery库都被加载完毕后,可以在任何时候调用 jQuery.noConflict()函数来将变量$的控制权让渡给其他javascript库。示例如下:
//....省略其他代码
<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery(将被绑定单击事件)</p>
<!-- 引入 prototype -->
<script src="./js/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="./js/jquery.js" type="text/javascript"></script>
<script>
jQuery.noConflict(); //将变量$的控制权让渡给 prototype.js
jQuery(function(){
jQuery("p").click(function(){
alert( jQuery(this).text());
});
});
$("pp").style.display = "none"; //使用 prototype.js 隐藏元素
</script>
然后,就可以在程序中将 jQuery() 函数作为jQuery对象的制造工厂。
此外,还有另一种选择。如果想确保jQuery不会和其他库冲突,但又想自定义一个快捷方式,可以进行如下操作:
//....省略其他代码 var $j = jQuery.noConflict(); //自定义一个快捷方式 $j(function(){ //使用jQuery,利用自定义快捷方式——$j
alert( $j(this).text()); }); }); $("pp").style.display = "none"; //使用 prototype.js 隐藏元素$j("p").click(function(){
//....省略其他代码
如果不想给jQuery自定义这些备用名称,还想使用$而不管其他库的$()方法,同时又不想与其他库相冲突,那么可以使用以下两种解决方法。其一:
//....省略其他代码
jQuery.noConflict(); //将变量$的控制权让渡给 prototype.js jQuery(function($){ //使用jQuery设定页面加载时执行的函数 $("p").click(function(){ //在函数内部继续使用 $()方法 alert( $(this).text()); }); }); $("pp").style.display = "none"; //使用 prototype.js 隐藏元素
//....省略其他代码
其二:
//....省略其他代码
jQuery.noConflict(); //将变量$的控制权让渡给 prototype.js (function($){ //定义匿名函数并设置形参为$ $(function(){ //匿名函数内部的$均为jQuery $("p").click(function(){ //继续使用 $()方法 alert($(this).text()); }); }); })(jQuery); //执行匿名函数且传递实参jQuery $("pp").style.display = "none"; //使用 prototype.js 隐藏元素
//....省略其他代码
这应该是最理想的方式,因为可以通过改变最少的代码来实现全面的兼容性
2. jQuery库在其他库之前导入
如果jQuery库在其他库之前就导入了,那么可以直接使用 "jQuery" 来做一些jQuery的工作。同时,可以使用$()方法作为其他库的快捷方式。这里无需调用 jQuery.noConflict()函数。示例如下:
//....省略其他代码 <p id="pp">Test-prototype(将被隐藏)</p> <p>Test-jQuery(将被绑定单击事件)</p>
<!--后引入 prototype --><script src="./js/prototype.js" type="text/javascript"></script><script> jQuery(function(){ jQuery("p").click(function(){ alert( jQuery(this).text()); }); }); $("pp").style.display = "none"; //使用 prototype.js 隐藏元素</script>//....省略其他代码<!-- 引入 jQuery --> <script src="./js/jquery.js" type="text/javascript"></script>
建议将jQuery放在所有引用库之前,并利用定义匿名函数,设置形参$,并传递jQuery作为实参的方法