一种angular的方法级的缓存注解(装饰器)


Posted in Javascript onMarch 13, 2018

使用es6中装装饰器能做很多事情,今天分享一种在angular使用装饰器进行方法调用缓存的功能。

应用场景是这样的,在前端工作中,会有一些经常使用的方法经常被调用,但是这些方法每次调用都会占用很多的资源,比如网络请求,数据统计功能,这些方法一般会随着函数调用传参的不同返回的结果不同。

因为使用过spring中的cache功能,感觉es中如果有spring cacheable注解就好了,在spring中注解使用如下:

@Cacheable(value="'accountCache_'+#userName")// 缓存名叫 accountCache_USERNAME  
public Account getAccountByName(String userName) {  
// @@@@
return acount;  
}

spring中的缓存时间是在配置文件中配置的,但是在前端一般我们需要针对不同的函数设置不同的缓存时间
因此 需要每次指定相应的缓存时间

@cacheable(111)
getSecondLeftMenu(topMenuId: number){
return 1111;
}

于是我搞了一个支持 返回是Promise对象的缓存注解

export function cacheable(timeout:number) {
  return function (target: any, key: string, descriptor: any) {
     const originalMethod = descriptor.value;
     descriptor.value = function (...args: any[]) {
//把传入的参数和被调的函数名一起组成存储的主键
       const paramStr = args.map(a => JSON.stringify(a)).join();
       const keyStr=key+"start$$"+(paramStr||"")+"-$$end";
       let resultStr=localStorage.getItem(keyStr);
       if (!!resultStr) {
         let resultValue=JSON.parse(resultStr);
          let now=new Date() as any;
//把缓存时的时间和当前的时间进行对比,如果没有超时,则直接返回
          let old2=(new Date(resultValue.date)) as any;
          let delt=now - old2;
          if (delt<(timeout*1000)) {
            return Promise.resolve(resultValue.value);
          }
       }
//超时时,调用原方法,并记录返回结果,这里我们的返回均是promise对象
       var result = originalMethod.apply(this, args);
       result.then(data=>{
        let dd={
          date:new Date(),
          value:data
        }
        localStorage.setItem(keyStr,JSON.stringify(dd))
        return Promise.resolve(data);
       },data=>{
        return Promise.reject(data);
       })
       return result;
     }
     return descriptor;
    }
}

上述的代码中,我们重点实现了返回值是Promise对象的函数,因为在前端工作中,最占用资源和需要缓存的是网络请求,而且也极易影响用户的体验,因此我们重点关心了返回值是Promise的注解。

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

Javascript 相关文章推荐
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 #Javascript
解决vue多个路由共用一个页面的问题
Mar 12 #Javascript
angular5 httpclient的示例实战
Mar 12 #Javascript
vue 简单自动补全的输入框的示例
Mar 12 #Javascript
webpack打包js的方法
Mar 12 #Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 #Javascript
vue路由懒加载的实现方法
Mar 12 #Javascript
You might like
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
第五章 php数组操作
2011/12/30 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
Joomla开启SEF的方法
2016/05/04 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
学习jQuey中的return false
2015/12/18 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python 批量修改/替换数据的实例
2018/07/25 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
python+opencv实现车道线检测
2021/02/19 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
高中军训感言1000字
2014/03/01 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB