发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用‘$’符号作为其代号。因此在一个页面中引入多个JS库,并且使用‘$’作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原因就必须深入到jQuery的源码中去分析了,因此本文暂不深入讨论)。
解决方案:
解决JS库冲突总共可以分为以下几种方法:
①让渡‘$’标示符,使用jQuery作为jQuery对象的标示符(别名)。
②使用别名替代‘$’和jQuery标识符,如下面的$j(名字可以任取)。
var $j=jQuery.noConflict(); $j("#div").hide();
③使用匿名函数
jQuery.noConflict(); (function($) { $(function() { // 使用 $ 作为 jQuery 别名的代码 }); })(jQuery); ... // 其他用 $ 作为别名的库的代码
情况一:如果jQuery库在其他库之后导入
方法:这种情况下,如何要使用‘$’作为其他库的标识符,则要使用jQuery.noConflict()释放jQuery对‘$’标识符的控制,把它(‘$’)让位给第一个实现它的库。
例如:
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script> <script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script> <script type="text/javascript"> $.noConflict(); //让渡$给第一个实现它的库。 jQuery("#div").hide(); //使用jQuery作为jQuery库的标识符 $("#div").hide(); // 使用另一个库的 $ 的代码 </script>
也可以使用第二种方法,即使用别名。 例如:
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script> <script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script> <script type="text/javascript"> var $j=$.noConflict(); //让渡$给第一个实现它的库。 $j("#div").hide(); //使用$j作为jQuery库的标识符 $("#div").hide(); // 使用另一个库的 $ 的代码 </script>
或者用第三种方法,即使用匿名函数 例如:
jQuery.noConflict(); (function($) { //匿名函数中用‘$’作为形参 $(function() { // 使用 $ 作为 jQuery 别名的代码 }); })(jQuery); //传入jQuery作为形参的值 ... // 其他用 $ 作为别名的库的代码
情况二:如果jQuery在其他库之前导入
方法:在这种情况下,不必使用jQuery.noConflict()方法让渡‘$’标识符。 例如:
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script> <script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script> <script type="text/javascript"> jQuery("#div").hide(); //使用jQuery作为jQuery库的标识符 $("#div").hide(); // 使用另一个库的 $ 的代码 </script>
那么这里有一个疑问:为什么jQuery在其他库之前导入不必使用jQuery.noConflict(),而在其他库之后导入则要使用jQuery.noConflict()?
此外,jQuery.noConflict()方法还可以带有一个boolean类型的参数。这个参数的作用是:完全将 jQuery 移到一个新的命名空间(Completely move jQuery to a new namespace in another object.)
这个参数主要是用于在同一页面需要导入不同版本的jQuery时使用的,即创建一个全新的空间指向jQuery。(这个不怎么明白。)
例如:
var dom = {}; dom.query = jQuery.noConflict(true); 结果: dom.query("div p").hide(); // 新 jQuery 的代码 $("content").style.display = "none"; // 另一个库 $() 的代码 jQuery("div > p").hide(); // 另一个版本 jQuery 的代码
总结:对于jQuery的JS库冲突,我只知道了如何去解决。而并不知道具体的细节原因,而且具体的技术知识还不清晰,因此在接下来要努力地去寻找解决的方法。对于jQuery中的库冲突,我还残留的问题有:
①为什么jQuery在其他库之前导入不必使用jQuery.noConflict(),而在其他库之后导入则要使用jQuery.noConflict()?
②关于解决在同一页面中引入不同版本的jQuery库,使用jQuery.noConflict(true)解决的细节?(如:库引入顺序是否会导致不同的解决方式?等)
③为什么在同一页面引入多个JS库会引起错误,具体的原因是什么?