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