Decorators,装饰器的意思,它作用的对象是一个类或者其属性方法,在不改变原有功能的基础上,增强其功能。语法非常简单,就是在类或者其属性方法前面加上@decorator,decorator 指的是装饰器的名称。装饰器本身是一个函数,因为在函数内部,我们可以进行任意的操作从而对其进行增强。

但是它并不能直接使用,需要借助babel功能,它有一个核心插件:babel-plugin-transform-decorators-legacy,下面就介绍下简单用法。

环境配置

1.新建一个文件夹,npm init -y 初始化项目

2.安装各种依赖:npm install webpack webpack-cli webpack-dev-server babel-core babel-loader@7 babel-plugin-transform-decorators-legacy --save-dev。

3.新建webpack.config.js文件:

4.新建index.html:

5.新建index.js,首先可以随便写点什么东西,但是一定要有这个文件。

6.在package.json中配置启动命令(下面的start):

最后完成的项目结构如下:

7.npm run start启动项目。如果正常,没有报错的话,访问http://localhost:8080/即可访问。

基本用法

首先我们先看一个最简单的用法:

上面的@color是一个装饰者,和color方法是对应的,它写在class Car{}的上面,也就是说要给Car这个类增加一个color的属性;color方法中的target就是类或者对象,这里指的是Car这个类,因此Car.color的结果是'red'。

还有一种是可以传递参数的装饰者:

这种就是返回一个闭包,闭包的参数为target,target就是需要增加方法/属性的对象或者类。当然,正常见到的写法都是简化版:

复杂一点用法

我们实现一个简单的@readonly的装饰者:

这种装饰者比上面那种麻烦些,看看三个参数代表的啥:

@readonly的作用是让实例的该方法变的不可修改,我们可以看到上面的demo中,我们在实例中重新定义了方法,但是却并没有受到影响。

再看一个@log的用法:

这个就是记录调用的方法,每次调用都会打印。

core-decorators.js

core-decorators.js里面包含了一些基本常用的装饰者,具体的可以自行参照官网。这里讲一些常见的方法。

@autobind:将类中方法的this变成实例,作用如:this.abc=this.abc.bind(this)。

@mixin:将对象的方法混入class中。

@override:检查子类方法是否有覆盖父类方法。

@decorate:可以放方法用上例如lodash里面的方法。

多个装饰者

多个修饰器的执行顺序是由外向内进入;再由内向外执行。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字