javascript 缓存提供措施

信托每一个开拓者都知道缓存的重要性。从新至尾有缓存的靠山(memcached,xcache等。) 来减轻db的压力。对内容分发收集（CDN）缓存中但愿你的赏识器缓存那些不止一次的加载资源。虽然, 有客户端缓存,以是你不要一再昂贵的操纵(纵然是算法或大量的运算)。

这是先容的是一个不错的javascript的方面的客户端办理方案,可选配支持HTML5当地存储器.

Starting Simple

function CacheProvider() {
   // values will be stored here
   this._cache = {};
 }

Feature detect on local storage

try {
   CacheProvider.hasLocalStorage = ('localStorage' in window) && window['localStorage'] !== null;
 } catch (ex) {
   CacheProvider.hasLocalStorage = false;
 

}

这里行使try catch的首要缘故起因是 尽量firefox支持该属性，可是必要在about:config中配置并开启，不然将会报错。以是一个简朴的if else不能满意需求。

下面我们将增进工具当地存储机制的支持。这个技能是小心了Christopher Blizzard的一篇不错的文章 Saving data with local storage – for which those who didn’t know, you can only store string’s into local storage. Thus we have this…

in / out JSON parsing

if (CacheProvider.hasLocalStorage) {
   Storage.prototype.setObject = function(key, value) {
     this.setItem(key, JSON.stringify(value));
   };

   Storage.prototype.getObject = function(key) {
     return JSON.parse(this.getItem(key));
   };
 }

此刻就到了我们的三个焦点要领了，别离是 get, set, 和clear.

Core class functionality

CacheProvider.prototype = {

   /**
      * {String} k - the key
      * {Boolean} local - get this from local storage?
      * {Boolean} o - is the value you put in local storage an object?
      */
   get: function(k, local, o) {
     if (local && CacheProvider.hasLocalStorage) {
       var action = o ? 'getObject' : 'getItem';
       return localStorage[action](k) || undefined;
     } else {
       return this._cache[k] || undefined;
     }
   },

   /**
      * {String} k - the key
      * {Object} v - any kind of value you want to store
      * however only objects and strings are allowed in local storage
      * {Boolean} local - put this in local storage
      */
   set: function(k, v, local) {
     if (local && CacheProvider.hasLocalStorage) {
       if (typeof v !== 'string')) {
         // make assumption if it's not a string, then we're storing an object
         localStorage.setObject(k, v);
       } else {
         try {
           localStorage.setItem(k, v);
         } catch (ex) {
           if (ex.name == 'QUOTA_EXCEEDED_ERR') {
             // developer needs to figure out what to start invalidating
             throw new Exception(v);
             return;
           }
         }
       }
     } else {
       // put in our local object
       this._cache[k] = v;
     }
     // return our newly cached item
     return v;
   },

   /**
      * {String} k - the key
      * {Boolean} local - put this in local storage
      * {Boolean} o - is this an object you want to put in local storage?
      */
   clear: function(k, local, o) {
     if (local && CacheProvider.hasLocalStorage) {
       localStorage.removeItem(k);
     }
     // delete in both caches - doesn't hurt.
     delete this._cache[k];
   }

 };

怎样运用？

留意在这篇文章的开始，就说了Cache Provider 是可选支配的当地存储，起首然让我们看一个没有当地存储的例子：

getElementsByClassName

var cache = new CacheProvider;

 window.getElementsByClassName = getElementsByClassName || function(c) {
   var reg = cache.get(c) || cache.set(c, new RegExp("(?:^|s+)" + c + "(?:s+|$)"));
   var elements = document.getElementsByTagName('*');
   var results = [];
   for (var i = 0; i < elements.length; i++) {
     if (elements[i].className.match(reg)) {
       results.push(elements[i]);
     }
   }
   return results;
 

};

备注：下次你挪用类函数的时辰， 将会用预先编译好的正则表达式更换够制作一个表达式。


（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!