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 相关文章推荐
JavaScript Date对象使用总结
May 14 Javascript
jquery 插件学习(一)
Aug 06 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
详解webpack 入门与解析
Apr 09 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 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
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
PHP安全上传图片的方法
2015/03/21 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python中实现的RC4算法
2015/02/14 Python
python字符串,数值计算
2016/10/05 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
Python清空文件并替换内容的实例
2018/10/22 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
浅析Python的命名空间与作用域
2020/11/25 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
德国自行车商店:Tretwerk
2019/06/21 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
小学模范班主任事迹材料
2014/05/13 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
公司应聘求职信
2014/06/21 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
消防隐患整改通知书
2015/04/22 职场文书
《社戏》教学反思
2016/02/22 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang