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 相关文章推荐
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
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
php中对2个数组相加的函数
2011/06/24 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
js的回调函数详解
2015/01/05 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
JS实现多功能计算器
2020/10/28 Javascript
使用python分析git log日志示例
2014/02/27 Python
python中的sort方法使用详解
2014/07/25 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
Python的历史与优缺点整理
2020/05/26 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
EJB实例的生命周期
2016/10/28 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
英文请假条
2014/04/11 职场文书
冰雪公主观后感
2015/06/16 职场文书
在校证明模板
2015/06/17 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL