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的执行效率一些方法总结
Dec 25 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
jquery中radio checked问题
Mar 16 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
vue视频播放暂停代码
Nov 08 Javascript
js通过canvas生成图片缩略图
Oct 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使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
python使用pil生成图片验证码的方法
2015/05/08 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
wxpython布局的实现方法
2019/11/01 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
合同专员岗位职责
2013/12/18 职场文书
学期自我评价
2014/01/27 职场文书
《散步》教学反思
2014/03/02 职场文书
公司新年寄语
2014/04/04 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
创业计划书之花店
2019/09/20 职场文书
Python数据类型最全知识总结
2021/05/31 Python