jQuery 之緩存

1.前言

       在後臺中，某欄目添加多個單品，輸入單片鏈接之後需要進行ajax請求該單品的詳細數據，點擊“保存”按鈕，需要將所有的單品數據進行彙總爲json並保存。

        給文本框的blur添加事件進行ajax請求後數據的存儲成爲一個問題，偶然看jquery源碼時，發現.data是一個不錯的實現。

2.使用

        jQuery.data可以爲普通對象或是DOM element 附加及獲取數據，分爲以下三類：

        1）用name,value給普通對象賦值   $.data(obj,name,value)，獲取數據$.data(obj,name)

        2）用另一個對象給普通對象賦值    $.data(obj,another), 獲取數據$.data(obj,name)

        3）給DOM element元素賦值   $.data(element,name,value) ,獲取數據$.data(element,name)

3.詳細

       1》給普通對象賦值解析

        給對象賦值時，其實就是將一個“cache”附加到了對象上，並使用了一個特殊的屬性名稱

         

        如上圖所示：obj多了一個屬性名：jQuery112100953224126715213 在該屬性下存放了數據。

        屬性名的生成：var expando="jQuery"+("1.2"+Mah.random()).replace(/\D/g,'');  //jquery版本加隨機數,特殊名稱，並用於標識不同的頁面，它是jQuery引入到頁面後隨即生成的。

         2》給DOM element元素賦值

         因爲在一些瀏覽器中（IE6,7）不能有效回收DOM element上附加的對象引用，所以採用不同的方式來附加數據

使用了cache，並附加uid(唯一且遞增)，不直接保存在DOM element上，保存於jQuery.cache上。uid附加在DOM Element 的 “expando” 屬性中。 var id = obj[expando] = obj[expando] || ++uuid;

         

        另，有的Dom element具有其他的“事件”之類的。爲防止被用戶覆蓋不能使用，緩存附加的屬性不在jQuery164....該屬性的下面。與其實兄弟平級。  

     

         如果想覆蓋也是可以的,$.data中第四個參數爲true(默認爲false)此時修改的是expando內部的events

 

            

4.簡單實現

         查了一下有網友對這部分內容的簡單實現，敲了一下，附上代碼：

$=function(){
	var globleCache={};
	var expando=jQuery+("1.6"+Math.random()).replace(/\D/,'');  //過濾非數字
	var uuid=0;
	function getcache(obj){  //根據對象的不同選擇不同的存儲位置
		if(obj.nodeType){  //DOM element 
			var id=obj[expando]=obj[expando]||++uuid;  //uuid 自增
			globleCache[id]=globleCache[id]||{};
			return globleCache[id];
		}else{
			obj[expando]=obj[expando]||{};
			return obj[expando];
		}
	}
	function getdata(cache,name){  //獲取緩存值
                 return cache[name];
	}
	function setdata(cache,name,value){   //插入緩存值
		return cache[name]=value;
	}
	function setdatawithobject(cache,another){  //將對象向對象賦值
              for(var name in another){
        	cache[name]=another[name];
              }
	}
	return{
		data:function(obj,name,value){
			var cache=getcache(obj);
			if(name instanceof Object){  //值爲另一個對象
                                setdatawithobject(cache,name);
			}else if(value===undefined){
				getdata(cache,name);
			}else{
				setdata(cache,name,value);
			}
		}
	}
   
}