這次帶給大家jQuery庫衝擊時使用詳解，jQuery庫衝擊時使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
前言
一次面試中面試官問到jQuery和別的函式庫衝突怎麼解決？雖然以前看過，但我已經不記得了。
我的想法就是如果讓我來設計，那我就用一個預設值$，不傳參數，那就用$，最後就掛載在window.$上，傳參數就用傳入名字，像是傳入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函式庫都載入完畢後，可以在任何時候呼叫jQuery.noConflict() 函數來將變數$的控制權移交給其他JavaSript函式庫。然後就可以在程式裡將jQuery()函數當作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(); //将变量$的控制权让渡给prototype.js，全名可以不调用。
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方法。這樣就可以在函數內使用 $ 符號了 ， 而在函數外，依舊不得不使用 "jQuery"。
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(document).ready(function($){
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
//或者如下
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
</script>或使用IEF語句區塊，這應該是最理想的方式，因為可以透過改變最少的程式碼來實現全面的兼容性。
在我們自己寫jquery外掛時,應該都使用這種寫法，因為我們不知道具體工作過程中是如何順序引入各種js庫的,而這種語句塊的寫法卻能屏蔽衝突。
<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>3、jQuery函式庫在其他函式庫之前導入
#jQuery函式庫在其他函式庫之前導入，$的歸屬權預設歸後面的JavaScript函式庫所有。那麼可以直接使用"jQuery"來做一些jQuery的工作。
同時，可以使用$()方法作為其他函式庫的捷徑。這裡無須呼叫jQuery.noConflict()函數。
<!-- 引入 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 ,没有必要调用"jQuery.noConflict()"函数。
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下面。所以我們在呼叫的時候都是jQuery.noConflict()這樣調。
在呼叫noConflict()時做了2個判斷，
第一個if，把$的控制權交出去。
第二個if，在noConflict()傳參的時候把，jQuery的控制權交出去。
最後noConflict()返回jQuery對象，用哪個參數接收，哪個參數將擁有jQuery的控制權。
2、驗證
//冲突
var $ = 123; //假设其他库中$为123
$(
function () {
console.log($); //报错Uncaught TypeError: $ is not a function
}
);解決衝突
//解决冲突
var jq = $.noConflict();
var $ = 123;
jq(function () {
alert($); //123
});釋放$控制權範例
<script>
var $ = 123; // window.$是123，存储在私有的_$上。
</script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
<p>aaa</p>
<script>
var jq = $.noConflict();//当window.$===jQuery的时候，把_$赋给了window.$。
jq(function () {
alert($); //123
});
</script>釋放jQuery控制權範例
參數deep的作用：deep用來放棄jQuery對外的介面。
如下，noConflict()不寫參數，彈出jQuery為建構子。
<script>
var $ = 123;
var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<p>aaa</p>
<script>
var jq = $.noConflict();
jq(function () {
alert(jQuery); //构造函数
});
</script>
如果写个参数true，会弹出456。
<script>
var $ = 123;
var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<p>aaa</p>
<script>
var jq = $.noConflict(true); //写了true或者参数的时候，deep为真window.jQuery===jQuery为真，所以进入if条件。把456赋值给window.jQuery
jq(function () {
alert(jQuery); //456
});
</script>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是jQuery庫衝擊時使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
