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 相关文章推荐
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
理解javascript异步编程
Jan 27 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
jQuery冲突问题解决方法
Jan 19 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
PHP文件操作实现代码分享
2011/09/01 PHP
PHP中的use关键字概述
2014/07/23 PHP
Linux中为php配置伪静态
2014/12/17 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
法学毕业生自我鉴定
2014/01/31 职场文书
保护环境建议书100字
2014/05/13 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
小学生差生评语
2014/12/29 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
Python实战之OpenCV实现猫脸检测
2021/06/26 Python