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中Ajax 缓存带来的影响的解决方法
May 19 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
js单例模式的两种方案
Oct 22 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 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隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
Javascript中的String对象详谈
2014/03/03 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
js电话号码验证方法
2015/09/28 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
如何利用python读取micaps文件详解
2020/10/18 Python
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
爱国卫生月实施方案
2014/02/21 职场文书
三八节主持词
2014/03/17 职场文书
党组织公开承诺书
2014/03/29 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书