AngularJS中的缓存使用


Posted in Javascript onJanuary 11, 2017

缓存篇

一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复,消耗时间。因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多。

$cacheFactory与缓存对象

$cacheFactory是一个为Angular服务生产缓存对象的服务。要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity。其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量。举个生动的例子,$cacheFactory就是包租婆,她有一栋楼,里面有大大小小的房子可以出租,只要你给够钱,包租婆就会把房子租给你(获得缓存对象),这个房子包括了它的房号(ID)和房间的大小(capacity-容量)。

var myCache = $cacheFactory('myCache');

其中,缓存对象拥有以下几种方法

1. myCache.info() 返回缓存对象的ID,尺寸和选项

2. myCache.put() 新值键值对并放入缓存对象中 myCache.put("name", "Ben")

3. myCache.get() 返回对应的缓存值,若没有找到则返回undefined myCache.get("name")

4. myCache.remove() 把键值对从对应缓存对象中移除 myCache.remove("name")

5. myCache.remvoeAll() 清空该缓存对象

$http中的缓存

$http()方法允许我们传递一个cache参数。当数据不会经常改变的时候,默认的$http缓存会特别有用。其中,默认的$http缓存对象是 var cache = $cacheFactory('$http'); 可以这样设置它

$http({
   method: 'GET',
   url: 'api/user.json',
   cache: true
})

其中,缓存的键值为url, var userCache = cache.get('api/user.json')

自定义缓存

通过自定义的缓存来让$http发起请求也很简单,只需把cache值设为对应缓存对象名称即可

$http({
   method: 'GET',
   url: 'api/user.json',
   cache: myCache
})

或者通过config配置来设置每个$http请求的缓存对象,而不必像上面的例子中,往每一个$http请求中加入配置

app.config(function($httpProvider){
$httpProvider.defaults.cache = $cacheFactory('myCache',{capacity: 20})

其中,capacity会使用"近期缓存最久未使用算法",就是说,加如缓存容量为20,现在已经缓存了缓存20个,当第21个想要被缓存的时候,最久最小未被使用的缓存键值对会被清除,以便腾出空间容纳第21个缓存。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
常用的 JS 排序算法 整理版
Apr 05 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
AngularJS中的按需加载ocLazyLoad示例
Jan 11 #Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 #Javascript
JavaScript实现大图轮播效果
Jan 11 #Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 #Javascript
canvas 弹幕效果(实例分享)
Jan 11 #Javascript
JQuery实现动态操作表格
Jan 11 #Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 #Javascript
You might like
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
js实现小星星游戏
2020/03/23 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
Python3.6正式版新特性预览
2016/12/15 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
综艺节目策划方案
2014/06/13 职场文书
捐助倡议书
2015/01/19 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
Python读取和写入Excel数据
2022/04/20 Python