同一页面中引入多个JS库产生的冲突解决方案(转)

　　发生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库会引起错误，具体的原因是什么？

转载于:https://www.cnblogs.com/JoannaQ/p/3387184.html

同一页面中引入多个JS库产生的冲突解决方案(转)

猜你喜欢