旷世神医,完美的世界 1993 电影

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

兼容第三方框架jQuery多庫(kù)共存機(jī)制詳解

在Web項(xiàng)目開(kāi)發(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：

 
 
 
  
  
   
  
  
   
  
  
    
  
  
     New Document

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

 
 
 
  
  
   
  
  
   
  
  
    
  
  
     New Document

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

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

 
 
 
  
  
   
  
  
   
  
  
    
  
  
     New Document

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

 
 
 
  
  
   
  
  
   
  
  
    
  
  
     New Document

例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為例)：

 
 
 
  
  
  //29-32行  
  
  
  // Map over jQuery in case of overwrite  
  
  
  _jQuery = window.jQuery,  
  
  
   
  
  
  // Map over the $ in case of overwrite  
  
  
  _$ = window.$,  
  
  
     
  
  
  //394-402行  
  
  
   noConflict: function( deep ) {  
  
  
    window.$ = _$;  
  
  
   
  
  
    if ( deep ) {  
  
  
     window.jQuery = _jQuery;  
  
  
    }  
  
  
   
  
  
    return jQuery;  
  
  
   },

其中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ù)了。

【編輯推薦】

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

網(wǎng)站標(biāo)題：兼容第三方框架jQuery多庫(kù)共存機(jī)制詳解
文章來(lái)源：http://fisionsoft.com.cn/article/cojcshh.html

新聞中心

其他資訊