在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
之前整理过《Java注解(批注)的基本原理》,在java里面,,注解(Annotation)是油盐,对于JavaScript来说,还中世纪欧洲的东方香料 装饰器和注解装饰器和注解之前也搞不清他们的具体理念,觉得都是基于元编程实现,注解就是装饰模式的一种吧。
注解与装饰器两者之间的联系:通过注解添加元数据,然后在装饰器中获取这些元数据,完成对类、类的方法等等的修改,可以在装饰器中添加元数据的支持,比如可以可以在装饰器工厂函数以及装饰器函数中添加元数据支持等。 注解与装饰器的区别虽然语法上很相似,但在不同的语言中可能使用的是不同的概念:
从概念上来说,我们可以很清晰的看出,注解和装饰器在语义上没有任何共性! 注解和装饰器可以互相模拟,不等同。 装饰器可以天生跑在运行时,注解还要通过反射(拿不到类型本身)
装饰器最为强大的功能之一是它能够反射元数据(reflect metada) 为什么需要在JavaScript中进行反射?反射用于描述能够检查同一系统(或其自身)中的其他代码的代码。 JavaScript应用程序越来越大,所以需要一些工具(如控件容器的反转)和像(运行时类型断言)这样的功能来管理这种日益增加的复杂性。 强大的反射API应该允许我们在运行时检查未知对象并找出有关它的所有内容。我们应该能够找到像这样的东西:
在JavaScript中,我们可以使用Object.getOwnPropertyDescriptor()或Object.keys()等函数来查找有关实体的一些信息,但我们需要反思来实现更强大的开发工具。 但是,事情即将发生变化,因为TypeScript开始支持一些Reflection功能。但实际上它们只是一些 JavaScript 函数,能够帮助我们来注释代码或者是修改代码的行为——这种做法我们通常称为元编程。 TypeScript 装饰器装饰器能够很好的抽象代码,它们最适合用来包装可能会多处复用的逻辑。 五种装饰器的方法
类装饰器 Class Decorator类装饰器使得开发者能够拦截类的构造方法 constructor。 注意:当我们声明一个类时,装饰器就会被调用,而不是等到类实例化的时候。 当你装饰一个类的时候,装饰器并不会对该类的子类生效,让我们来冻结一个类来彻底避免别的程序员不小心忘了这个特性。 @Frozen class IceCream {} function Frozen(constructor: Function) { Object.freeze(constructor); Object.freeze(constructor.prototype); } console.log(Object.isFrozen(IceCream)); // true class FroYo extends IceCream {} // 报错,类不能被扩展 当装饰函数直接修饰类的时候,装饰函数接受唯一的参数constructor,这个参数就是该被修饰类本身。 此外,在修饰类的时候,如果装饰函数有返回值,该返回值会重新定义这个类,也就是说当装饰函数有返回值时,其实是生成了一个新类,该新类通过返回值来定义。 方法装饰器 Method Decorator方法装饰器来覆写一个方法,改变它的执行流程,以及在它执行前后额外运行一些代码。 下面这个例子会在执行真正的代码之前弹出一个确认框。如果用户点击了取消,方法就会被跳过。注意,这里我们装饰了一个方法两次,这两个装饰器会从上到下地执行。 function log(target, key, descriptor) {} class P { @log foo() { console.log('Do something'); } } 对于类的函数的装饰器函数,依次接受的参数为:
属性装饰器 Property Decorator属性装饰器极其有用,因为它可以监听对象状态的变化。 为了充分了解接下来这个例子,建议你先熟悉一下 JavaScript 的属性描述符(PropertyDescriptor)。 function foo(target,name){} class P{ @foo name = 'Jony' } 这里对于类的属性的装饰器函数接受两个参数,
类函数参数的装饰器类函数的参数装饰器可以修饰类的构建函数中的参数,以及类中其他普通函数中的参数。该装饰器在类的方法被调用的时候执行。 function foo(target,key,index){} class P{ test(@foo a){ } } 类函数参数的装饰器函数接受三个参数
装饰器可以起到分离复杂逻辑的功能,且使用上极其简单方便。与继承相比,也更加灵活,可以从装饰类,到装饰类函数的参数,可以说武装到了“牙齿”。 Typescript中的元数据操作可以通过reflect-metadata包来实现对于元数据的操作。首先我们来看reflect-metadata的使用,首先定义使用元数据的函数: const formatMetadataKey = Symbol("format"); function format(formatString: string) { return Reflect.metadata(formatMetadataKey, formatString); } function getFormat(target: any, propertyKey: string) { return Reflect.getMetadata(formatMetadataKey, target, propertyKey); } 这里的format可以作为装饰器函数的工厂函数,因为format函数返回的是一个装饰器函数,上述的方法定义了元数据Sysmbol("format"),用Sysmbol的原因是为了防止元数据中的字段重复,而format定义了取元数据中相应字段的功能。 接着我们来在类中使用相应的元数据: class Greeter { @format("Hello, %s") name: string; constructor(name: string) { this.name = message; } sayHello() { let formatString = getFormat(this, "name"); return formatString.replace("%s", this.name); } } const g = new Greeter("Jony"); console.log(g.sayHello()); 在上述中,我们在name属性的装饰器工厂函数,执行@format("Hello, %s"),返回一个装饰器函数,且该装饰器函数修饰了Greeter类的name属性,将“name”属性的值写入为"Hello, %s"。 然后再sayHello方法中,通过getFormat(this,"name")取到formatString为“Hello,%s”.
参考列表: TypeScript中的装饰器&元数据反射:从新手到专家四 https://zhuanlan.zhihu.com/p/42220487 理解 TypeScript 装饰器 https://zhuanlan.zhihu.com/p/65764702 【认真脸】注解与装饰器的点点滴滴 https://zhuanlan.zhihu.com/p/22277764 聊聊Typescript中的设计模式——装饰器篇(decorators) https://github.com/forthealllight/blog/issues/33
转载本站文章《从java注解漫谈到typescript装饰器——注解与装饰器》, |
请发表评论