99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

jQuery庫沖突解決辦法

發(fā)布時(shí)間：2017-05-22 12:26  回復(fù):0  查看:2597   最后回復(fù)：2017-05-22 12:26  
jQuery 和別的庫沖突怎么解決？本文就和大家一起來詳細(xì)扒一扒這個(gè)問題，一起來看看吧，希望對(duì)大家 學(xué)習(xí)jquery有所幫助。
　　我的思路就是如果讓我來設(shè)計(jì)，那我就用一個(gè)默認(rèn)值$ ，不傳參數(shù)，那就用 $ ，最后就掛載在 window.$ 上，傳參數(shù)就用傳入名字，比如傳入 jq ，那我就掛載在 window.jq 上。
　　 var myControl="jq";
　　( function(name){
　　 var $=name ||"$"; //name 存在 $ 的值就是 name 的值，不存在或?yàn)?/span> null ， $ 的值為字符串 "$"
　　console.log($);
　　window[$]= function(){
　　alert("123");
　　}
　　})(myControl)window[myControl]();
　　事實(shí)上這肯定不是jquery 解決沖突的辦法了。那就看看 jQuery 怎么解決沖突吧。
　　jQuery  多個(gè)版本  或  和其他js庫  沖突主要是常用的$ 符號(hào)的沖突。
　　 一、沖突的解決
　　 1、同一頁面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庫在其他庫之后導(dǎo)入
　　jQuery noConflict()  方法會(huì)釋放會(huì)  $  標(biāo)識(shí)符的控制，這樣其他腳本就可以使用它了。
　　 1、可以通過jQuery全名替代簡(jiǎn)寫的方式來使用 jQuery
　　在其他庫和jQuery 庫都加載完畢后，可以在任何時(shí)候調(diào)用 jQuery.noConflict() 函數(shù)來將變量 $ 的控制權(quán)移交給其他 JavaSript 庫。然后就可以在程序里將 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() );
    });
});
// 此處不可以再寫成 $, 此時(shí)的 $ 代表 prototype.js 中定義的 $ 符號(hào)。
$("pp").style.display = 'none';        // 使用 prototype
</script>
　　 2、自定義一個(gè)快捷方式
　　noConflict()  可 返回對(duì)  jQuery  的引用 ，可以把它存入自定義名稱，例如 jq,$J 變量，以供稍后使用。
　　這樣可以確保jQuery 不會(huì)與其他庫沖突，同時(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)寫，不愿意改變這個(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īng)該是最理想的方式，因?yàn)榭梢酝ㄟ^改變最少的代碼來實(shí)現(xiàn)全面的兼容性。
　　在我們自己寫jquery 插件時(shí) , 應(yīng)該都使用這種寫法，因?yàn)槲覀儾恢谰唧w工作過程中是如何順序引入各種 js 庫的 , 而這種語句塊的寫法卻能屏蔽沖突。
　<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庫在其他庫之前導(dǎo)入
　　jQuery 庫在其他庫之前導(dǎo)入， $ 的歸屬權(quán)默認(rèn)歸后面的 JavaScript 庫所有。那么可以直接使用 "jQuery" 來做一些 jQuery 的工作。
　　同時(shí)，可以使用$() 方法作為其他庫的快捷方式。這里無須調(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 加載的時(shí)候，通過事先聲明的 _jQuery 變量獲取到當(dāng)前 window.jQuery ，通過 _$ 獲取到當(dāng)前 window.$ 。
　　通過jQuery.extend() 把 noConflict 掛載到 jQuery 下面。所以我們?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è)其他庫中 $ 為 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 用來放棄 jQuery 對(duì)外的接口。
　　如下，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>
file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps7521.tmp.jpg
　　如果寫個(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); // 寫了 true 或者參數(shù)的時(shí)候， deep 為真 window.jQuery===jQuery 為真，所以進(jìn)入 if 條件。把 456 賦值給 window.jQuery
    jq(function () {
        alert(jQuery); //456
    });
</script>
來源： 博客園
您還未登錄，請(qǐng)先登錄

熱門帖子

最新帖子

?