關于jQuery庫沖突的完美解決辦法
前言
一次面試中面試官問到jQuery和別的庫沖突怎么解決？雖然以前看過，但是我已經(jīng)不記得了。
我的思路就是如果讓我來設計，那我就用一個默認值$，不傳參數(shù)，那就用$，最后就掛載在window.$上，傳參數(shù)就用傳入名字，比如傳入jq，那我就掛載在window.jq上。
var myControl="jq";
(function(name){
var $=name ||"$"; //name存在$的值就是name的值，不存在或為null，$的值為字符串"$"
console.log($);
window[$]=function(){
alert("123");
}
})(myControl)
window[myControl]();
事實上這肯定不是jquery解決沖突的辦法了。那就看看jQuery怎么解決沖突吧。
jQuery多個版本或和其他js庫沖突主要是常用的$符號的沖突。
一、沖突的解決
1、同一頁面jQuery多個版本沖突解決方法
<body>
<!-- 引入1.6.4版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script> var jq164 = jQuery.noConflict(true); </script>
<!-- 引入1.4.2版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script> var jq142 = jQuery.noConflict(true); </script>
<script>
(function($){
//此時的$是jQuery-1.6.4
$('#');
})(jq164);
</script>
<script>
jq142(function($){
//此時的$是jQuery-1.4.2
$('#');
});
</script>
</body>
2、jQuery庫在其他庫之后導入
jQuery noConflict() 方法會釋放會 $ 標識符的控制，這樣其他腳本就可以使用它了。
1、可以通過jQuery全名替代簡寫的方式來使用 jQuery
在其他庫和jQuery庫都加載完畢后，可以在任何時候調(diào)用jQuery.noConflict()函數(shù)來將變量$的控制權(quán)移交給其他JavaSript庫。然后就可以在程序里將jQuery()函數(shù)作為jQuery對象的制造工廠。
<script src="prototype.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<p id="pp">test---prototype</p>
<p>test---jQuery</p>
<script type="text/javascript">
jQuery.noConflict(); //將變量$的控制權(quán)讓渡給prototype.js，全名可以不調(diào)用。
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
//此處不可以再寫成$,此時的$代表prototype.js中定義的$符號。
$("pp").style.display = 'none'; //使用prototype
</script>
2、自定義一個快捷方式
noConflict() 可返回對 jQuery 的引用，可以把它存入自定義名稱，例如jq,$J變量，以供稍后使用。
這樣可以確保jQuery不會與其他庫沖突，同時又使用自定義一個快捷方式。
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定義一個比較短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
3、在不沖突的情況下仍然用$
如果想在jQuery 代碼塊使用 $ 簡寫，不愿意改變這個快捷方式，可以把 $ 符號作為變量傳遞給 ready 方法。這樣就可以在函數(shù)內(nèi)使用 $ 符號了 ， 而在函數(shù)外，依舊不得不使用 "jQuery"。
<script type="text/javascript">
jQuery.noConflict(); //將變量$的控制權(quán)讓渡給prototype.js
jQuery(document).ready(function($){
$("p").click(function(){ //繼續(xù)使用 $ 方法
alert( $(this).text() );
});
});
//或者如下
jQuery(function($){ //使用jQuery
$("p").click(function(){ //繼續(xù)使用 $ 方法
alert( $(this).text() );
});
});
</script>
或者使用IEF語句塊，這應該是最理想的方式，因為可以通過改變最少的代碼來實現(xiàn)全面的兼容性。
在我們自己寫jquery插件時,應該都使用這種寫法，因為我們不知道具體工作過程中是如何順序引入各種js庫的,而這種語句塊的寫法卻能屏蔽沖突。
<script type="text/javascript">
jQuery.noConflict(); //將變量$的控制權(quán)讓渡給prototype.js
(function($){ //定義匿名函數(shù)并設置形參為$
$(function(){ //匿名函數(shù)內(nèi)部的$均為jQuery
$("p").click(function(){ //繼續(xù)使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //執(zhí)行匿名函數(shù)且傳遞實參jQuery
$("pp").style.display = 'none'; //使用prototype
</script>
3、jQuery庫在其他庫之前導入
jQuery庫在其他庫之前導入，$的歸屬權(quán)默認歸后面的JavaScript庫所有。那么可以直接使用"jQuery"來做一些jQuery的工作。
同時，可以使用$()方法作為其他庫的快捷方式。這里無須調(diào)用jQuery.noConflict()函數(shù)。
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<body>
<p id="pp">Test-prototype(將被隱藏)</p>
<p >Test-jQuery(將被綁定單擊事件)</p>
<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,沒有必要調(diào)用"jQuery.noConflict()"函數(shù)。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
二、原理
1、源碼
源碼：看一下源碼里怎么做到的
var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery.extend({
noConflict: function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
}
});
在jQuery加載的時候，通過事先聲明的_jQuery變量獲取到當前window.jQuery，通過_$獲取到當前window.$。
通過jQuery.extend()把noConflict掛載到jQuery下面。所以我們在調(diào)用的時候都是jQuery.noConflict()這樣調(diào)。
在調(diào)用noConflict()時做了2個判斷，
第一個if，把$的控制權(quán)交出去。
第二個if，在noConflict()傳參的時候把，jQuery的控制權(quán)交出去。
最后noConflict()返回jQuery對象，用哪個參數(shù)接收，哪個參數(shù)將擁有jQuery的控制權(quán)。
2、 驗證
//沖突
var $ = 123; //假設其他庫中$為123
$(
function () {
console.log($); //報錯Uncaught TypeError: $ is not a function
}
);
解決沖突
//解決沖突
var jq = $.noConflict();
var $ = 123;
jq(function () {
alert($); //123
});
釋放$控制權(quán)例子
<script>
var $ = 123; // window.$是123，存儲在私有的_$上。
</script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
<div>aaa</div>
<script>
var jq = $.noConflict();//當window.$===jQuery的時候，把_$賦給了window.$。
jq(function () {
alert($); //123
});
</script>
釋放jQuery控制權(quán)例子
參數(shù)deep的作用：deep用來放棄jQuery對外的接口。
如下，noConflict()不寫參數(shù)，彈出jQuery為構(gòu)造函數(shù)。
<script>
var $ = 123;
var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<div>aaa</div>
<script>
var jq = $.noConflict();
jq(function () {
alert(jQuery); //構(gòu)造函數(shù)
});
</script>
如果寫個參數(shù)true，會彈出456。
<script>
var $ = 123;
var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<div>aaa</div>
<script>
var jq = $.noConflict(true); //寫了true或者參數(shù)的時候，deep為真window.jQuery===jQuery為真，所以進入if條件。把456賦值給window.jQuery
jq(function () {
alert(jQuery); //456
});
</script>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
jQuery的promise與deferred對象在異步回調(diào)中的作用
這篇文章主要介紹了jQuery的promise與deferred對象在異步回調(diào)中的作用,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jQuery實現(xiàn)標題有打字效果的焦點圖代碼,可實現(xiàn)幻燈片切換顯示時標題同步逐個打印顯示的效果,涉及jQuery操作json格式數(shù)據(jù)及時間函數(shù)的相關技巧,需要的朋友可以參考下2015-11-11
利用jQuery插件擴展識別瀏覽器內(nèi)核與外殼的類型和版本的實現(xiàn)代碼
在平時的B/S開發(fā)中，經(jīng)常需要知道瀏覽器的內(nèi)核類型和版本，甚至，有時還需要知道瀏覽器的外殼類型和版本2011-10-10
這篇文章主要介紹了jquery實現(xiàn)的簡單輪播圖功能,涉及jQuery基于定時器的事件響應與頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
基于jquery的loading效果實現(xiàn)代碼，需要的朋友可以參考下。2010-11-11
淺析onsubmit校驗表單時利用ajax的return false無效問題
前幾天，在校驗一個表單數(shù)據(jù)用到ajax時，遇到 return false 無效問題,以下就是對這個問題進行了分析介紹，需要的朋友可以參考下2013-07-07
從最開始看到Jquery這樣的選擇器就讓我想起了CSS的選擇器，簡直是同出一轍啊，CSS的選擇器語法個人覺得相當?shù)慕?jīng)典，那么Jquery借鑒CSS也就沒有多少疑問了。2009-10-10
jquery?validation驗證電話號碼,email(實例代碼)
jquery?validation驗證電話號碼,email(實例代碼),需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11
這篇文章主要為大家介紹了Jquery中巧用Ajax的beforeSend方法，beforeSend方法用于在向服務器發(fā)送請求前添加一些處理函數(shù),需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細介紹了jquery實現(xiàn)呼吸輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10