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 didnt know, you can only store strings 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 its not a string, then were 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 - doesnt 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; }; 备注:下次你调用类函数的时候, 将会用预先编译好的正则表达式替代够建造一个表达式 。 再举一个例子:比如 对于大的应用程序需要i18n,你可以缓存一个编译好的html字符串进入本地存储中 。 复制代码 代码如下: var i18nCache = new CacheProvider; if (i18nCache.get(topnav)) { $(#nav).html(i18nCache.get(topnav)); } else { ajax(top-nav.tmpl, function(html) { i18nCache.set(topnav, html); $(#nav).html(i18nCache.get(topnav)); }); } 除此之外,你开可以做很多外部资源缓存到本地的事情,加油:) |