JS `Decorator` (Stage 3)：类与方法的注解与增强

各位观众老爷们，下午好！欢迎来到今天的"JS Decorator (Stage 3)：类与方法的注解与增强"专场。今天咱们不整那些虚头巴脑的，直接上干货，聊聊这让人又爱又恨的 Decorator。

开场白：Decorator 是个啥玩意儿？

简单来说，Decorator 就是个“装饰器”，它能像给房子装修一样，在不改变原有代码结构的基础上，给类、方法、属性等“偷偷地”加上一些额外的功能。想象一下，你有一杯白开水（你的代码），Decorator 就是各种口味的糖浆（额外功能），你可以随意加，加多少，加什么口味，都由你说了算。而且，你加糖浆的行为，并不改变白开水本身。

Decorator 的前世今生：为什么需要它？

在 Decorator 出现之前，我们想要给类或者方法增加功能，通常会用原型链、继承、混入 (Mixin) 等等方法。这些方法各有优缺点，但都存在一些问题：

代码可读性下降： 尤其是 Mixin，容易让代码变得混乱，难以追踪功能的来源。
代码复用性不高： 有些功能需要在多个地方使用，但用传统方式实现起来比较繁琐。
侵入性强： 修改了原始类的结构，可能会影响到其他地方的代码。

Decorator 的出现，就是为了解决这些问题。它可以让你以一种更优雅、更声明式的方式来扩展和修改代码。

Decorator 的基本语法：@ 符号的魔力

Decorator 的语法非常简单，就是在要装饰的类、方法、属性等前面加上一个 @ 符号，后面跟上装饰器函数。

@decoratorFunction
class MyClass {
  @methodDecorator
  myMethod() {
    // ...
  }
}

这里的 @decoratorFunction 和 @methodDecorator 就是装饰器。

Decorator 的类型：类装饰器、方法装饰器等等

Decorator 分为几种类型，分别用于装饰不同的目标：

类型	作用	参数	返回值
类装饰器	装饰类，可以修改类的构造函数、原型等。	类的构造函数	修改后的构造函数，或者 `void`（不修改）
方法装饰器	装饰类的方法，可以修改方法的行为。	类的原型对象，方法名，属性描述符	修改后的属性描述符，或者 `void`（不修改）
访问器装饰器	装饰类的 getter/setter，可以修改访问器的行为。	类的原型对象，属性名，属性描述符	修改后的属性描述符，或者 `void`（不修改）
属性装饰器	装饰类的属性，可以修改属性的定义。	类的原型对象，属性名	属性描述符 (返回undefined意味着什么都不做，返回一个属性描述符则会覆盖掉原先的定义)
参数装饰器	装饰方法的参数，可以获取参数的信息。	类的原型对象，方法名，参数索引	`void` (无返回值)

实战演练：各种类型的 Decorator 示例

光说不练假把式，接下来我们通过一些例子来演示各种类型的 Decorator 的用法。

1. 类装饰器：给类添加日志功能

function logClass(constructor) {
  return class extends constructor {
    constructor(...args) {
      console.log(`Creating a new instance of ${constructor.name}`);
      super(...args);
    }
  };
}

@logClass
class MyClass {
  constructor(name) {
    this.name = name;
  }
}

const myInstance = new MyClass("John"); // 输出：Creating a new instance of MyClass

在这个例子中，logClass 是一个类装饰器。它接收类的构造函数作为参数，并返回一个新的构造函数。新的构造函数在创建实例时会打印一条日志，然后再调用原始的构造函数。

2. 方法装饰器：给方法添加计时功能

function measure(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args) {
    const start = performance.now();
    const result = originalMethod.apply(this, args);
    const end = performance.now();
    console.log(`Method ${propertyKey} took ${end - start} milliseconds.`);
    return result;
  };

  return descriptor;
}

class MyClass {
  @measure
  myMethod(count) {
    let sum = 0;
    for (let i = 0; i < count; i++) {
      sum += i;
    }
    return sum;
  }
}

const myInstance = new MyClass();
myInstance.myMethod(1000000); // 输出：Method myMethod took ... milliseconds.

在这个例子中，measure 是一个方法装饰器。它接收类的原型对象、方法名和属性描述符作为参数。它修改了属性描述符，将原始方法替换成一个新的方法。新的方法在执行前后会记录时间，并打印方法的执行时间。

3. 访问器装饰器：验证属性值的合法性

function validate(target, propertyKey, descriptor) {
  const originalSet = descriptor.set;

  descriptor.set = function (value) {
    if (value < 0) {
      throw new Error("Value cannot be negative.");
    }
    originalSet.call(this, value);
  };

  return descriptor;
}

class MyClass {
  private _age: number = 0;

  @validate
  set age(value: number) {
    this._age = value;
  }

  get age() {
    return this._age;
  }
}

const myInstance = new MyClass();
myInstance.age = 25; // 正常
// myInstance.age = -10; // 抛出错误：Value cannot be negative.

在这个例子中，validate 是一个访问器装饰器。它接收类的原型对象、属性名和属性描述符作为参数。它修改了属性描述符，将原始的 setter 替换成一个新的 setter。新的 setter 在设置属性值之前会进行验证，如果值不合法，则抛出错误。

4. 属性装饰器：给属性添加默认值

function defaultValue(value: any) {
  return function (target: any, propertyKey: string) {
    target[propertyKey] = value;
  };
}

class MyClass {
  @defaultValue("Default Value")
  myProperty: string;
}

const myInstance = new MyClass();
console.log(myInstance.myProperty); // 输出：Default Value

在这个例子中，defaultValue 是一个属性装饰器。它接收一个默认值作为参数，并返回一个装饰器函数。这个装饰器函数接收类的原型对象和属性名作为参数，并将属性值设置为默认值。

5. 参数装饰器：记录参数信息

const parameterMetadataKey = Symbol("parameterMetadata");

function logParameter(target: any, propertyKey: string | symbol, parameterIndex: number) {
  let existingParameters: number[] = Reflect.getOwnMetadata(parameterMetadataKey, target, propertyKey) || [];
  existingParameters.push(parameterIndex);
  Reflect.defineMetadata(parameterMetadataKey, existingParameters, target, propertyKey);
}

function showParameters(target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor) {
  const method = descriptor.value;

  descriptor.value = function (...args: any[]) {
    const parameterIndices: number[] = Reflect.getOwnMetadata(parameterMetadataKey, target, propertyKey) || [];
    if (parameterIndices.length) {
      console.log(`Method ${propertyKey} has parameters at indices: ${parameterIndices.join(", ")}`);
      for (const index of parameterIndices) {
        console.log(`  Parameter at index ${index} is: ${args[index]}`);
      }
    } else {
      console.log(`Method ${propertyKey} has no decorated parameters.`);
    }
    return method.apply(this, args);
  };
}

class MyClass {
  @showParameters
  myMethod(@logParameter param1: string, param2: number) {
    console.log(`param1: ${param1}, param2: ${param2}`);
  }
}

const myInstance = new MyClass();
myInstance.myMethod("Hello", 123);
// 输出:
// Method myMethod has parameters at indices: 0
//   Parameter at index 0 is: Hello
// param1: Hello, param2: 123

在这个例子中，logParameter 是一个参数装饰器，showParameters 是一个方法装饰器。 logParameter用于标记哪个参数被装饰了。showParameters方法装饰器在调用方法之前，会读取被装饰的参数的索引和值，并打印出来。这个例子依赖 reflect-metadata，需要在项目中安装 npm install reflect-metadata --save，并在代码中引入 import "reflect-metadata";。

Decorator 的高级用法：组合、工厂函数、元数据

除了基本的用法，Decorator 还有一些高级的用法，可以让你更灵活地使用它。

组合 Decorator： 可以将多个 Decorator 应用到一个目标上，实现更复杂的功能。
工厂函数： 可以创建带参数的 Decorator，实现更灵活的配置。
元数据： 可以使用 reflect-metadata 库来存储和读取 Decorator 的元数据，实现更强大的功能。

1. 组合 Decorator

function log(target, propertyKey, descriptor) {
  console.log(`Logging method: ${propertyKey}`);
  return descriptor;
}

function authorize(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args) {
    console.log("Checking authorization...");
    // 假设这里有一些授权逻辑
    if (true) { // 假设授权通过
      return originalMethod.apply(this, args);
    } else {
      console.log("Authorization failed!");
      return null;
    }
  };
  return descriptor;
}

class MyService {
  @log
  @authorize
  getData() {
    console.log("Fetching data...");
    return "Some data";
  }
}

const service = new MyService();
service.getData();
// 输出:
// Logging method: getData
// Checking authorization...
// Fetching data...

在这个例子中，getData 方法同时使用了 log 和 authorize 两个装饰器。执行顺序是从下往上，先执行 authorize，再执行 log。

2. 工厂函数：创建带参数的 Decorator

function setProperty(key: string, value: any) {
  return function (target: any) {
    target[key] = value;
  };
}

@setProperty('version', '1.0.0')
class MyClass {
  constructor() {
    console.log(`Version: ${MyClass['version']}`);
  }
}

new MyClass(); // 输出: Version: 1.0.0

在这个例子中，setProperty 是一个工厂函数，它接收一个 key 和一个 value 作为参数，并返回一个装饰器函数。这个装饰器函数会将类的 key 属性设置为 value。

3. 使用元数据：reflect-metadata

import "reflect-metadata";

const requiredMetadataKey = Symbol("required");

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 validate(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  let method = descriptor.value!;

  descriptor.value = function (...args: any[]) {
    let requiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyName) || [];
    if (requiredParameters) {
      for (let parameterIndex of requiredParameters) {
        if (args[parameterIndex] === null || args[parameterIndex] === undefined) {
          throw new Error(`Missing required argument at index ${parameterIndex}`);
        }
      }
    }

    return method.apply(this, args);
  };
}

class Form {
  submit(@required name: string, @required email: string) {
    console.log(`Submitting form with name: ${name} and email: ${email}`);
  }
}

const form = new Form();

try {
  form.submit("John Doe", undefined);
} catch (error) {
  console.error(error.message);  // 输出: Missing required argument at index 1
}

form.submit("John Doe", "[email protected]"); // 输出: Submitting form with name: John Doe and email: [email protected]

在这个例子中，required 是一个参数装饰器，用于标记哪些参数是必须的。 validate 是一个方法装饰器，用于验证方法的参数是否都已提供。 reflect-metadata 用于存储和读取参数的元数据。

Decorator 的优缺点：不是银弹

Decorator 虽然很强大，但也不是万能的。它有优点，也有缺点。

优点：

代码可读性高： 使用 Decorator 可以让代码更清晰、更易于理解。
代码复用性高： 可以将通用的功能封装成 Decorator，在多个地方复用。
非侵入性： Decorator 不会修改原始类的结构，降低了代码的耦合性。
声明式编程： 可以用更声明式的方式来描述代码的行为。

缺点：

学习成本高： 需要学习 Decorator 的语法和用法。
调试困难： Decorator 可能会使代码的调试变得更加困难。
过度使用： 过度使用 Decorator 可能会使代码变得过于复杂。
兼容性问题： 虽然 Stage 3 已经很稳定了，但还是需要注意编译器的支持情况。

最佳实践：如何正确地使用 Decorator

不要滥用： 只在必要的时候使用 Decorator。
保持简单： Decorator 的功能应该尽可能简单。
编写清晰的文档： 应该为 Decorator 编写清晰的文档，说明其功能和用法。
进行充分的测试： 应该对使用 Decorator 的代码进行充分的测试。
了解编译器的支持情况： 确保你的编译器支持 Decorator。

总结：Decorator 的未来

Decorator 是一种强大的工具，可以让你以一种更优雅、更声明式的方式来扩展和修改代码。随着 JavaScript 的不断发展，Decorator 的应用场景也会越来越广泛。掌握 Decorator 的使用，可以让你写出更优雅、更可维护的代码。

今天的讲座就到这里，感谢各位的观看！祝大家编程愉快！

发表回复 取消回复

发表回复取消回复