發生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庫會引起錯誤，具體的原因是什么？

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的同一页面中引入多个JS库产生的冲突解决方案(转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。