Vue框架TypeScript装饰器使用指南小结


Posted in Javascript onFebruary 18, 2019

前言

装饰器是一种特殊类型的声明,它能够被附加到 类声明,方法, 访问符,属性或参数 上。 装饰器使用 @expression这种形式, expression求值 后必须为一个函数,它会在 运行时被调用 ,被装饰的声明信息做为参数传入。

本篇先从项目的宏观角度来总结一下Decorator如何组织。

目录

  • 主要的Decorator依赖
    • vue-class-component
    • vuex-class
    • vue-property-decorator
    • core-decorators
  • 自定义Decorator示例
  • 哪些功能适合用Decorator实现
  • Decorator实现小Tips
  • See also

主要的Decorator依赖

vue-cli3 默认支持Decorator, 年初重写了一个design库主要依赖官方和社区提供的Decorator来实现的组件。 Decorator可以非侵入的装饰类、方法、属性,解耦业务逻辑和辅助功能逻辑。以下是主要的三方Decorator组件:

vue-class-component

  • @Component 如果您在声明组件时更喜欢基于类的 API,则可以使用官方维护的 vue-class-component 装饰器
  • 实时计算computed属性, get computedMsg () {return 'computed ' + this.msg}
  • 生命周期钩子 mounted () {this.greet()}

vuex-class

让Vuex和Vue之间的绑定更清晰和可拓展

  • @State
  • @Getter
  • @Action
  • @Mutation

vue-property-decorator

这个组件完全依赖于vue-class-component.它具备以下几个属性:

  • @Component (完全继承于vue-class-component)
  • @Prop:父子组件之间值的传递
  • @Emit:子组件向父组件传递
  • @Model:双向绑定
  • @Watch:观察的表达式变动
  • @Provice:在组件嵌套层级过深时。父组件不便于向子组件传递数据。就把数据通过Provide传递下去。
  • @Inject:然后子组件通过Inject来获取
  • Mixins (在vue-class-component中定义);

core-decorators

  • @readonly
  • @autobind : TSX 回调函数中的 this,类的方法默认是不会绑定 this 的,可以使用autobind装饰器
  • @override

总结一下主要就分成这三类:

  • 修饰类的:@Component、@autobind;
  • 修饰方法的:@Emit、@Watch、@readonly、@override;
  • 修饰属性的:@Prop、@readonly;

以上引用方法等详系内容可查看官方文档。下面自定义部分来实现一个记录日志功能的装饰器。

自定义Decorator示例

@Logger,Logger日志装饰器通常是修饰方法,Decorater则是在 运行时就被触发了 ,日志记录是在 方法被调用时触发 ,示例中通过自动发布事件实现调用时触发。为增加日志记录的灵活性,需要通过暴露钩子函数的方式来改变日志记录的内容。
期望的日志格式

{
  "logId":"", // 事件Id
  "input":"", // 方法输入的内容
  "output":"", // 方法输出的内容
  "custom":"" // 自定义的日志内容
}

实现

export function Logger(logId?: string, hander?: Function) {
  const loggerInfo =Object.seal({logId:logId, input:'',output:'', custom: ''});
  const channelName = '__logger';
  const msgChannel = postal.channel(channelName);
  msgChannel.subscribe(logId, logData => {
    // 根据业务逻辑来处理日志
    console.log(logData);
  });

  return function (target: any,
    key: string,
    descriptor: TypedPropertyDescriptor<any>): TypedPropertyDescriptor<any> {
      const oldValue = descriptor.value
      descriptor.value = function () {
        const args: Array<any> = [];
        for (let index in arguments) {
        args.push(arguments[index]);
        }
        loggerInfo.input = `${key}(${args.join(',')})`;
        // 执行原方法
        const value = oldValue.apply(this, arguments);
        loggerInfo.output = value;
        hander && (loggerInfo.custom = hander(loggerInfo.input, loggerInfo.output) || '');
        // 被调用时,会自动发出一个事件
        msgChannel.publish(logId, loggerInfo);
      }
      return descriptor
  }
}

使用

@Logger('event_get_detial1')
getDetial(id?: string, category?: string) {
  return "详细内容";
}
// 或者
@Logger('event_get_detial2', (input, output) => {
    return '我是自定义内容';
})
getDetial2(id?: string, category?: string) {
  return "详细内容";
}
...
<button @click="getDetial2('1000', 'a')">获取详情</button>

效果: {logId: "event_get_detial2", input: "getDetial(1000,a)", output: "详细内容", custom: "我是自定义内容"} , 每次点击按钮都会触发一次。

TODO: 这里还需要对输入参数和输出参数中的引用数据类型做处理。

同时还需要掌握: 装饰器工厂、装饰器组合、装饰器求值、参数装饰器、元数据

哪些功能适合用Decorator实现

官网和社区提供的这些Decorator, 可以作为自己框架的底层设计。

日志功能全局都得用,调用方法基本一致,是最适合使用装饰器来实现,并且每个项目的日志记录各有差异,最适合自定义这部分。

Decorator实现小Tips

  • 考虑下各类Decorator叠加和共存的问题,可以参考官网关于装饰器组合描述
  • Decorator 的目标是在原有功能基础上,添加功能,切忌覆盖原有功能
  • 类装饰器不能用在声明文件中( .d.ts),也不能用在任何外部上下文中(比如declare的类)
  • 装饰器只能用于类和类的方法,不能用于函数,因为存在函数提升。类是不会提升的,所以就没有这方面的问题。
  • 注意迁移速度、避免一口吃成胖子的做法
  • 不要另起炉灶对主流库创建Decorator库,主流库维护成本很高还是得有官方来维护,为保证质量不使用个人编写的Decorator库。自己在创建Decorator库时也要有这个意识,仅做一些有必要自定义的。
  • Decorator 不是管道模式,decorator之间不存在交互,所以必须注意保持decorator独立性、透明性
  • Decorator 更适用于非业务功能需求
  • 确定 decorator 的用途后,切记执行判断参数类型
  • decorator 针对每个装饰目标,仅执行一次

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

Javascript 相关文章推荐
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
深入理解vue-class-component源码阅读
Feb 18 #Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 #Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 #jQuery
详解ES7 Decorator 入门解析
Feb 18 #Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 #jQuery
详解关于微信setData回调函数中的坑
Feb 18 #Javascript
jQuery实现的五星点评功能【案例】
Feb 18 #jQuery
You might like
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
JS实现div模块的截图并下载功能
2017/10/17 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
Python执行时间的计算方法小结
2017/03/17 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
学校工作推荐信范文
2014/07/11 职场文书
通信工程求职信
2014/07/16 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
投资申请报告
2015/05/19 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby