數(shù)據(jù)緩存系統(tǒng)最早應(yīng)該是jQuery1.2引入的，那時它的事件系統(tǒng)完成照搬DE大神的addEvent.js，而addEvent在實(shí)現(xiàn)有個缺憾，它把事件的回調(diào)都放到EventTarget之上，這會引發(fā)循環(huán)引用，如果EventTarget是window對象，又會引發(fā)全局污染。有了數(shù)據(jù)緩存系統(tǒng)，除了規(guī)避這兩個風(fēng)險外，我們還可以有效地保存不同方法產(chǎn)生的中間變量，而這些變量會對另一個模塊的方法有用，解耦方法間的依賴。對于jQuery 來說，它的事件克隆乃至后來的列隊(duì)實(shí)現(xiàn)都是離不開緩存系統(tǒng)。
jQuery1.2 在core模塊新增了兩個靜態(tài)方法， data與removeData。data不用說，與jQuery其他方法一樣，讀寫結(jié)合。jQuery的緩存系統(tǒng)是把所有數(shù)據(jù)都放$.cache之上，然后為每個要使用緩存系統(tǒng)的元素節(jié)點(diǎn)，文檔對象與window對象分配一個UUID。UUID的屬性名為一個隨機(jī)的自定義屬性，"jQuery" + (new Date()).getTime()， 值為整數(shù)，從零遞增。但UUID總要附于一個對象上，如果那個對象是window，豈不是全局污染嗎，因此jQuery內(nèi)部判定它是window對象時，映射為一個叫windowData的空對象，然后UUID加在它之上。有了UUID，我們在首次訪問緩存系統(tǒng)時，會在$.cache對象開辟一個空對象(緩存體)，用于放置與目標(biāo)對象有關(guān)的東西。這有點(diǎn)像銀行開戶了，UUID的值就是存折。removeData則會刪掉不再需要保存數(shù)據(jù)，如果到最后，數(shù)據(jù)刪清光了，它也沒有任何鍵值對，成為空對象，jQuery就會從$.cache中刪掉此對象，并從目標(biāo)對象移除UUID。
jQuery在1.2.3中添加了兩個同名的原型方法data與removeData，目的是方便鏈?zhǔn)讲僮髋c集化操作。并在data中添加getData, setData的自定義事件的觸發(fā)邏輯。
1.3中，數(shù)據(jù)緩存系統(tǒng)終于獨(dú)立成一個模塊data.js(內(nèi)部開發(fā)時的劃分)，并添加了兩組方法，命名空間上的queue與dequeue，原型上的queue與dequeue。queue的目的很明顯，就是緩存一組數(shù)據(jù)，為動畫模塊服務(wù)。dequeue是從一組數(shù)據(jù)中刪掉一個。
fx模塊animate方法的調(diào)用示例：
在元素上添加自定義屬性，還會引發(fā)一個問題。如果我們對這個元素進(jìn)行拷貝，就會將此屬性也會復(fù)制過去，導(dǎo)致兩個元素都有相同的UUID值，出現(xiàn)數(shù)據(jù)被錯誤操作的情況。jQuery早期的復(fù)制節(jié)點(diǎn)實(shí)現(xiàn)非常簡單，如果元素的cloneNode方法不會復(fù)制事件就使用cloneNode，否則使用元素的 outerHTML，或父節(jié)點(diǎn)的innerHTML，用clean方法解析一個新元素出來。但outerHTML與innerHTML都會顯式屬性寫在里面，因此需要用正則把它們清除掉。
jQuery1.4發(fā)現(xiàn)IE如果對于object, ember, applet這三個古老的用于接入外部資源的標(biāo)簽可能會拋錯。由于舊式IE的元素節(jié)點(diǎn)只是COM的包裝，一旦引入資源后，它就會變成那種資源的實(shí)例，而它們會有嚴(yán)格的訪問控制，不能像普通的JS對象那樣隨意添加成員。于是jQuery便一刀換，但凡是這三種標(biāo)簽，就不為它緩存數(shù)據(jù)。jQuery弄了一個叫 noData的hash，用于檢測元素節(jié)點(diǎn)的標(biāo)簽。
jQuery1.4還對$.data進(jìn)行改進(jìn)，允許第二個參數(shù)為對象，方便儲存多個數(shù)據(jù)。UUID對應(yīng)的自定義屬性expando 也放進(jìn)命名空間之下了。queue與dequeue方法被剝離成一個新模塊。
jQuery1.43帶來三項(xiàng)改進(jìn)。
首先是添加changeData自定義方法。不過這套方法沒有什么銷量，只是產(chǎn)品經(jīng)理的自戀吧。
檢測元素節(jié)點(diǎn)是否支持添加自定義屬性的邏輯被獨(dú)立成一個叫acceptData的方法。因?yàn)閖Query團(tuán)隊(duì)發(fā)現(xiàn)當(dāng)object標(biāo)簽加載的 flash資源，它還是可以添加自定義屬性的，于是決定對這種情況網(wǎng)開一面。IE在加載flash時，需要對object指定一個叫classId的屬性，值為clsid:D27CDB6E-AE6D-11cf-96B8-444553540000，因此檢測邏輯就變得非常復(fù)雜，由于data, removeData都要用到，獨(dú)立出來有效節(jié)省比特。
HTML5對人們隨便添加自定義屬性的行為做出回應(yīng)，新增一種叫"data-*"的緩存機(jī)制。當(dāng)用戶設(shè)置的屬性以"data-"開頭，它們會被保存到元素節(jié)點(diǎn)的dataset對象上。這就導(dǎo)致人們可能用HTML5方便緩存數(shù)據(jù)，也可能用jQuery的緩存系統(tǒng)保存數(shù)據(jù)，那么data方法就變得有點(diǎn)不中用了。于是jQuery在原型上的data做了增強(qiáng)，當(dāng)用戶第一次訪問此元素節(jié)點(diǎn)，會遍歷它所有"data-"開頭的自定義屬性(為了照顧舊式IE，不能直接遍歷dataset)，把它們放到j(luò)Query的緩存體中。那么當(dāng)用戶取數(shù)據(jù)時，會先從緩存系統(tǒng)中，沒有再使用setAttribute訪問"data-"自定義屬性。但HTML5的緩存系統(tǒng)非常弱，只能保存字符串(這當(dāng)然是出于循環(huán)引用的考量)，于是jQuery會將它們還原為各種數(shù)據(jù)類型，如"null",, "false", "true"變成null, false, true, 符合數(shù)字格式的字符串會轉(zhuǎn)換成數(shù)字，如果它是以"{"開頭"}"結(jié)尾則嘗試轉(zhuǎn)成一個對象。
jQuery1.5也帶來三項(xiàng)改進(jìn)。當(dāng)時jQuery已經(jīng)在1.42打敗Prototype.js，如日中天，馬太效應(yīng)，用戶量暴增。它的重點(diǎn)改為提升性能，進(jìn)入fix bug階段(用戶多，相當(dāng)于免費(fèi)的測試員就越多，測試覆蓋面就越大)。
改進(jìn)expando，原來是基于時間截，現(xiàn)在是版本號加隨機(jī)數(shù)。因此用戶可能在一個頁面引入多個版本的jQuery。
是否有此數(shù)據(jù)的邏輯被抽出成一個hasData方法，處理HTML5的"data-*"屬性也被抽出成一個私有方法dataAttr。它們都是為了邏輯顯得更清晰。dataAttr使用JSON.parse，由于這個JSON可能是JSON2.js引入的，而JSON2.js有個非常糟糕的地方，就是為一系列原生類型添加了toJSON方法，導(dǎo)致for in 循環(huán)判定是否為空對象出錯。jQuery被逼搞了個isEmptyDataObject方法做處理。
jQuery的數(shù)據(jù)緩存系統(tǒng)本來就是為事件系統(tǒng)服務(wù)而分化出來的，到后來，它是內(nèi)部眾多模塊的基礎(chǔ)設(shè)施。換言之，它內(nèi)部會儲存許多框架用戶的變量(系統(tǒng)數(shù)據(jù))，但一旦它公開到文檔中，用戶也會使用data保存他們務(wù)業(yè)中使用的數(shù)據(jù)(用戶數(shù)據(jù))。以前，用戶小，變量名沖突的可能性比較少，加之 jQuery為這些系統(tǒng)數(shù)據(jù)精挑了一些不常用的名字，__class__, __change__或加個后綴什么的，沒有收到什么投訴。當(dāng)jQuery成為世界級的著名框架后，用戶數(shù)據(jù)名干掉系統(tǒng)數(shù)據(jù)名，導(dǎo)致事件系統(tǒng)或其他什么模塊癱瘓就時有發(fā)生。jQuery開始對緩存體進(jìn)行改造，原來就是一個對象，什么數(shù)據(jù)都往里面拋。現(xiàn)在它就這個緩存體內(nèi)開辟一個子對象，鍵名為隨機(jī)的 jQuery.expando值，如果是系統(tǒng)數(shù)據(jù)就存到里面去。但events系統(tǒng)數(shù)據(jù)為了向前兼容起見，還是直接放到緩存體之上。至于，如何區(qū)分是系統(tǒng)數(shù)據(jù)，非常簡單，直接在data方法添加第四個參數(shù)，真值時為系統(tǒng)數(shù)據(jù)。removeData時也相應(yīng)提供第三個參數(shù)，用于刪除系統(tǒng)數(shù)據(jù)。還新設(shè)了一個 _data方法，專門用于操作系統(tǒng)數(shù)據(jù)。下面就是緩存體的結(jié)構(gòu)圖：
jQuery1.8曾添加一個叫deleteIds的數(shù)組，用于重用UUID，但曇花一現(xiàn)。UUID的值從1.8起不用jQuery.uuid的了，改用jQuery.guid遞增生成。重大的改進(jìn)在jQuery1.83后，操作數(shù)據(jù)的實(shí)現(xiàn)被抽出為私有方法，命名空間與原型上的方法只是一個代理，并分成兩組方法，操作用戶數(shù)據(jù)的data， removeData，操作系統(tǒng)數(shù)據(jù)的_data，_removeData。現(xiàn)在光是緩存系統(tǒng)就是一個龐大家族了。
說到底，數(shù)據(jù)緩存就是在目標(biāo)對象與緩存體間建立一對一的關(guān)系，然后在緩存體上操作數(shù)據(jù)，復(fù)雜度都集在前者。而在一個普通JS對象進(jìn)行增刪改查某屬性從來沒有難度，用戶怎么也玩不出花招。從軟件設(shè)計(jì)原則上看，這也是最好的結(jié)果(吻合KISS原則與職責(zé)單一則)。
原文鏈接：http://www.cnblogs.com/rubylouvre/archive/2012/11/19/2776286.html