javascript客户端解决方案 缓存提供程序


Posted in Javascript onJuly 14, 2010

相信每一个开发者都知道缓存的重要性。从头至尾有缓存的后台(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; 
};

备注:下次你调用类函数的时候, 将会用预先编译好的正则表达式替代够建造一个表达式。

再举一个例子:比如 对于大的应用程序需要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')); 
}); 
}

除此之外,你开可以做很多外部资源缓存到本地的事情,加油:)
Javascript 相关文章推荐
强制设为首页代码
Jun 19 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 #Javascript
IE中createElement需要注意的一个问题
Jul 13 #Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 #Javascript
初识javascript 文档碎片
Jul 13 #Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 #Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 #Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 #Javascript
You might like
dedecms模版制作使用方法
2007/04/03 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
php多任务程序实例解析
2014/07/19 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
社会实践单位意见
2015/06/05 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
python获取带有返回值的多线程
2022/05/02 Python