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 相关文章推荐
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
JSON 数据格式介绍
Jan 13 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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 swoft框架实例用法
2020/12/22 PHP
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python中暂存上传图片的方法
2015/02/18 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
解析Python中的异常处理
2015/04/28 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
使用python编写监听端
2018/04/12 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python实现KNN分类算法
2019/10/16 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
10条PHP编程习惯
2014/05/26 面试题
小学教师师德演讲稿
2014/05/06 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
法语专业求职信
2014/07/20 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
生日答谢词
2015/01/05 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
婚育证明格式
2015/06/17 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL