亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

關(guān)于jQuery庫(kù)沖突的完美解決辦法

 更新時(shí)間：2017年05月20日 10:00:59   作者：starof  
在使用jQuery開(kāi)發(fā)的時(shí)候，可能還會(huì)使用到其他的JS庫(kù)，比如Prototype，但多庫(kù)共存時(shí)可能會(huì)發(fā)生沖突，下面這篇文章主要給大家介紹了關(guān)于jQuery庫(kù)沖突的完美解決辦法，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。

前言

一次面試中面試官問(wèn)到j(luò)Query和別的庫(kù)沖突怎么解決？雖然以前看過(guò)，但是我已經(jīng)不記得了。

我的思路就是如果讓我來(lái)設(shè)計(jì)，那我就用一個(gè)默認(rèn)值$，不傳參數(shù)，那就用$，最后就掛載在window.$上，傳參數(shù)就用傳入名字，比如傳入jq，那我就掛載在window.jq上。

var myControl="jq";
(function(name){
 var $=name ||"$"; //name存在$的值就是name的值，不存在或?yàn)閚ull，$的值為字符串"$"
 console.log($);
 window[$]=function(){
 alert("123");
 }
})(myControl)
window[myControl]();

事實(shí)上這肯定不是jquery解決沖突的辦法了。那就看看jQuery怎么解決沖突吧。

jQuery多個(gè)版本或和其他js庫(kù)沖突主要是常用的$符號(hào)的沖突。

一、沖突的解決

1、同一頁(yè)面jQuery多個(gè)版本沖突解決方法

<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($){
 //此時(shí)的$是jQuery-1.6.4
 $('#');
})(jq164);
</script>
 
<script>
jq142(function($){
 //此時(shí)的$是jQuery-1.4.2
 $('#');
});
</script>
 
</body>

2、jQuery庫(kù)在其他庫(kù)之后導(dǎo)入

jQuery noConflict() 方法會(huì)釋放會(huì) $ 標(biāo)識(shí)符的控制，這樣其他腳本就可以使用它了。

1、可以通過(guò)jQuery全名替代簡(jiǎn)寫(xiě)的方式來(lái)使用 jQuery

在其他庫(kù)和jQuery庫(kù)都加載完畢后，可以在任何時(shí)候調(diào)用jQuery.noConflict()函數(shù)來(lái)將變量$的控制權(quán)移交給其他JavaSript庫(kù)。然后就可以在程序里將jQuery()函數(shù)作為jQuery對(duì)象的制造工廠。

<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() );
 });
});
//此處不可以再寫(xiě)成$,此時(shí)的$代表prototype.js中定義的$符號(hào)。

$("pp").style.display = 'none'; //使用prototype
</script>

2、自定義一個(gè)快捷方式

noConflict() 可返回對(duì) jQuery 的引用，可以把它存入自定義名稱，例如jq,$J變量，以供稍后使用。

這樣可以確保jQuery不會(huì)與其他庫(kù)沖突，同時(shí)又使用自定義一個(gè)快捷方式。

<script type="text/javascript">
var $j = jQuery.noConflict(); //自定義一個(gè)比較短快捷方式
$j(function(){   //使用jQuery
 $j("p").click(function(){
 alert( $j(this).text() );
 });
});

$("pp").style.display = 'none'; //使用prototype
</script>

3、在不沖突的情況下仍然用$

如果想在jQuery 代碼塊使用 $ 簡(jiǎn)寫(xiě)，不愿意改變這個(gè)快捷方式，可以把 $ 符號(hào)作為變量傳遞給 ready 方法。這樣就可以在函數(shù)內(nèi)使用 $ 符號(hào)了 ， 而在函數(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語(yǔ)句塊，這應(yīng)該是最理想的方式，因?yàn)榭梢酝ㄟ^(guò)改變最少的代碼來(lái)實(shí)現(xiàn)全面的兼容性。

在我們自己寫(xiě)jquery插件時(shí),應(yīng)該都使用這種寫(xiě)法，因?yàn)槲覀儾恢谰唧w工作過(guò)程中是如何順序引入各種js庫(kù)的,而這種語(yǔ)句塊的寫(xiě)法卻能屏蔽沖突。

<script type="text/javascript">
jQuery.noConflict();  //將變量$的控制權(quán)讓渡給prototype.js
(function($){   //定義匿名函數(shù)并設(shè)置形參為$
 $(function(){   //匿名函數(shù)內(nèi)部的$均為jQuery
 $("p").click(function(){ //繼續(xù)使用 $ 方法
  alert($(this).text());
 });
 });
})(jQuery);    //執(zhí)行匿名函數(shù)且傳遞實(shí)參jQuery

$("pp").style.display = 'none'; //使用prototype
</script>

3、jQuery庫(kù)在其他庫(kù)之前導(dǎo)入

jQuery庫(kù)在其他庫(kù)之前導(dǎo)入，$的歸屬權(quán)默認(rèn)歸后面的JavaScript庫(kù)所有。那么可以直接使用"jQuery"來(lái)做一些jQuery的工作。

同時(shí)，可以使用$()方法作為其他庫(kù)的快捷方式。這里無(wú)須調(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 ,沒(méi)有必要調(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加載的時(shí)候，通過(guò)事先聲明的_jQuery變量獲取到當(dāng)前window.jQuery，通過(guò)_$獲取到當(dāng)前window.$。

通過(guò)jQuery.extend()把noConflict掛載到j(luò)Query下面。所以我們?cè)谡{(diào)用的時(shí)候都是jQuery.noConflict()這樣調(diào)。

在調(diào)用noConflict()時(shí)做了2個(gè)判斷，

第一個(gè)if，把$的控制權(quán)交出去。

第二個(gè)if，在noConflict()傳參的時(shí)候把，jQuery的控制權(quán)交出去。

最后noConflict()返回jQuery對(duì)象，用哪個(gè)參數(shù)接收，哪個(gè)參數(shù)將擁有jQuery的控制權(quán)。

2、 驗(yàn)證

//沖突 
 var $ = 123; //假設(shè)其他庫(kù)中$為123
 $(
   function () {
    console.log($); //報(bào)錯(cuò)Uncaught TypeError: $ is not a function
   }
 );

解決沖突

//解決沖突
 var jq = $.noConflict();
 var $ = 123;
 jq(function () {
  alert($); //123
 });

釋放$控制權(quán)例子

<script>
 var $ = 123; // window.$是123，存儲(chǔ)在私有的_$上。

</script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
<div>aaa</div>
<script>
 var jq = $.noConflict();//當(dāng)window.$===jQuery的時(shí)候，把_$賦給了window.$。
 jq(function () {
  alert($); //123
 });
</script>

釋放jQuery控制權(quán)例子

參數(shù)deep的作用：deep用來(lái)放棄jQuery對(duì)外的接口。

 如下，noConflict()不寫(xiě)參數(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>


如果寫(xiě)個(gè)參數(shù)true，會(huì)彈出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); //寫(xiě)了true或者參數(shù)的時(shí)候，deep為真window.jQuery===jQuery為真，所以進(jìn)入if條件。把456賦值給window.jQuery
 jq(function () {
  alert(jQuery); //456
 });
</script>

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論