jQuery的快取機制淺析_jquery

前不久在研究jQuery的動畫隊列的時候，發現jQuery的快取系統也很強大，儘管以前也稍微接觸過，但一直都沒有深入研究過。 jQuery的快取系統在外部應用的時候都比較簡單，例如要將某個URL資料存到快取中只要這麼寫：

複製程式碼 程式碼如下:

var val = "stylechen.com";
$("div").data( "url" ); // 回傳undefined
$ ("div").data( "url", val ); // 回傳"stylechen.com"
$("div").data( "url" ); // 回傳"stylechen.com"

不光可以儲存字串，上面的val也可以是任意數據，物件、陣列、函數等都可以存到裡面。僅僅實現這種功能還是挺簡單的，聲明一個全局物件用來存儲數據，然後使用data方法來存儲或返回數據：

複製程式碼 程式碼如下:

var cacheData = {} // 用來儲存資料;的全域物件
var data = function( key, val ){
 if( val !== undefined ){
  cacheData[key] = val;
 }

 return cacheData[key];
}; 

jQuery快取系統的真正魅力在於其內部應用程式中，動畫、事件等都有用到這個快取系統。之前在寫easyAnim的時候，我將動畫的隊列都儲存到各DOM元素的自訂屬性中，這樣雖然可以方便的存取佇列數據，但也同時帶來了隱患。如果為DOM元素添加自訂的屬性和過多的資料可能會造成記憶體洩漏，所以要盡量避免這麼幹。

如果是使用jQuery的快取系統來存放DOM元素的數據，會先給該DOM元素增加一個隨機產生的屬性，這個屬性用來存放存取快取資料的索引值，就好比DOM元素都有一把開啟緩存保險箱的鑰匙，只要有了鑰匙就可以隨時開啟緩存保險箱。將本來存放到DOM元素中的資料都轉到了快取中，而DOM元素本身只要儲存一個簡單的屬性就可以了，這樣就可以將由DOM元素引起的記憶體洩漏的風險規避到最小。以下是我模擬jQuery自己寫的一個簡單的快取系統：

複製程式碼 程式碼如下:

var cacheData = {}, // 用來儲存資料的全域物件
 uuid = 0,
 // 宣告隨機數
 expando = "cacheData" ( new Date() " " ).slice( -8 );

var data = function( key, val, data ){
 if( typeof key === "string" ){
  if( val != = undefined ){
   cacheData[key] = val;
  }

  return cacheData[key];
 }
 else if( typeof key === "object" ){
  var index,
[expando] ){
   // 增加一個DOM元素的屬性
   // 隨機數是屬性名稱索引值是屬性值
   index = key[expando] = index] = {};
  }
  else{
   index = key[expando];
   thisCache = cacheData[ !thisCache[expando] ){
   thisCache[expando] = {};
  }

  if( gambling data !== undefined ){
   // 將資料儲存至快取物件中
   thisCache[expando][val] = data;
  }

 🎜>  return thisCache[expando][val];
 }
};

var removeData = function( key, val ){
 if( typeof key === "string" ){
  delete cacheData[key];
 }
 delete cacheData[key];
 }
 delete iftype == "object" ){

  if( !key[expando] ){

   return;
  }
  // 偵測物件是否為空
 }
  // 偵測物件是否為空白
 }
  // 偵測物件是否為空
 🎜>    var name;
    for ( name in obj ) {
     return false;
  🎜>   removeAttr = function(){
    try{
     // IE8及標準瀏覽器移除物件
     delete key[expando IE6/IE7使用removeAttribute方法來刪除屬性
     key.removeAttribute(expando);
    }
   },
🎜 >   // 只刪除指定的資料
   delete cacheData[index][expando][val];
   /// 若是空物件索性全部刪除
   if( ismptyObjectObject( cacheEindextyObject( cacheDataindex][🎜] )[ ){
    delete cacheData[index];
    removeAttr();
   }
  } delete cacheData[index];
   removeAttr();
  }
 }
};





上面的程式碼值得注意的是IE6/IE7中用delete來刪除自訂的屬性會報錯，只能使用removeAttribute來刪除，標準的瀏覽器都可以使用delete來刪除。下面是呼叫的結果：





複製程式碼


程式碼如下:

var box = document.getElementByent.

 list = document.getElementById( "list" );

data( box, "myName", "chen" );

alert( data( box, "myName" ) ); // chen

data( box, "myBlog", "stylechen.com" );

alert( data( box, "myBlog" ) ); // stylechen.com

removeData( box, "myBlog" ); alert( data( box, "myBlog" ) ); // undefinedalert( data( box, "myName" ) ); // chenalert( box[expando] ); // 1

removeData( box );

alert( box[expando] ); // undefined




當然，jQuery的快取系統比我的這個要複雜些，不過核心原理還是一樣的。 easyAnim將會在後續的版本中引入這個快取系統。