很多同學在項目中都喜歡將數據存儲在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添加數據緩存。請註意。