装饰方法
可以使用开源库来实现常用装饰器
三、体现设计原则
1. 将现有对象和装饰器进行分离,两者独立存在
2. 符合开放封闭原则
装饰器在angular中大量使用,有必要单独拎出来说一下。装饰器顾名思义,就是装饰用的,装饰什么呢?
主要是类、属性和方法。
顾名思义,就是装饰类的属性的。
比如有个用户名属性username,我希望在模板打印时,前面自动加上"我的名字叫jack"。
大家想想,如果不用装饰器我们应该如何来做呢?
其实也很简单,声明一个函数,将属性传入进去处理一下就可以了对吧?
装饰器其实就是这样的函数,它会接收目标参数,然后处理完成后返回。
这里我声明了@attrDecorate()这个装饰器,这里并不需要额外传参,因此形参传空就行。
装饰器其实很简单,就是导出一个函数。
attrDecorate.js:
我们要注意一下装饰器返回的内函数,形参其实跟Object.defineProperty的形参是一致的:
第一个函数是目标对象,
第二个参数是属性信息,
第三个是属性描述符。
但属性装饰器的话,描述符是空的。
这里对del()方法进行装饰:
classDecorate.js:
之前学的组件通信,@Input()和@Output()都是属性装饰器,子组件需要对传递过来的信息进行加工处理,而@Component是类装饰器,需要对当前类进行加工,将名称、模板、样式等信息注入到类里面进去,现在看看是不是就很清楚了。