JS装饰器模式

JavaScript014

JS装饰器模式,第1张

装饰class

装饰方法

可以使用开源库来实现常用装饰器

三、体现设计原则

1. 将现有对象和装饰器进行分离,两者独立存在

2. 符合开放封闭原则

装饰器在angular中大量使用,有必要单独拎出来说一下。

装饰器顾名思义,就是装饰用的,装饰什么呢?

主要是类、属性和方法。

顾名思义,就是装饰类的属性的。

比如有个用户名属性username,我希望在模板打印时,前面自动加上"我的名字叫jack"。

大家想想,如果不用装饰器我们应该如何来做呢?

其实也很简单,声明一个函数,将属性传入进去处理一下就可以了对吧?

装饰器其实就是这样的函数,它会接收目标参数,然后处理完成后返回。

这里我声明了@attrDecorate()这个装饰器,这里并不需要额外传参,因此形参传空就行。

装饰器其实很简单,就是导出一个函数。

attrDecorate.js:

我们要注意一下装饰器返回的内函数,形参其实跟Object.defineProperty的形参是一致的:

第一个函数是目标对象,

第二个参数是属性信息,

第三个是属性描述符。

但属性装饰器的话,描述符是空的。

这里对del()方法进行装饰:

classDecorate.js:

之前学的组件通信,@Input()和@Output()都是属性装饰器,子组件需要对传递过来的信息进行加工处理,而@Component是类装饰器,需要对当前类进行加工,将名称、模板、样式等信息注入到类里面进去,现在看看是不是就很清楚了。