各位靓仔靓女，大家好！今天咱们聊点高阶的玩意儿——JS Decorator（装饰器），这可是个能让你的代码瞬间高大上的魔法棒。虽然目前还在 Stage 3 阶段，但各大框架已经开始摩拳擦掌准备拥抱它了。咱们今天就来扒一扒它在框架和库设计中的一些高级应用。
开场白：什么是Decorator？
简单来说，Decorator 就是一个函数，它可以“装饰”类、方法、属性等，在不修改原有代码的基础上，给它们添加额外的功能或行为。就像给你的房子装修，不用拆墙，就能让它焕然一新。
Decorator的基本语法
Decorator 使用 @ 符号开头，放在要装饰的目标之前。比如：
function log(target) {
console.log(`Class: ${target.name}`);
}
@log
class MyClass {
constructor() {
console.log('MyClass constructor');
}
}
// 输出: Class: MyClass
// 输出: MyClass constructor这里的 log 就是一个简单的 Decorator，它接收被装饰的类 MyClass 作为参数，并打印了类的名字。
Decorator的分类
Decorator 主要分为四类：
- 类装饰器（Class Decorator）： 装饰整个类。
- 方法装饰器（Method Decorator）： 装饰类中的方法。
- 访问器装饰器（Accessor Decorator）： 装饰类中的 getter 或 setter。
- 属性装饰器（Property Decorator）： 装饰类中的属性。
Decorator的参数
不同的 Decorator 类型接收的参数也不同：
| Decorator 类型 | 参数 | 说明 =================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================
类装饰器
类装饰器可以用来做很多事情，比如：
- 修改类的行为： 例如，给类添加一些额外的属性或方法。
- 修改类的定义： 例如，修改类的原型链。
- 直接修改类的属性： 例如，设置类的默认属性。
下面是一个例子，展示如何使用类装饰器来记录类的创建时间：
function logClassCreation(target) {
target.createdAt = new Date();
console.log(`${target.name} created at ${target.createdAt}`);
}
@logClassCreation
class MyComponent {
constructor() {
console.log('MyComponent constructor');
}
}
// 输出: MyComponent created at Fri Aug 04 2023 10:00:00 GMT+0800 (China Standard Time)
// 输出: MyComponent constructor
console.log(MyComponent.createdAt); // Fri Aug 04 2023 10:00:00 GMT+0800 (China Standard Time)在这个例子中，logClassCreation 装饰器给 MyComponent 类添加了一个 createdAt 属性，并记录了类的创建时间。
方法装饰器
方法装饰器可以用来做：
- 修改方法的行为： 例如，添加日志、性能监控、权限验证等。
- 替换方法： 例如，使用缓存结果替换原方法。
- 修改方法的描述符： 例如，修改方法的
enumerable、configurable、writable属性。
方法装饰器接收三个参数：
target: 如果是静态方法，则是类的构造函数；如果是实例方法，则是类的原型对象。propertyKey: 方法的名字。descriptor: 方法的属性描述符。
下面是一个例子，展示如何使用方法装饰器来记录方法的执行时间：
function logMethodExecutionTime(target, propertyKey, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
const startTime = Date.now();
const result = originalMethod.apply(this, args);
const endTime = Date.now();
console.log(`${propertyKey} took ${endTime - startTime}ms to execute`);
return result;
};
return descriptor;
}
class Calculator {
@logMethodExecutionTime
add(a, b) {
let sum = 0;
for(let i = 0; i < 1000000; i++){
sum += i;
}
return a + b + sum;
}
}
const calculator = new Calculator();
calculator.add(1, 2); // 输出: add took Xms to execute在这个例子中，logMethodExecutionTime 装饰器修改了 add 方法的描述符，替换了原来的方法。新的方法在执行前后记录时间，并打印执行时间。
访问器装饰器
访问器装饰器类似于方法装饰器，但是它们用于装饰类的 getter 和 setter。它们接收的参数和方法装饰器相同。
下面是一个例子，展示如何使用访问器装饰器来验证 setter 的输入：
function validateAge(target, propertyKey, descriptor) {
const originalSet = descriptor.set;
descriptor.set = function (value) {
if (value < 0 || value > 150) {
throw new Error('Invalid age');
}
originalSet.call(this, value);
};
return descriptor;
}
class Person {
private _age: number;
constructor(age: number) {
this._age = age;
}
get age() {
return this._age;
}
@validateAge
set age(value: number) {
this._age = value;
}
}
const person = new Person(25);
person.age = 30; // OK
// person.age = -10; // Error: Invalid age在这个例子中，validateAge 装饰器验证了 age setter 的输入，如果输入不合法，则抛出错误。
属性装饰器
属性装饰器可以用来：
- 修改属性的描述符： 例如，设置属性的默认值、添加验证逻辑等。
- 替换属性： 例如，使用计算属性替换原属性。
属性装饰器接收两个参数：
target: 如果是静态属性，则是类的构造函数；如果是实例属性，则是类的原型对象。propertyKey: 属性的名字。
下面是一个例子，展示如何使用属性装饰器来设置属性的默认值：
function defaultValue(value: any) {
return function(target: any, propertyKey: string) {
target[propertyKey] = value;
}
}
class MyClass {
@defaultValue('default value')
myProperty: string;
}
const instance = new MyClass();
console.log(instance.myProperty); // 输出: default value在这个例子中，defaultValue 装饰器给 myProperty 属性设置了默认值 'default value'。
Decorator 在框架和库设计中的高级应用
现在，让我们来看看 Decorator 在框架和库设计中的一些高级应用：
- 依赖注入（Dependency Injection）
依赖注入是一种设计模式，它可以降低组件之间的耦合度。Decorator 可以用来简化依赖注入的实现。
// 模拟一个简单的 DI 容器
class Container {
private dependencies: Map<string, any> = new Map();
register(name: string, dependency: any) {
this.dependencies.set(name, dependency);
}
resolve<T>(name: string): T {
const dependency = this.dependencies.get(name);
if (!dependency) {
throw new Error(`Dependency ${name} not found`);
}
return dependency;
}
}
const container = new Container();
// 定义一个 Inject 装饰器
function Inject(name: string) {
return function (target: any, propertyKey: string) {
Object.defineProperty(target, propertyKey, {
get: () => container.resolve(name),
enumerable: true,
configurable: true,
});
};
}
// 注册依赖
container.register('logger', { log: (message: string) => console.log(`[LOG]: ${message}`) });
// 使用 Inject 装饰器
class MyService {
@Inject('logger')
logger: { log: (message: string) => void };
doSomething() {
this.logger.log('Doing something...');
}
}
const myService = new MyService();
myService.doSomething(); // 输出: [LOG]: Doing something...在这个例子中，Inject 装饰器负责从 DI 容器中获取依赖，并注入到类的属性中。
- 路由（Routing）
在 Web 框架中，路由负责将 URL 映射到相应的处理函数。Decorator 可以用来简化路由的定义。
// 模拟一个简单的路由框架
class Router {
private routes: Map<string, Function> = new Map();
addRoute(path: string, handler: Function) {
this.routes.set(path, handler);
}
handleRequest(path: string) {
const handler = this.routes.get(path);
if (handler) {
handler();
} else {
console.log(`Route not found for path: ${path}`);
}
}
}
const router = new Router();
// 定义一个 Route 装饰器
function Route(path: string) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
router.addRoute(path, descriptor.value);
};
}
// 使用 Route 装饰器
class MyController {
@Route('/home')
home() {
console.log('Home page');
}
@Route('/about')
about() {
console.log('About page');
}
}
const myController = new MyController();
router.handleRequest('/home'); // 输出: Home page
router.handleRequest('/about'); // 输出: About page
router.handleRequest('/contact'); // 输出: Route not found for path: /contact在这个例子中，Route 装饰器负责将方法注册到路由表中。
- 状态管理（State Management）
在前端框架中，状态管理负责管理应用程序的状态。Decorator 可以用来简化状态的绑定和更新。
// 模拟一个简单的状态管理库
class Store {
private state: any = {};
private listeners: Function[] = [];
getState() {
return this.state;
}
setState(newState: any) {
this.state = { ...this.state, ...newState };
this.listeners.forEach(listener => listener());
}
subscribe(listener: Function) {
this.listeners.push(listener);
return () => {
this.listeners = this.listeners.filter(l => l !== listener);
};
}
}
const store = new Store();
// 定义一个 Connect 装饰器
function Connect(mapStateToProps: (state: any) => any) {
return function (constructor: Function) {
return class extends constructor {
constructor(...args: any[]) {
super(...args);
const updateComponent = () => {
const props = mapStateToProps(store.getState());
Object.assign(this, props);
};
updateComponent(); // 初始更新
store.subscribe(updateComponent); // 订阅状态更新
}
};
};
}
// 使用 Connect 装饰器
@Connect(state => ({ count: state.count }))
class MyComponent {
count: number = 0;
render() {
console.log(`Count: ${this.count}`);
}
}
const myComponent = new MyComponent();
myComponent.render(); // 输出: Count: 0
store.setState({ count: 1 }); // 触发更新
myComponent.render(); // 输出: Count: 1在这个例子中，Connect 装饰器负责将组件连接到状态管理库，并在状态更新时自动更新组件的属性。
- 验证（Validation）
在很多情况下，我们需要验证用户输入的数据是否合法。Decorator 可以用来简化验证逻辑的定义。
// 定义一个 NotEmpty 装饰器
function NotEmpty(message: string = 'Field cannot be empty') {
return function (target: any, propertyKey: string) {
let value: string;
const getter = function () {
return value;
};
const setter = function (newValue: string) {
if (!newValue || newValue.trim() === '') {
throw new Error(`${propertyKey}: ${message}`);
}
value = newValue;
};
Object.defineProperty(target, propertyKey, {
get: getter,
set: setter,
enumerable: true,
configurable: true,
});
};
}
class User {
@NotEmpty()
name: string;
constructor(name: string) {
this.name = name;
}
}
try {
const user = new User(''); // 抛出错误
} catch (error) {
console.error(error.message); // 输出: name: Field cannot be empty
}
const validUser = new User('John Doe');
console.log(validUser.name); // 输出: John Doe在这个例子中，NotEmpty 装饰器验证 name 属性是否为空，如果为空则抛出错误。
- AOP (面向切面编程)
Decorator天生就是AOP的利器。 可以轻松实现日志记录、权限控制、事务管理等横切关注点的功能，而无需修改核心业务逻辑。
// 日志记录切面
function Log(message: string) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`[Log] Before ${propertyKey}: ${message}`);
const result = originalMethod.apply(this, args);
console.log(`[Log] After ${propertyKey}: ${message}`);
return result;
}
return descriptor;
}
}
class ExampleService {
@Log("Executing important task")
importantTask(data: string) {
console.log(`Running important task with data: ${data}`);
return `Task completed with data: ${data}`;
}
}
const service = new ExampleService();
service.importantTask("Some data");
// 输出:
// [Log] Before importantTask: Executing important task
// Running important task with data: Some data
// [Log] After importantTask: Executing important task总结
Decorator 是一种强大的元编程技术，它可以简化代码、提高可读性、并增强代码的可维护性。在框架和库设计中，Decorator 可以用来实现依赖注入、路由、状态管理、验证等功能，从而提高开发效率和代码质量。虽然目前还在Stage 3，但是已经有很多框架开始实验性的使用。 相信在不久的将来，Decorator 将会成为 JavaScript 开发的标配。
注意事项
- 需要使用 TypeScript 或 Babel 等工具来支持 Decorator 语法。
- Decorator 的执行顺序是从下往上，从右往左。
- 过度使用 Decorator 可能会导致代码难以理解，因此需要谨慎使用。
- 装饰器目前还是提案阶段，语法可能会有变化，请关注最新的规范。
希望今天的讲解对你有所帮助。下次见！