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获取图片的原始尺寸以宽度为例
May 04 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
Vue.js对象转换实例
Jun 07 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
使用vue构建多页面应用的示例
Oct 22 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
改变Apache端口等配置修改方法
2008/06/05 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
解决python报错MemoryError的问题
2018/06/26 Python
Python中字符串与编码示例代码
2019/05/20 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
简单了解Django ContentType内置组件
2019/07/23 Python
Python Pandas 箱线图的实现
2019/07/23 Python
基于FME使用Python过程图解
2020/05/13 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
GWebs公司笔试题
2012/05/04 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
金融事务专业求职信
2014/04/25 职场文书