jQuery核心基礎設施:資料緩衝模組進化史

來源:互聯網
上載者:User

  資料緩衝系統最早應該是jQuery1.2引入的,那時它的事件系統完成照搬DE大神的addEvent.js,而addEvent在實現有個缺憾,它把事件的回調都放到EventTarget之上,這會引發循環參考,如果EventTarget是window對象,又會引發全域汙染。有了資料緩衝系統,除了規避這兩個風險外,我們還可以有效地儲存不同方法產生的中間變數,而這些變數會對另一個模組的方法有用,解耦方法間的依賴。對於jQuery 來說,它的事件複製乃至後來的列隊實現都是離不開緩衝系統。

  jQuery1.2 在core模組新增了兩個靜態方法, data與removeData。data不用說,與jQuery其他方法一樣,讀寫結合。jQuery的緩衝系統是把所有資料都放$.cache之上,然後為每個要使用緩衝系統的元素節點,文檔對象與window對象分配一個UUID。UUID的屬性名稱為一個隨機的自訂屬性,"jQuery" + (new Date()).getTime(), 值為整數,從零遞增。但UUID總要附於一個對象上,如果那個對象是window,豈不是全域汙染嗎,因此jQuery內部判定它是window對象時,映射為一個叫windowData的Null 物件,然後UUID加在它之上。有了UUID,我們在首次訪問緩衝系統時,會在$.cache對象開闢一個Null 物件(緩衝體),用於放置與目標對象有關的東西。這有點像銀行開戶了,UUID的值就是存摺。removeData則會刪掉不再需要儲存資料,如果到最後,資料刪清光了,它也沒有任何索引值對,成為空白對象,jQuery就會從$.cache中刪掉此對象,並從目標對象移除UUID。

  jQuery在1.2.3中添加了兩個同名的原型方法data與removeData,目的是方便鏈式操作與集化操作。並在data中添加getData, setData的自訂事件的觸發邏輯。

  1.3中,資料緩衝系統終於獨立成一個模組data.js(內部開發時的劃分),並添加了兩組方法,命名空間上的queue與dequeue,原型上的queue與dequeue。queue的目的很明顯,就是緩衝一組資料,為動畫模組服務。dequeue是從一組資料中刪掉一個。

  fx模組animate方法的調用樣本:

  在元素上添加自訂屬性,還會引發一個問題。如果我們對這個元素進行拷貝,就會將此屬性也會複製過去,導致兩個元素都有相同的UUID值,出現資料被錯誤操作的情況。jQuery早期的複製節點實現非常簡單,如果元素的cloneNode方法不會複製事件就使用cloneNode,否則使用元素的 outerHTML,或父節點的innerHTML,用clean方法解析一個新元素出來。但outerHTML與innerHTML都會顯式屬性寫在裡面,因此需要用正則把它們清除掉。

  jQuery1.4發現IE如果對於object, ember, applet這三個古老的用於接入外部資源的標籤可能會拋錯。由於舊式IE的元素節點只是COM的封裝,一旦引入資源後,它就會變成那種資源的執行個體,而它們會有嚴格的存取控制,不能像普通的JS對象那樣隨意新增成員。於是jQuery便一刀換,但凡是這三種標籤,就不為它快取資料。jQuery弄了一個叫 noData的hash,用於檢測元素節點的標籤。

  jQuery1.4還對$.data進行改進,允許第二個參數為對象,方便儲存多個資料。UUID對應的自訂屬性expando 也放進命名空間之下了。queue與dequeue方法被剝離成一個新模組。

  jQuery1.43帶來三項改進。

  首先是添加changeData自訂方法。不過這套方法沒有什麼銷量,只是產品經理的自戀吧。

  檢測元素節點是否支援添加自訂屬性的邏輯被獨立成一個叫acceptData的方法。因為jQuery團隊發現當object標籤載入的 flash資源,它還是可以添加自訂屬性的,於是決定對這種情況網開一面。IE在載入flash時,需要對object指定一個叫classId的屬性,值為clsid:D27CDB6E-AE6D-11cf-96B8-444553540000,因此檢測邏輯就變得非常複雜,由於data, removeData都要用到,獨立出來有效節省位元。

  HTML5對人們隨便添加自訂屬性的行為做出回應,新增一種叫"data-*"的緩衝機制。當使用者佈建的屬性以"data-"開頭,它們會被儲存到元素節點的dataset對象上。這就導致人們可能用HTML5方便快取資料,也可能用jQuery的緩衝系統儲存資料,那麼data方法就變得有點不中用了。於是jQuery在原型上的data做了增強,當使用者第一次訪問此元素節點,會遍曆它所有"data-"開頭的自訂屬性(為了照顧舊式IE,不能直接遍曆dataset),把它們放到jQuery的緩衝體中。那麼當使用者取資料時,會先從緩衝系統中,沒有再使用setAttribute訪問"data-"自訂屬性。但HTML5的緩衝系統非常弱,只能儲存字串(這當然是出於循環參考的考量),於是jQuery會將它們還原為各種資料類型,如"null",, "false", "true"變成null, false, true, 符合數字格式的字串會轉換成數字,如果它是以"{"開頭"}"結尾則嘗試轉成一個對象。

  jQuery1.5也帶來三項改進。當時jQuery已經在1.42打敗Prototype.js,如日中天,馬太效應,使用者量暴增。它的重點改為提升效能,進入fix bug階段(使用者多,相當於免費的測試員就越多,測試覆蓋面就越大)。

  改進expando,原來是基於時間截,現在是版本號碼加隨機數。因此使用者可能在一個頁面引入多個版本的jQuery。

  是否有此資料的邏輯被抽出成一個hasData方法,處理HTML5的"data-*"屬性也被抽出成一個私人方法dataAttr。它們都是為了邏輯顯得更清晰。dataAttr使用JSON.parse,由於這個JSON可能是JSON2.js引入的,而JSON2.js有個非常糟糕的地方,就是為一系列原生類型添加了toJSON方法,導致for in 迴圈判定是否為空白對象出錯。jQuery被逼搞了個isEmptyDataObject方法做處理。

  jQuery的資料緩衝系統本來就是為事件系統服務而分化出來的,到後來,它是內部眾多模組的基礎設施。換言之,它內部會儲存許多架構使用者的變數(系統資料),但一旦它公開到文檔中,使用者也會使用data儲存他們務業中使用的資料(使用者資料)。以前,使用者小,變數名衝突的可能性比較少,加之 jQuery為這些系統資料精挑了一些不常用的名字,__class__, __change__或加個尾碼什麼的,沒有收到什麼投訴。當jQuery成為世界級的著名架構後,使用者資料名幹掉系統資料名,導致事件系統或其他什麼模組癱瘓就時有發生。jQuery開始對緩衝體進行改造,原來就是一個對象,什麼資料都往裡面拋。現在它就這個緩衝體內開闢一個子物件,鍵名為隨機的 jQuery.expando值,如果是系統資料就存到裡面去。但events系統資料為了向前相容起見,還是直接放到緩衝體之上。至於,如何區分是系統資料,非常簡單,直接在data方法添加第四個參數,真值時為系統資料。removeData時也相應提供第三個參數,用於刪除系統資料。還新設了一個 _data方法,專門用於作業系統資料。下面就是緩衝體的結構圖:

  jQuery1.8曾添加一個叫deleteIds的數組,用於重用UUID,但曇花一現。UUID的值從1.8起不用jQuery.uuid的了,改用jQuery.guid遞增產生。重大的改進在jQuery1.83後,操作資料的實現被抽出為私人方法,命名空間與原型上的方法只是一個代理,並分成兩組方法,操作使用者資料的data, removeData,作業系統資料的_data,_removeData。現在光是緩衝系統就是一個龐大家族了。

  說到底,資料緩衝就是在目標對象與緩衝體間建立一對一的關係,然後在緩衝體上操作資料,複雜度都集在前者。而在一個普通JS對象進行增刪改查某屬性從來沒有難度,使用者怎麼也玩不出花招。從軟體設計原則上看,這也是最好的結果(吻合KISS原則與職責單一則)。

  原文連結:http://www.cnblogs.com/rubylouvre/archive/2012/11/19/2776286.html

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。