三分鐘帶你玩轉(zhuǎn)jQuery.noConflict()
jQuery是目前使用最廣泛的前端框架之一,有大量的第三方庫(kù)和插件基于它開(kāi)發(fā)。為了避免全局命名空間污染,jQuery提供了jQuery.noConflict()方法解決變量沖突。這個(gè)方法,毫無(wú)疑問(wèn),非常有效。遺憾的是,jQuery的官方文檔對(duì)該方法的描述不夠清晰,許多開(kāi)發(fā)者并不清楚當(dāng)他們調(diào)用jQuery.noConflict()時(shí),究竟發(fā)生了什么,從而導(dǎo)致在使用時(shí)出現(xiàn)了許多問(wèn)題。盡管如此,jQuery.noConflict()背后實(shí)現(xiàn)原理依然值得Web開(kāi)發(fā)者學(xué)習(xí)掌握,成為解決類(lèi)似全局命名空間污染問(wèn)題的利器。
jQuery.noConflict()的作用?
jQuery.noConflict()的存在只有一個(gè)目的:它允許你在同一個(gè)頁(yè)面加載多個(gè)jQuery實(shí)例,尤其是不同版本的jQuery。你可能會(huì)覺(jué)得奇怪,為什么要在一個(gè)頁(yè)面加載/使用多個(gè)不同版本的jQuery對(duì)象呢?一般而言,有兩種情況。第一種情況,你的業(yè)務(wù)代碼采用了最新版的jQuery庫(kù),而你選用的第三方插件依賴(lài)的更早版本的jQuery庫(kù);第二種情況,你正維護(hù)著一個(gè)系統(tǒng),它已有的業(yè)務(wù)代碼由于各種原因,引用了較老版本的jQuery庫(kù),你新開(kāi)發(fā)的模塊采用的是其他版本的jQuery庫(kù)。不論哪種情況,你都不得不面對(duì),jQuery對(duì)象/方法沖突的問(wèn)題。幸運(yùn)的是,jQuery.noConflict()幫你解決了這個(gè)煩惱。
jQuery被加載時(shí)發(fā)生了什么?
當(dāng)jQuery被頁(yè)面引用/加載時(shí),它被封裝在一個(gè)自執(zhí)行函數(shù)(匿名函數(shù))里,它提供的所有一切變量、函數(shù)、對(duì)象都在匿名函數(shù)內(nèi)部的可執(zhí)行環(huán)境內(nèi),外部環(huán)境無(wú)法調(diào)用,以防止全局命名空間污染。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
jQuery在匿名函數(shù)內(nèi)部定義了兩個(gè)全局對(duì)象:jQuery和$,把自己暴露給外部環(huán)境。開(kāi)發(fā)者習(xí)慣使用的各種公共方法都是通過(guò)這兩個(gè)對(duì)象進(jìn)行訪問(wèn)的,如jQuery.ajax(),jQuery.css()等。在最初,它們指向匿名函數(shù)內(nèi)部的同一個(gè)對(duì)象jQuery(私有變量),通過(guò)它訪問(wèn)匿名函數(shù)內(nèi)部的私有變量和函數(shù)。這使得匿名函數(shù)在自執(zhí)行后其內(nèi)部的私有變量和函數(shù)仍然進(jìn)駐在內(nèi)存里,不會(huì)被javascript的垃圾回收機(jī)制清除。
window.jQuery = window.$ = jQuery;
當(dāng)jQuery被頁(yè)面加載后,當(dāng)前頁(yè)面有可能已經(jīng)存在了jQuery和$這兩個(gè)全局變量(比如,加載了其它的第三方庫(kù),其內(nèi)部也定義了它倆),這就會(huì)導(dǎo)致已經(jīng)存在的對(duì)象被覆蓋(全局命名空間污染)。為了解決這個(gè)問(wèn)題,jQuery在內(nèi)部先將已經(jīng)存在的全局變量緩存起來(lái),保存在私有變量_jQuery和_$中,供后續(xù)調(diào)用。所以,如果頁(yè)面在加載jQuery庫(kù)時(shí),還不存在jQuery和$對(duì)象,那么_jQuery和_$都是undefined;否則,它們都會(huì)保存對(duì)已有jQuery和$的引用(也許來(lái)自之前引用的第三方庫(kù)或是不同版本的jQuery庫(kù))。之后,jQuery會(huì)像上文說(shuō)描述的那樣,覆蓋這兩個(gè)全局變量并將自己暴露給外部環(huán)境。至此,頁(yè)面上的全局變量jQuery和$已經(jīng)指向剛剛引入的jQuery庫(kù)。
// Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$, // Otherwise expose jQuery to the global object as usual window.jQuery = window.$ = jQuery;
jQuery.noConflict()的神奇效果?
假設(shè)你維護(hù)的系統(tǒng)已經(jīng)引用了1.7.0版本的jQuery庫(kù),而你在新添加的功能里引用了1.10.2版本的jQuery庫(kù)。那么,還有辦法重新使用jQuery 1.7.0 或是同時(shí)使用兩個(gè)版本的jQuery庫(kù)嗎?答案是肯定,那就是jQuery.noConflict()。實(shí)際上,利用jQuery.noConflict(),你可以立刻把全局變量jQuery和$重新指向之前引用的對(duì)象。很神奇吧?這就是為什么jQuery在對(duì)外暴露自己前內(nèi)部緩存了之前引用的對(duì)象。
jQuery.noConflict()接受一個(gè)可選的布爾值參數(shù),通常默認(rèn)值是false。這個(gè)參數(shù)會(huì)帶來(lái)什么影響呢?其實(shí),很簡(jiǎn)單。如果調(diào)用jQuery.noConflict()或是jQuery.noConflict(false),只有全局變量$會(huì)被重置恢復(fù)成之前的引用值;如果調(diào)用jQuery.noConflict()或是jQuery.noConflict(true),那么全局變量jQuery和$都會(huì)被重置恢復(fù)成之前的引用值。這一點(diǎn)非常重要,建議牢記。當(dāng)你調(diào)用jQuery.noConflict(false/true)之后,它會(huì)返回當(dāng)前jQuery的實(shí)例,利用這個(gè)特性我們可以實(shí)現(xiàn)jQuery的重命名。
// "Renaming" jQuery var jayquery = jQuery.noConflict( true ); // Now we can call things like jayquery.ajax(), jayquery.css(), and so on
我們?cè)賮?lái)看一個(gè)代碼片段,測(cè)試一下是否真正理解了神奇的noConflict()
<!-- jQuery and $ are undefined --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- jQuery and $ now point to jQuery 1.10.2 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"> <!-- jQuery and $ now point to jQuery 1.7.0 --> <script>jQuery.noConflict();</script> <!-- jQuery still points to jQuery 1.7.0; $ now points to jQuery 1.10.2 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> <!-- jQuery and $ now point to jQuery 1.6.4 --> <script>var jquery164 = jQuery.noConflict( true );</script> <!-- jQuery now points to jQuery 1.7.0; $ now points to jQuery 1.10.2; jquery164 points to jQuery 1.6.4 -->
避免第三方庫(kù)的沖突
以上的代碼片段展示了如何解決多版本jQuery的沖突。接下來(lái),我們嘗試解決jQuery庫(kù)和第三方庫(kù)的沖突,下面出現(xiàn)的代碼片段在jQuery的官方文檔中都有,有興趣的程序猿可以仔細(xì)閱讀官方文檔體會(huì)其中的區(qū)別。
直接使用No-Conflict模式
使用No-Conflict模式,其實(shí)就是對(duì)jQuery進(jìn)行重命名,再調(diào)用。
<!-- 采用no-conflict模式,jquery.js在prototype.js之后被引入. --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $j = jQuery.noConflict(); // $j 引用了jQuery對(duì)象本身. $j(document).ready(function() { $j( "div" ).hide(); }); // $ 被重新指向prototype.js里定義的對(duì)象 // document.getElementById(). mainDiv below is a DOM element, not a jQuery object. window.onload = function() { var mainDiv = $( "main" ); } </script>
使用自執(zhí)行函數(shù)封裝
使用這種方式,你可以在匿名函數(shù)內(nèi)部繼續(xù)使用標(biāo)準(zhǔn)的$對(duì)象,這也是眾多jQuery插件采用的方法。需要注意的是,使用這種方法,函數(shù)內(nèi)部無(wú)法再使用prototype.js定義的$對(duì)象了。
<!-- jquery.js在prototype.js之后被引入. --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); (function( $ ) { // Your jQuery code here, using the $ })( jQuery ); </script>
使用標(biāo)準(zhǔn)jQuery(document).ready()函數(shù)
如果jQuery庫(kù)在其它庫(kù)之前引入,那么jQuery內(nèi)部定義的jQuery和$會(huì)被第三方庫(kù)覆蓋,這時(shí)候再使用noConflict()已經(jīng)沒(méi)有什么意義了。解決的方法很簡(jiǎn)單,直接使用jQuery的標(biāo)準(zhǔn)調(diào)用方式。
<!-- jquery.js在prototype.js之前被引入. --> <script src="jquery.js"></script> <script src="prototype.js"></script> <script> // Use full jQuery function name to reference jQuery. jQuery( document ).ready(function() { jQuery( "div" ).hide(); }); // 或者 jQuery(function($){ // Your jQuery code here, using the $ }); // Use the $ variable as defined in prototype.js window.onload = function() { var mainDiv = $( "main" ); }; </script>
下面給大家介紹jQuery noConflict() 方法
noConflict() 方法會(huì)釋放會(huì) $ 標(biāo)識(shí)符的控制,這樣其他腳本就可以使用它了。
實(shí)例
當(dāng)然,您仍然可以通過(guò)全名替代簡(jiǎn)寫(xiě)的方式來(lái)使用 jQuery:
$.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍在運(yùn)行!"); }); });
實(shí)例
您也可以創(chuàng)建自己的簡(jiǎn)寫(xiě)。noConflict() 可返回對(duì) jQuery 的引用,您可以把它存入變量,以供稍后使用。請(qǐng)看這個(gè)例子:
var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍在運(yùn)行!"); }); });
實(shí)例
如果你的 jQuery 代碼塊使用 $ 簡(jiǎn)寫(xiě),并且您不愿意改變這個(gè)快捷方式,那么您可以把 $ 符號(hào)作為變量傳遞給 ready 方法。這樣就可以在函數(shù)內(nèi)使用 $ 符號(hào)了 - 而在函數(shù)外,依舊不得不使用 "jQuery":
$.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍在運(yùn)行!"); }); });
- 解決 INSTALL FAILED CONFLICTING PROVIDER的問(wèn)題方法
- Android 出現(xiàn)問(wèn)題Installation error: INSTALL_FAILED_CONFLICTING_PROVIDER解決辦法
- 輕松搞定jQuery.noConflict()
- jQuery中noConflict()用法實(shí)例分析
- jQuery中noconflict函數(shù)的實(shí)現(xiàn)原理分解
- jquery插件沖突(jquery.noconflict)解決方法分享
- jQuery中 noConflict() 方法使用
- Git工具 conflict沖突問(wèn)題解決方案
相關(guān)文章
使用jquery與圖片美化checkbox和radio控件的代碼(打包下載)
用jquery實(shí)現(xiàn)的對(duì)checkbox和radio控件的美化,非常不錯(cuò),大家可以通過(guò)修改圖片來(lái)實(shí)現(xiàn)更漂亮的效果。2010-11-11使用jQuery在對(duì)象中緩存選擇器的簡(jiǎn)單方法
這篇文章主要介紹了使用jQuery在對(duì)象中緩存選擇器的簡(jiǎn)單方法,jQuery是最知名的JavaScript庫(kù),需要的朋友可以參考下2015-06-06js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
jquery中獲取當(dāng)前鼠標(biāo)的x、y位置位置的代碼,需要的朋友可以參考下。2011-05-05ui組件之input多選下拉實(shí)現(xiàn)方法(帶有搜索功能)
這篇文章主要介紹了ui組件之input多選下拉實(shí)現(xiàn)方法(帶有搜索功能)的相關(guān)資料,需要的朋友可以參考下2016-07-07JQuery 改變頁(yè)面字體大小的實(shí)現(xiàn)代碼(實(shí)時(shí)改變網(wǎng)頁(yè)字體大小)
分別定義三個(gè)class為increaseFont、decreaseFont、resetFont 的元素。為其click事件添加事件2012-03-03jquery 學(xué)習(xí)之二 屬性相關(guān)
jquery 學(xué)習(xí)之二 屬性相關(guān)資料,學(xué)習(xí)jquery的朋友可以參考下。2010-11-11jQuery實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)導(dǎo)航代碼(移動(dòng)端)
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)導(dǎo)航代碼,適合用于移動(dòng)端。需要的朋友可以參考下2017-05-05