日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
兼容第三方框架jQuery多庫(kù)共存機(jī)制詳解

在Web項(xiàng)目開發(fā)中，經(jīng)常需要引用第三方JavaScript庫(kù)，如果第三方JavaScript庫(kù)與自已的JavaScript庫(kù)使用相同的全局變量，是一個(gè)比較麻煩的事。程序員多半可能會(huì)修改其中一方的JavaScript代碼。能不能有一個(gè)比較好的方法解決呢？讓我們看一下jQuery如何做到的。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供公主嶺企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為公主嶺眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

jQuery多庫(kù)共存機(jī)制指jQuery庫(kù)完全兼容第三方庫(kù)，例如jQuery中使用$做為函數(shù)入口,在該頁(yè)面同時(shí)引入另一個(gè)庫(kù),其中也使用了$做為函數(shù)名。因此jQuery與該庫(kù)發(fā)生沖突，例1：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.    New Document  
    5. 
  
  
  
  5.      
    6. 
  
  
  
  6.      
    7. 
  
  
  
  7.   
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.   
    10. 
  
  
  
  10.   
    11. 
  
  
  
  11.   
    12. 
  
  
  
  12.  
    13.

在如上示例中 第三方庫(kù)同時(shí)使用了"$"與"jQuery",此時(shí)jQuery入口被第三方庫(kù)覆蓋了。jQuery提供了noConflict函數(shù)解決沖突，例2:

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.    New Document  
    5. 
  
  
  
  5.      
    6. 
  
  
  
  6.   
    7. 
  
  
  
  7.      
    8. 
  
  
  
  8.   
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.   
    11. 
  
  
  
  11.   
    12. 
  
  
  
  12.   
    13. 
  
  
  
  13.  
    14.

noConflict重新將jQuery入口指針指向$1,此時(shí)可以用$1訪問jQuery庫(kù),其中兼容代碼要寫在第三方庫(kù)載入之前(如果寫在之后，jQuery的$和jQuery入口被第三方庫(kù)覆蓋了,無(wú)法調(diào)用兼容代碼)。

在實(shí)際應(yīng)用中，如果jQuery載入位置在第三方庫(kù)之后，jQuery會(huì)覆蓋第三方JavaScript庫(kù)么？如下代碼，例3:

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.    New Document  
    5. 
  
  
  
  5.      
    6. 
  
  
  
  6.        
    7. 
  
  
  
  7.   
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.   
    10. 
  
  
  
  10.   
    11. 
  
  
  
  11.   
    12. 
  
  
  
  12.  
    13.

此處jQuery加載完畢已經(jīng)將第三方庫(kù)覆蓋了。如果想調(diào)用第三方庫(kù)，似乎有點(diǎn)困難。當(dāng)然jQuery已經(jīng)提供了解決方法，例4:

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.    New Document  
    5. 
  
  
  
  5.      
    6. 
  
  
  
  6.        
    7. 
  
  
  
  7.   
    8. 
  
  
  
  8.   
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.   
    11. 
  
  
  
  11.   
    12. 
  
  
  
  12.   
    13. 
  
  
  
  13.  
    14.

例4中同樣在jQuery載入之后調(diào)用"兼容代碼",和例2兼容代碼相同,但意義上有差別.在例2中第三方庫(kù)覆蓋了jQuery,其中兼容代碼的作用在第三方庫(kù)覆蓋jQuery前，jQuery入口指針賦給"$1".在例4中與上相反,由于jquery庫(kù)在載入完成時(shí)，已經(jīng)將第三方庫(kù)覆蓋了,此時(shí)"$"指向jQuery庫(kù),兼容代碼作用是將"$"重新指向第三方庫(kù).同時(shí)充許重新定義jQuery入口.

jQuery兼容機(jī)制實(shí)現(xiàn)原理(示例代碼以jQuery-1.4.3為例)：

 
 
 
    
  
  
  
  1. //29-32行  
    2. 
  
  
  
  2. // Map over jQuery in case of overwrite  
    3. 
  
  
  
  3. _jQuery = window.jQuery,  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. // Map over the $ in case of overwrite  
    6. 
  
  
  
  6. _$ = window.$,  
    7. 
  
  
  
  7.    
    8. 
  
  
  
  8. //394-402行  
    9. 
  
  
  
  9.  noConflict: function( deep ) {  
    10. 
  
  
  
  10.   window.$ = _$;  
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.   if ( deep ) {  
    13. 
  
  
  
  13.    window.jQuery = _jQuery;  
    14. 
  
  
  
  14.   }  
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.   return jQuery;  
    17. 
  
  
  
  17.  }, 
    18.

其中29-32行，jQuery執(zhí)行前，將window.$,window.jQuery值保存到_$和_jQuery中(此時(shí)函數(shù)指針"jQuery","$"可能指向第三方庫(kù),此處為兼容處理做準(zhǔn)備)。

394-402行將jQuery和$重新賦給window.$,window.jQuery,同時(shí)返回jQuery函數(shù)指針.  不難看出調(diào)用noConflict函數(shù)后，被jQuery"占用"的$與"jQuery"又交還給第三方庫(kù)了。

【編輯推薦】

  1. jQuery的運(yùn)行機(jī)制和設(shè)計(jì)理念
  2. jQuery開發(fā)者：你真的需要一個(gè)插件嗎？
  3. jQuery讓開發(fā)者戀戀不舍的秘密
  4. jQuery最佳實(shí)踐：精妙的自定義事件
  5. jQuery應(yīng)用程序性能指標(biāo)和調(diào)優(yōu)

當(dāng)前文章：兼容第三方框架jQuery多庫(kù)共存機(jī)制詳解
鏈接地址：http://www.5511xx.com/article/cojcshh.html