2025-05-25

 



很多同學在項目中都喜歡將數據存儲在HTMLElement屬性上,如


view sourceprint?1 <p data=”some data”>Test</p> 


2 <script> 


3     p.getAttribute(data); // some data 


4 </script>


給頁面中p添加瞭自定義屬性“data”及值“some data”。後續JS代碼中使用getAttribute獲取。


 


jQuery從1.2.3開始提供瞭data/removeData方法用來存儲/刪除數據。1.6.1代碼片段


view sourceprint?1 jQuery.extend({ 


2     cache: {}, 


3   


4     // Please use with caution 


5     uuid: 0, 


6       


7     … 


8       


9 });


即給jQuery添加瞭靜態字段/方法,有jQuery.cache/jQuery.uuid/jQuery.expando等。下面分別介紹



jQuery.cache 空對象,用來緩存。它的結構較復雜。



jQuery.uuid 自增唯一的數字。



jQuery.expando 字符串,使用Math.random生成,去掉瞭非數字字符。它作為HTMLElement或JS對象的屬性名。


view sourceprint?1 expando: “jQuery” + ( jQuery.fn.jquery + Math.random() ).replace( /D/g, “” ),



jQuery.noData JS對象,對於指定的HTMLElement禁用data方法。如embed、applet。



jQuery.hasData 用來判斷HTMLElement或JS對象是否具有數據。返回true或false。即如果調用瞭jQuery.data方法添加瞭屬性,則返回true。


view sourceprint?1 <p>aa</p> 


2 <script> 


3     var p = document.getElementsByTagName(p)[0]; 


4     $.hasData(p); // false 


5     $.data(p, name,jack); 


6     $.hasData(p); // true 


7 </script>


 


jQuery.acceptData 用來判斷該元素是否能接受數據,返回true或false。在jQuery.data中使用。


 


jQuery.data 這是提供給客戶端程序員使用的方法,它同時是setter/getter。


1,傳一個參數,返回附加在指定元素的所有數據,即thisCachejQuery.data(el); // thisCache


2,傳二個參數,返回指定的屬性值jQuery.data(el, name);


3,傳三個參數,設置屬性及屬性值jQuery.data(el, name, jack);jQuery.data(el, uu, {});
4,傳四個參數,第四個參數pvt僅提供給jQuery庫自身使用。即jQuery._data方法中傳true。因為jQuery的事件模塊嚴重依賴於jQuery.data,為避免人為的不小心重寫在這個版本中加入的。


 


jQuery.removeData 刪除數據。


上面是jQuery數據緩存模塊的整體概述,下面詳細說下jQuery.data方法。jQuery.data為兩種對象提供緩存:JS對象和HTMLElement


view sourceprint?01 // 為JS對象提供緩存 


02 var myObj = {}; 


03 $.data(myObj, name, jack); 


04 $.data(myObj, name); // jack 


05   


06 // 為HTMLElement提供緩存 


07 <p id=”xx”></p> 


08 <script> 


09     var el = document.getElementById(xx); 


10     $.data(el, name, jack); 


11     $.data(el, name); // jack 


12 </script>


 


內部實現上也是有區別的,



1,為JS對象提供緩存時,直接將數據保存在JS對象上。cache為JS對象。此時會偷偷的給JS對象添加個屬性(類似於jQuery16101803968874529044),屬性值也是個JS對象。舉例說明


view sourceprint?1 var myObj = {}; 


2 $.data(myObj, name, jack); 


3 console.log(myObj);


myObj的結構如下


view sourceprint?1 myObj = { 


2     jQuery16101803968874529044 : { 


3         name : jack


4     } 


5 }



“jQuery16101803968874529044”這個字符串在data內部命名為id(註意並非HTMLElement元素的id),它實際就是jQuery.expando。上面已經提到它是在jQuery.js引入到頁面後隨機生成的。


 


2,為HTMLElement提供緩存時,卻不會直接保存在HTMLElement上。而是保存在jQuery.cache上。cache為jQuery.cache。此時先給HTMLElement添加屬性(類似於jQuery16101803968874529044),屬性值為數字(1,2,3遞增)。即隻將一些數字保存在瞭HTMLElement上,不會直接將數據置入。這是因為IE老版本中可能會存在內存泄露危險。而HTMLElement如何與jQuery.cache建立聯系呢? 還是id。剛剛提到屬性值數字就是id。舉例說明


view sourceprint?1 <p id=”xx”></p> 


2 <script> 


3     var el = document.getElementById(xx); 


4     $.data(el, name, jack); 


5     console.log(el[jQuery.expando]); // 1 


6     console.log(jQuery.cache); // {1 : {name:jack}} 


7 </script>


el 上添加瞭屬性jQuery.expando,值為id,這個id是從1開始遞增的。而id又作為jQuery.cache的屬性(key)。這樣就HTMLElement就與jQuery.cache建立瞭聯系。如圖



 


不知註意到沒有,jQuery.data還有第四個參數pvt,這個參數隻在jQuery._data中使用。


view sourceprint?1 // For internal use only. 


2 _data: function( elem, name, data ) { 


3     return jQuery.data( elem, name, data, true ); 


4 },


jQuery._data從命名上就指定它是私有的,使用jQuery的客戶端程序員不應該去調用該方法。jQuery的API文檔上也不會公開它。



jQuery的數據緩存模塊從1.2.3到1.6.1幾乎每個版本都在變。jQuery._data的提出就是為瞭避免客戶端程序員覆蓋/重寫瞭默寫模塊。如jQuery事件模塊中事件handler等就使用jQuery.data存儲,如果重寫瞭該模塊。那麼事件模塊將癱瘓。因此特意添加瞭pvt參數及jQuery._data方法。



但如果你刻意要破壞,那麼還是可以做的。如下


view sourceprint?01 <p id=”xx”>Test</p> 


02 <script> 


03     $(#xx).click(function(){ 


04         alert(click); 


05     }); 


06       


07     // 語句1 


08     $.data($(#xx)[0], events, , true); 


09       


10     // 語句2 


11     //$._data($(#xx)[0], events, ); 


12 </script>


點擊p[id=xx]將不會觸發點擊事件。


 


整個jQuery.data設置(set)數據緩存的過程就是如此,理解的這個。取數據(get)的過程就好理解瞭。不重復。


最後,我會給zChian.js添加zChain.data/removeData方法,因為是“迷你版”,僅給HTMLElement添加數據緩存。請註意。


 


 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *