解決jQuery和其他庫的衝突
阿新 • • 發佈：2018-12-29
在jQuery庫中，幾乎所有的外掛都被限制在它的名稱空間裡。通常，全域性物件都被很好地儲存在jQuery名稱空間裡，因此當把jQuery和其他JavaScript庫(例如Prototype、MooTools或Zepto)一起使用時，不會引起衝突。
注意：預設情況下，jQuery用$作為自身的快捷方式。
在jQuery中，使用jQuery或者$來做選擇符，是等價的。
比如：
$('#title') 和 jQuery('#title')是一個意思。
但如果我們還使用了其他JavaScript庫也是以$作為快捷方式，這個時候的$代表什麼意思呢？如何解決呢。
1.jQuery庫在其他庫之前匯入
jQuery庫在其他庫之前匯入，$的歸屬權預設歸後面的JavaScript庫所有。那麼可以直接使用”jQuery”來做一些jQuery的工作。同時，可以使用$()方法作為其他庫的快捷方式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
2.jQuery庫在其他庫之後匯入
jQuery庫在其他庫之後匯入，$的歸屬權預設歸後面的jQuery所有。在其他庫和jQuery庫都被載入完畢後，可以在任何時候呼叫jQuery.noConflict()函式來將變數$的控制權移交給其他JavaScript庫。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>衝突解決1</title>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(將被隱藏)</p>
<p >Test-jQuery(將被繫結單擊事件)</p>
<script type="text/javascript">
jQuery.noConflict(); //將變數$的控制權讓渡給prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype.js隱藏元素
</script>
</body>
</html>或者使用jQuery.noConflict()函式為jQuery另起一個快捷方式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>衝突解決2</title>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(將被隱藏)</p>
<p >Test-jQuery(將被繫結單擊事件)</p>
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定義一個比較短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype.js隱藏元素
</script>
</body>
</html>還有一種方式就是將$交給prototype，然後使用匿名函式的閉包，jQuery作為閉包的引數，在閉包中使用$來接收引數，那麼在閉包中也可以使用$來作為jQuery的快捷方式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>衝突解決4</title>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(將被隱藏)</p>
<p >Test-jQuery(將被繫結單擊事件)</p>
<script type="text/javascript">
jQuery.noConflict(); //將變數$的控制權讓渡給prototype.js
(function($){ //定義匿名函式並設定形參為$
$(function(){ //匿名函式內部的$均為jQuery
$("p").click(function(){ //繼續使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //執行匿名函式且傳遞實參jQuery
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>寫在最後：約定優於配置——-軟體開發的簡約原則.
——————————–(完)————————————–
更多學習資源請關注我的新浪微博….