国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

jQuery的緩存機制淺析

2019-11-20 14:45:41
字體:
來源:轉載
供稿:網友

前不久在研究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,
   thisCache;

  if( !key[expando] ){
   // 添加一個DOM元素的屬性
   // 隨機數是屬性名 索引值是屬性值
   index = key[expando] = uuid;
   thisCache = cacheData[index] = {};
  }
  else{
   index = key[expando];
   thisCache = cacheData[index];
  }

  
  if( !thisCache[expando] ){
   thisCache[expando] = {};
  }

  if( <a >gambling</a> data !== undefined ){
   // 將數據存到緩存對象中
   thisCache[expando][val] = data;
  }

  // 返回DOM元素存儲的數據
  return thisCache[expando][val];
 }
};

var removeData = function( key, val ){
 if( typeof key === "string" ){
  delete cacheData[key];
 }
 else if( typeof key === "object" ){
  if( !key[expando] ){
   return;
  }
  // 檢測對象是否為空
  var isEmptyObject = function( obj ) {
    var name;
    for ( name in obj ) {
     return false;
    }
    return true;
   },

   removeAttr = function(){
    try{
     // IE8及標準瀏覽器可以直接使用delete來刪除屬性
     delete key[expando];
    }
    catch (e) {
     // IE6/IE7使用removeAttribute方法來刪除屬性
     key.removeAttribute(expando);
    }
   },

   index = key[expando];

  if( val ){
   // 只刪除指定的數據
   delete cacheData[index][expando][val];
   // 如果是空對象 索性全部刪除
   if( isEmptyObject( cacheData[index][expando] ) ){
    delete cacheData[index];
    removeAttr();
   }
  }
  else{
   // 刪除DOM元素存到緩存中的所有數據
   delete cacheData[index];
   removeAttr();
  }
 }
};


上面的代碼值得注意的是IE6/IE7中用delete來刪除自定義的屬性會報錯,只能使用removeAttribute來刪除,標準的瀏覽器都可以使用delete來刪除。下面是調用的結果:

復制代碼 代碼如下:

var box = document.getElementById( "box" ),
 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" ) ); // undefined
alert( data( box, "myName" ) ); // chen
alert( box[expando] ); // 1

removeData( box );
alert( box[expando] ); // undefined

當然,jQuery的緩存系統比我的這個要復雜些,不過核心原理還是一樣的。easyAnim將會在后續的版本中引入這個緩存系統。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 马山县| 丽水市| 库尔勒市| 平定县| 抚州市| 秦安县| 五家渠市| 远安县| 顺昌县| 扬州市| 石首市| 隆昌县| 五家渠市| 罗平县| 东安县| 东源县| 郧西县| 巴里| 巩留县| 阿鲁科尔沁旗| 离岛区| 遂平县| 嘉定区| 游戏| 巴塘县| 呼玛县| 陆川县| 三都| 万载县| 兴国县| 岚皋县| 丹东市| 东莞市| 锡林浩特市| 荔波县| 南平市| 怀宁县| 三河市| 仪征市| 邵武市| 屏南县|