一种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 相关文章推荐
javascript 有用的脚本函数
May 07 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
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
第六章 php目录与文件操作
2011/12/30 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python使用wxPython实现计算器
2018/01/30 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
德国足球商店:OUTFITTER
2019/05/06 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
护理不良事件检讨书
2014/02/06 职场文书
三八妇女节活动总结
2014/05/04 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python
box-shadow单边阴影的实现
2023/05/21 HTML / CSS