es7 class装饰器

时间:2022-03-23 01:45:22

文档http://es6.ruanyifeng.com/#docs/decorator

ts文档 https://www.tslang.cn/docs/handbook/decorators.html#class-decorators

当多个装饰器应用于一个声明上,从上至下调用,从下而上执行

function info(opt: {
username: string;
age: number;
email: string;
}) {
return function (klass: any) {
klass.username = opt.username;
klass.age = opt.age;
klass.email = opt.email;
}
} @info({
username: 'ajanuw',
age: 14,
email: '123@sina.com'
})
class Ajanuw {
constructor() { }
}
const klass = (<any>Ajanuw);
console.log(klass.username, klass.age, klass.email);

es 的装饰器

let l = console.log

function klass(value) {
return target => {
// l(value) // api
// l(target) // 对象
}
} function prop(value) {
return function (target, key, des) { // target 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象
// l(value) // username
// l(target, key, des) // 对象,属性名,属性描述符
}
} function func(value) {
return function (target, key, des) { // target 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象
// l(value) // function
// l(key) // 函数名 show
// l(des.value) // show函数, 可以改写
// des.value = function(){
// l('hello')
// }
}
} function Body(target) {
// l( target ) // undefined
} @klass('api')
class Ajanuw {
@prop('username') name = 'ajanuw' @func('function')
show(@Body body) {
l(body)
}
} new Ajanuw().show()

重载构造函数

function classDecorator<T extends { new (...args: any[]): {} }>(
constructor: T
) {
return class extends constructor {
newProperty = "new property";
hello = "override";
};
} @classDecorator
class Greeter {
constructor(public hello: string) {}
}
var g = new Greeter("world");
console.log(g.hello); // override

参数装饰器

import "reflect-metadata";

const requiredMetadataKey = Symbol("required");
const bodyMetadataKey = Symbol("body"); function required(
target: Object,
propertyKey: string | symbol,
parameterIndex: number
) {
let existingRequiredParameters: number[] =
Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
existingRequiredParameters.push(parameterIndex);
Reflect.defineMetadata(
requiredMetadataKey,
existingRequiredParameters,
target,
propertyKey
);
} function Body(key: string): any {
return function (target: any, propertyKey: string, parameterIndex: number) {
let existingRequiredParameters: any[] =
Reflect.getOwnMetadata(bodyMetadataKey, target, propertyKey) || []; existingRequiredParameters.push({ parameterIndex, key }); // 注入元数据
Reflect.defineMetadata(
bodyMetadataKey,
existingRequiredParameters,
target,
propertyKey
);
};
} function validate(
target: any,
propertyName: string,
descriptor: TypedPropertyDescriptor<any>
) {
let method = descriptor.value; // 重写value
descriptor.value = function () {
let requiredParameters: number[] = Reflect.getOwnMetadata(
requiredMetadataKey,
target,
propertyName
); if (requiredParameters) {
for (let parameterIndex of requiredParameters) {
if (
parameterIndex >= arguments.length ||
arguments[parameterIndex] === undefined
) {
throw new Error("Missing required argument.");
}
}
} // 获取目标对象上提供的元数据键的元数据值
Reflect.getOwnMetadata(bodyMetadataKey, target, propertyName)?.forEach(
(it: any) => {
// 重写参数
arguments[it.parameterIndex] = arguments[it.parameterIndex][it.key];
}
); return method?.apply(this, arguments);
};
} class Greeter {
@validate
greet(@required @Body("name") name: any): any {
console.log("Hello " + name); // Hello xxxx
}
} const g = new Greeter();
g.greet({ name: "xxxx" });

es7 class装饰器的更多相关文章

  1. 装饰器模式&&ES7 Decorator 装饰器

    装饰器模式(Decorator Pattern)允许向一个现有的对象动态添加新的功能,同时又不改变其结构.相比JavaScript中通过鸡肋的继承来给对象增加功能来说,装饰器模式相比生成子类更为灵活. ...

  2. koa2使用es7 的装饰器decorator

    本文主要讲述我在做项目中使用装饰器(decorator)来动态加载koa-router的路由的一个基础架构. 目前JavaScript 对decorator 是不支持,但是可以用babel 来编译 既 ...

  3. JS 装饰器,一篇就够

    更多文章,请在Github blog查看 在 ES6 中增加了对类对象的相关定义和操作(比如 class 和 extends ),这就使得我们在多个不同类之间共享或者扩展一些方法或者行为的时候,变得并 ...

  4. 简单理解 ES7 Decorator(装饰器)

    如何使用ES7 Decorator给你的游戏人物开挂? // 预告: 本文有点小难度,对js不太熟的人可能比较懵逼 // 本文的目的是让你们知其然 // ======================= ...

  5. 在express中使用ES7装饰器构建路由

    在Java的Spring框架中,我们经常会看到类似于@Controller这样的注解,这类代码能够极大的提高我们代码的可读性和复用性.而在Javascript的ES7提案中,有一种新的语法叫做deco ...

  6. 从C&num;到TypeScript - 装饰器

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  7. Javascript 装饰器极速指南

    pablo.png Decorators 是ES7中添加的JavaScript新特性.熟悉Typescript的同学应该更早的接触到这个特性,TypeScript早些时候已经支持Decorators的 ...

  8. 【Angular专题】 &lpar;3&rpar;装饰器decorator,一块语法糖

    目录 一. Decorator装饰器 二. Typescript中的装饰器 2.1 类装饰器 2.2 方法装饰器 2.3 访问器装饰器 2.4 属性装饰器 2.5 参数装饰器 三. 用ES5代码模拟装 ...

  9. MobX基础 ----- 类的静态属性和装饰器

    当我们使用MobX的时候,首先要声明一个store, 用来保存状态,它的最基本的语法 如下: class Todo { @observable title = ""; @obser ...

随机推荐

  1. 在github上搭建hexo博客

    准备工作 安装git 系统是win10家庭版,采用git v1.9.5版本,比较简单,一路next直到finsh完成安装. 安装node.js hexo是基于node.js驱动的一款快速.简单且功能强 ...

  2. mysql在linux下不区分大小写

    1.先停止mysql service mysql stop 2.如果用rpm直接安装的mysql,路径在:/usr/下,查找my.cnf. 3.在[mysqld]下添加: lower_case_tab ...

  3. Gvr SDK for Unity 分析&lpar;二&rpar;

    前言 关于google vr sdk的具体使用,传送门 Gvr SDK for Unity 分析(一) Google Daydream平台已经整合进Google VR SDK 本文环境:Unity5. ...

  4. django-cms 代码研究(五)深入(代码结构)

    前言: 前戏已经做得比较充分了,下面我们开始步入正题. 代码结构: cms |--admin (猜测是admin界面的二次开发和改良) |--cache (猜测是缓存机制的处理) |--extensi ...

  5. ORA-12545&colon;因目标主机或对象不存在,连接失败&excl;

    错误原因是配置错误主机名 解决: 1. 搜索你自己安装的Oracle路径,找到这俩个文件 tnsnames.ora 和 listener.ora,修改这两个文件,修改HOST=自己的主机名 我的路径如 ...

  6. 学习Robot Framework必须掌握的库—-BuiltIn库

    作为一门表格语言,为了保持简单的结构,RF没有像别的高级语言那样提供类似if else while等内置关键字来实现各种逻辑功能,而是提供给了用户BuiltIn库.如果用户想在测试用例中实现比较复杂的 ...

  7. 洛谷P3627&lbrack;APOI2009&rsqb; (讨厌的)抢掠计划

    题目描述 Siruseri 城中的道路都是单向的.不同的道路由路口连接.按照法律的规定, 在每个路口都设立了一个 Siruseri 银行的 ATM 取款机.令人奇怪的是,Siruseri 的酒吧也都设 ...

  8. 安装和使用JD-Eclipse插件

    http://www.cnblogs.com/0616--ataozhijia/p/3924411.html http://aniyo.iteye.com/blog/1336622

  9. js常用的数组&comma;&comma;字符串&comma;&comma;Math&period;&period;正则方法

    数组 slice[start,end] 返回从原数组中指定开始下标到结束下标之间的项目组成新数组(不会影响原数组) splice() 1.删除功能:2个参数 , 起始位置 , 删除的项目 2.插入功能 ...

  10. Jedis 之 初始&lt&semi;一&gt&semi;

    package xx.jedis; import java.util.Set; import redis.clients.jedis.Jedis; import redis.clients.jedis ...