jQuery1.2 在core模塊新增了兩個(gè)靜態(tài)方法， data與removeData。data不用說(shuō)，與jQuery其他方法一樣，讀寫結(jié)合。jQuery的緩存系統(tǒng)是把所有數(shù)據(jù)都放$.cache之上，然后為每個(gè)要使用緩存系統(tǒng)的元素節(jié)點(diǎn)，文檔對(duì)象與window對(duì)象分配一個(gè)UUID。UUID的屬性名為一個(gè)隨機(jī)的自定義屬性，"jQuery" + (new Date()).getTime()， 值為整數(shù)，從零遞增。但UUID總要附于一個(gè)對(duì)象上，如果那個(gè)對(duì)象是window，豈不是全局污染嗎，因此jQuery內(nèi)部判定它是window對(duì)象時(shí)，映射為一個(gè)叫windowData的空對(duì)象，然后UUID加在它之上。有了UUID，我們?cè)谑状卧L問(wèn)緩存系統(tǒng)時(shí)，會(huì)在$.cache對(duì)象開(kāi)辟一個(gè)空對(duì)象（緩存體），用于放置與目標(biāo)對(duì)象有關(guān)的東西。這有點(diǎn)像銀行開(kāi)戶了，UUID的值就是存折。removeData則會(huì)刪掉不再需要保存數(shù)據(jù)，如果到最后，數(shù)據(jù)刪清光了，它也沒(méi)有任何鍵值對(duì)，成為空對(duì)象，jQuery就會(huì)從$.cache中刪掉此對(duì)象，并從目標(biāo)對(duì)象移除UUID。

//jQuery1.2.3 
var expando = "jQuery" + (new Date()).getTime(), uuid = 0, windowData = {}; 
jQuery.extend({ 
    cache: {}, 
    data: function( elem, name, data ) { 
        elem = elem == window ? windowData :   elem;//對(duì)window對(duì)象做特別處理 
        var id = elem[ expando ]; 
        if ( !id ) //如果沒(méi)有UUID則新設(shè)一個(gè) 
            id = elem[ expando ] = ++uuid; 
        //如果沒(méi)有在$.cache中開(kāi)戶，則先開(kāi)戶 
        if ( name && !jQuery.cache[ id ] ) 
            jQuery.cache[ id ] = {}; 
  
        // 第三個(gè)參數(shù)不為undefined時(shí)，為寫操作 
        if ( data != undefined ) 
            jQuery.cache[ id ][ name ] = data; 
        //如果只有一個(gè)參數(shù)，則返回緩存對(duì)象，兩個(gè)參數(shù)則返回目標(biāo)數(shù)據(jù) 
        return name ?  jQuery.cache[ id ][ name ] :   id; 
    }, 
  
    removeData: function( elem, name ) { 
        elem = elem == window ? windowData :   elem; 
        var id = elem[ expando ]; 
        if ( name ) {//移除目標(biāo)數(shù)據(jù) 
            if ( jQuery.cache[ id ] ) { 
                delete jQuery.cache[ id ][ name ]; 
                name = ""; 
  
                for ( name in jQuery.cache[ id ] ) 
                    break; 
                //遍歷緩存體，如果不為空，那name會(huì)被改寫，如果沒(méi)有被改寫，則!name 為true， 
                //從而引發(fā)再次調(diào)用此方法，但這次是只傳一個(gè)參數(shù)，移除緩存體， 
                if ( !name ) 
                    jQuery.removeData( elem ); 
            } 
        } else { 
            //移除UUID，但I(xiàn)E下對(duì)元素使用delete會(huì)拋錯(cuò) 
            try { 
                delete elem[ expando ]; 
            } catch(e){ 
                if ( elem.removeAttribute ) 
                    elem.removeAttribute( expando ); 
            }//注銷賬戶 
            delete jQuery.cache[ id ]; 
        } 
    } 
}) 

jQuery在1.2.3中添加了兩個(gè)同名的原型方法data與removeData，目的是方便鏈?zhǔn)讲僮髋c集化操作。并在data中添加getData, setData的自定義事件的觸發(fā)邏輯。

1.3中，數(shù)據(jù)緩存系統(tǒng)終于獨(dú)立成一個(gè)模塊data.js（內(nèi)部開(kāi)發(fā)時(shí)的劃分），并添加了兩組方法，命名空間上的queue與dequeue，原型上的queue與dequeue。queue的目的很明顯，就是緩存一組數(shù)據(jù)，為動(dòng)畫模塊服務(wù)。dequeue是從一組數(shù)據(jù)中刪掉一個(gè)。

//jQuery1.3 
jQuery.extend({ 
    queue: function( elem, type, data ) { 
        if ( elem ){ 
            type = (type || "fx") + "queue"; 
            var q = jQuery.data( elem, type ); 
            if ( !q || jQuery.isArray(data) )//確保儲(chǔ)存的是一個(gè)數(shù)組 
                q = jQuery.data( elem, type, jQuery.makeArray(data) ); 
            else if( data )//然后往這個(gè)數(shù)據(jù)加?xùn)|西 
                q.push( data ); 
        } 
        return q; 
    }, 
    dequeue: function( elem, type ){ 
        var queue = jQuery.queue( elem, type ), 
        fn = queue.shift();//然后刪掉一個(gè)，早期它是放置動(dòng)畫的回調(diào)，刪掉它就call一下， 
        // 但沒(méi)有做是否為函數(shù)的判定，估計(jì)也沒(méi)有寫到文檔中，為內(nèi)部使用 
        if( !type || type === "fx" ) 
            fn = queue[0]; 
        if( fn !== undefined ) 
            fn.call(elem); 
    } 
}) 

fx模塊animate方法的調(diào)用示例：

//each是并行處理多個(gè)動(dòng)畫,queue是一個(gè)接一個(gè)處理多個(gè)動(dòng)畫 
this[ optall.queue === false ? "each" : "queue" ](function(){ /*略*/}) 

在元素上添加自定義屬性，還會(huì)引發(fā)一個(gè)問(wèn)題。如果我們對(duì)這個(gè)元素進(jìn)行拷貝，就會(huì)將此屬性也會(huì)復(fù)制過(guò)去，導(dǎo)致兩個(gè)元素都有相同的UUID值，出現(xiàn)數(shù)據(jù)被錯(cuò)誤操作的情況。jQuery早期的復(fù)制節(jié)點(diǎn)實(shí)現(xiàn)非常簡(jiǎn)單，如果元素的cloneNode方法不會(huì)復(fù)制事件就使用cloneNode，否則使用元素的outerHTML，或父節(jié)點(diǎn)的innerHTML，用clean方法解析一個(gè)新元素出來(lái)。但outerHTML與innerHTML都會(huì)顯式屬性寫在里面，因此需要用正則把它們清除掉。

//jQuery1.3.2 core.js clone方法 
var ret = this.map(function(){ 
    if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this) ) { 
        var html = this.outerHTML; 
        if ( !html ) { 
            var div = this.ownerDocument.createElement("div"); 
            div.appendChild( this.cloneNode(true) ); 
            html = div.innerHTML; 
        } 
  
        return jQuery.clean([html.replace(/ jQuery\d+="(?:\d+|null)"/g, "").replace(/^\s*/, "")])[0]; 
    } else 
        return this.cloneNode(true); 
}); 

jQuery1.4發(fā)現(xiàn)IE如果對(duì)于object, ember, applet這三個(gè)古老的用于接入外部資源的標(biāo)簽可能會(huì)拋錯(cuò)。由于舊式IE的元素節(jié)點(diǎn)只是COM的包裝，一旦引入資源后，它就會(huì)變成那種資源的實(shí)例，而它們會(huì)有嚴(yán)格的訪問(wèn)控制，不能像普通的JS對(duì)象那樣隨意添加成員。于是jQuery便一刀換，但凡是這三種標(biāo)簽，就不為它緩存數(shù)據(jù)。jQuery弄了一個(gè)叫noData的hash，用于檢測(cè)元素節(jié)點(diǎn)的標(biāo)簽。

noData: { 
    "embed": true, 
    "object": true, 
    "applet": true 
}, 
//代碼防御        
if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) { 
    return; 
} 

jQuery1.4還對(duì)$.data進(jìn)行改進(jìn)，允許第二個(gè)參數(shù)為對(duì)象，方便儲(chǔ)存多個(gè)數(shù)據(jù)。UUID對(duì)應(yīng)的自定義屬性expando 也放進(jìn)命名空間之下了。queue與dequeue方法被剝離成一個(gè)新模塊。

jQuery1.43帶來(lái)三項(xiàng)改進(jìn)。

首先是添加changeData自定義方法。不過(guò)這套方法沒(méi)有什么銷量，只是產(chǎn)品經(jīng)理的自戀吧。

檢測(cè)元素節(jié)點(diǎn)是否支持添加自定義屬性的邏輯被獨(dú)立成一個(gè)叫acceptData的方法。因?yàn)閖Query團(tuán)隊(duì)發(fā)現(xiàn)當(dāng)object標(biāo)簽加載的flash資源，它還是可以添加自定義屬性的，于是決定對(duì)這種情況網(wǎng)開(kāi)一面。IE在加載flash時(shí)，需要對(duì)object指定一個(gè)叫classId的屬性，值為clsid:D27CDB6E-AE6D-11cf-96B8-444553540000，因此檢測(cè)邏輯就變得非常復(fù)雜，由于data, removeData都要用到，獨(dú)立出來(lái)有效節(jié)省比特。

HTML5對(duì)人們隨便添加自定義屬性的行為做出回應(yīng)，新增一種叫"data-*"的緩存機(jī)制。當(dāng)用戶設(shè)置的屬性以"data-"開(kāi)頭，它們會(huì)被保存到元素節(jié)點(diǎn)的dataset對(duì)象上。這就導(dǎo)致人們可能用HTML5方便緩存數(shù)據(jù)，也可能用jQuery的緩存系統(tǒng)保存數(shù)據(jù)，那么data方法就變得有點(diǎn)不中用了。于是jQuery在原型上的data做了增強(qiáng)，當(dāng)用戶第一次訪問(wèn)此元素節(jié)點(diǎn)，會(huì)遍歷它所有"data-"開(kāi)頭的自定義屬性（為了照顧舊式IE，不能直接遍歷dataset），把它們放到j(luò)Query的緩存體中。那么當(dāng)用戶取數(shù)據(jù)時(shí)，會(huì)先從緩存系統(tǒng)中，沒(méi)有再使用setAttribute訪問(wèn)"data-"自定義屬性。但HTML5的緩存系統(tǒng)非常弱，只能保存字符串（這當(dāng)然是出于循環(huán)引用的考量），于是jQuery會(huì)將它們還原為各種數(shù)據(jù)類型，如"null",, "false", "true"變成null, false, true, 符合數(shù)字格式的字符串會(huì)轉(zhuǎn)換成數(shù)字，如果它是以"{"開(kāi)頭"}"結(jié)尾則嘗試轉(zhuǎn)成一個(gè)對(duì)象。

//jQuery1.43 $.fn.data 
rbrace = /^(?:\{.*\}|\[.*\])$/; 
if ( data === undefined && this.length ) { 
    data = jQuery.data( this[0], key ); 
    if ( data === undefined && this[0].nodeType === 1 ) { 
        data = this[0].getAttribute( "data-" + key ); 
  
        if ( typeof data === "string" ) { 
            try { 
                data = data === "true" ? true : 
                    data === "false" ? false : 
                    data === "null" ? null : 
                    !jQuery.isNaN( data ) ? parseFloat( data ) : 
                    rbrace.test( data ) ? jQuery.parseJSON( data ) : 
                    data; 
            } catch( e ) {} 
  
        } else { 
            data = undefined; 
        } 
    } 
} 

jQuery1.5也帶來(lái)三項(xiàng)改進(jìn)。當(dāng)時(shí)jQuery已經(jīng)在1.42打敗Prototype.js，如日中天，馬太效應(yīng)，用戶量暴增。它的重點(diǎn)改為提升性能，進(jìn)入fix bug階段（用戶多，相當(dāng)于免費(fèi)的測(cè)試員就越多，測(cè)試覆蓋面就越大）。

改進(jìn)expando，原來(lái)是基于時(shí)間截，現(xiàn)在是版本號(hào)加隨機(jī)數(shù)。因此用戶可能在一個(gè)頁(yè)面引入多個(gè)版本的jQuery。

是否有此數(shù)據(jù)的邏輯被抽出成一個(gè)hasData方法，處理HTML5的"data-*"屬性也被抽出成一個(gè)私有方法dataAttr。它們都是為了邏輯顯得更清晰。dataAttr使用JSON.parse，由于這個(gè)JSON可能是JSON2.js引入的，而JSON2.js有個(gè)非常糟糕的地方，就是為一系列原生類型添加了toJSON方法，導(dǎo)致for in 循環(huán)判定是否為空對(duì)象出錯(cuò)。jQuery被逼搞了個(gè)isEmptyDataObject方法做處理。

jQuery的數(shù)據(jù)緩存系統(tǒng)本來(lái)就是為事件系統(tǒng)服務(wù)而分化出來(lái)的，到后來(lái)，它是內(nèi)部眾多模塊的基礎(chǔ)設(shè)施。換言之，它內(nèi)部會(huì)儲(chǔ)存許多框架用戶的變量（系統(tǒng)數(shù)據(jù)），但一旦它公開(kāi)到文檔中，用戶也會(huì)使用data保存他們務(wù)業(yè)中使用的數(shù)據(jù)（用戶數(shù)據(jù)）。以前，用戶小，變量名沖突的可能性比較少，加之jQuery為這些系統(tǒng)數(shù)據(jù)精挑了一些不常用的名字，__class__, __change__或加個(gè)后綴什么的，沒(méi)有收到什么投訴。當(dāng)jQuery成為世界級(jí)的著名框架后，用戶數(shù)據(jù)名干掉系統(tǒng)數(shù)據(jù)名，導(dǎo)致事件系統(tǒng)或其他什么模塊癱瘓就時(shí)有發(fā)生。jQuery開(kāi)始對(duì)緩存體進(jìn)行改造，原來(lái)就是一個(gè)對(duì)象，什么數(shù)據(jù)都往里面拋。現(xiàn)在它就這個(gè)緩存體內(nèi)開(kāi)辟一個(gè)子對(duì)象，鍵名為隨機(jī)的jQuery.expando值，如果是系統(tǒng)數(shù)據(jù)就存到里面去。但events系統(tǒng)數(shù)據(jù)為了向前兼容起見(jiàn)，還是直接放到緩存體之上。至于，如何區(qū)分是系統(tǒng)數(shù)據(jù)，非常簡(jiǎn)單，直接在data方法添加第四個(gè)參數(shù)，真值時(shí)為系統(tǒng)數(shù)據(jù)。removeData時(shí)也相應(yīng)提供第三個(gè)參數(shù)，用于刪除系統(tǒng)數(shù)據(jù)。還新設(shè)了一個(gè)_data方法，專門用于操作系統(tǒng)數(shù)據(jù)。下面就是緩存體的結(jié)構(gòu)圖：

　var cache = { 
     jQuery14312343254:{/*放置系統(tǒng)數(shù)據(jù)*/} 
     events: {/"放置事件名與它對(duì)應(yīng)的回調(diào)列表"/} 
     /*這里放置用戶數(shù)據(jù)*/ 
} 
jQuery1.7對(duì)緩存體做了改進(jìn)，系統(tǒng)變量變放置data對(duì)象中，為此判定緩存體為空也要做相應(yīng)的改進(jìn)，現(xiàn)在要跳過(guò)toJSON與data。新結(jié)構(gòu)如下： 
 
var cache = { 
     data:{/*放置用戶數(shù)據(jù)*/} 
     /*這里放置系統(tǒng)數(shù)據(jù)*/ 
} 

jQuery1.8曾添加一個(gè)叫deleteIds的數(shù)組，用于重用UUID，但曇花一現(xiàn)。UUID的值從1.8起不用jQuery.uuid的了，改用jQuery.guid遞增生成。重大的改進(jìn)在jQuery1.83后，操作數(shù)據(jù)的實(shí)現(xiàn)被抽出為私有方法，命名空間與原型上的方法只是一個(gè)代理，并分成兩組方法，操作用戶數(shù)據(jù)的data， removeData，操作系統(tǒng)數(shù)據(jù)的_data，_removeData?，F(xiàn)在光是緩存系統(tǒng)就是一個(gè)龐大家族了。

說(shuō)到底，數(shù)據(jù)緩存就是在目標(biāo)對(duì)象與緩存體間建立一對(duì)一的關(guān)系，然后在緩存體上操作數(shù)據(jù)，復(fù)雜度都集在前者。而在一個(gè)普通JS對(duì)象進(jìn)行增刪改查某屬性從來(lái)沒(méi)有難度，用戶怎么也玩不出花招。從軟件設(shè)計(jì)原則上看，這也是最好的結(jié)果（吻合KISS原則與職責(zé)單一則）。

原文鏈接：http://www.cnblogs.com/rubylouvre/archive/2012/11/19/2776286.html

【編輯推薦】