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 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
js实现数字滚动特效
Dec 16 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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
php实现将Session写入数据库
2015/07/26 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
PHP重载基础知识回顾
2020/09/10 PHP
JavaScript调试工具汇总
2014/12/23 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
JS实现进度条动态加载特效
2020/03/25 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
python requests 使用快速入门
2017/08/31 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
python网络应用开发知识点浅析
2019/05/28 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
python中xlutils库用法浅析
2020/12/29 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
文秘专业应届生求职信范文
2013/11/14 职场文书
高中自我评价分享
2013/12/05 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书