浅谈javascript中使用装饰器模式的场景

forrest酱
1,930 阅读5分钟

在JavaScript中，不使用装饰器模式的代码可能会面临一些头痛的问题。其中一个常见的问题是难以实现AOP编程，即难以将横切逻辑从业务逻辑中分离出来，从而导致代码重复和冗余。类似地，难以实现日志记录和权限控制也可能是不使用装饰器模式的头痛问题。使用装饰器模式可以解决这些问题，使代码更加清晰、易于维护和扩展。

一、什么是装饰器

装饰器是一种结构型设计模式，它通过动态地将责任附加到对象上来扩展其功能。在装饰器模式中，装饰器对象包装原始对象，并在其上添加了新的行为和责任。这使得装饰器模式非常适用于需要在运行时动态地添加新功能而不改变原始对象的情况。在JavaScript中，装饰器模式常被用于AOP编程、缓存、日志记录和权限控制等方面。

二、使用场景

1. 动态地扩展对象的功能

装饰器模式可以让您在运行时动态地为对象添加新的功能。这是非常有用的，尤其是在您需要扩展对象的功能，但不想改变其原始结构时。例如，您可以使用装饰器模式为一个对象添加新的方法，而不需要修改该对象的原始代码。

function withNewMethod(obj, newMethod) {
  obj[newMethod.name] = newMethod;
  return obj;
}

const myObject = { name: 'John' };

const myDecoratedObject = withNewMethod(myObject, function sayHello() {
  console.log(`Hello, my name is ${this.name}`);
});

myDecoratedObject.sayHello(); // output: "Hello, my name is John"

2. 实现AOP

在JavaScript中，装饰器模式可以用来实现面向切面编程（AOP）。使用装饰器模式，您可以将横切逻辑从业务逻辑中分离出来，从而更好地组织和维护代码。

function withLogging(fn) {
  return function(...args) {
    console.log(`Calling ${fn.name} with arguments: ${args}`);
    const result = fn.apply(this, args);
    console.log(`Result: ${result}`);
    return result;
  }
}

function addNumbers(a, b) {
  return a + b;
}

const addNumbersWithLogging = withLogging(addNumbers);

addNumbersWithLogging(2, 3); // output: "Calling addNumbers with arguments: 2,3" and "Result: 5"

3. 实现缓存逻辑

使用装饰器模式，您可以为函数添加缓存逻辑。这是非常有用的，尤其是在您需要优化函数的性能时。例如，您可以使用装饰器模式为函数添加缓存逻辑，以避免重复计算相同的结果。

function withMemoization(fn) {
  const cache = new Map();
  return function(...args) {
    const cacheKey = JSON.stringify(args);
    if (cache.has(cacheKey)) {
      console.log(`Returning result from cache for ${cacheKey}`);
      return cache.get(cacheKey);
    }
    console.log(`Computing result for ${cacheKey}`);
    const result = fn.apply(this, args);
    cache.set(cacheKey, result);
    return result;
  }
}

function fibonacci(n) {
  if (n < 2) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const memoizedFibonacci = withMemoization(fibonacci);

memoizedFibonacci(10); // output: "Computing result for [10]", and returns 55
memoizedFibonacci(10); // output: "Returning result from cache for [10]", and returns 55

4. 实现日志记录

使用装饰器模式，您可以为函数或方法添加日志记录功能。这是非常有用的，尤其是在您需要了解函数或方法的运行情况时。例如，您可以使用装饰器模式为函数或方法添加日志记录功能，以便在运行时了解它们的行为。

class MyClass {
  @withLogging
  sayHello() {
    console.log('Hello, world!');
  }
}

const myObject = new MyClass();

myObject.sayHello(); // output: "Calling sayHello with arguments: " and "Hello, world!"

5. 实现权限控制

使用装饰器模式，您可以为函数或方法添加权限控制功能。这是非常有用的，尤其是在您需要限制某些函数或方法的访问权限时。例如，您可以使用装饰器模式为函数或方法添加权限控制功能，以便只有特定的用户可以访问它们。

function requireRole(role) {
  return function(target, propertyKey, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args) {
      const userRole = getCurrentUserRole(); // a hypothetical function to get the current user's role
      if (userRole !== role) {
        throw new Error(`User with role ${userRole} is not authorized to access this method`);
      }
      return originalMethod.apply(this, args);
    }
    return descriptor;
  }
}

class MyProtectedClass {
  @requireRole('admin')
  doAdminStuff() {
    console.log('Doing admin stuff...');
  }
}

const myObject = new MyProtectedClass();

myObject.doAdminStuff(); // throws an error if the current user's role is not "admin"

三、webpack 插件来处理装饰器

为了让webpack支持装饰器语法，需要一个专门的插件——@babel/plugin-proposal-decorators。使用这个插件，webpack就可以识别出装饰器语法了。

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        babel: {
          plugins: [
            "@babel/plugin-proposal-decorators"
          ]
        }
      }
    })
  ]
};

四、typescript中编写装饰器

在TypeScript中，装饰器是一种语言特性。TypeScript编译器内置了对装饰器的支持，因此不需要使用额外的工具或库来实现装饰器模式。例如，您可以使用装饰器来实现依赖注入、路由配置、身份验证等功能。

首先在TypeScript 的配置中启用了实验性的装饰器特性。

{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
  }
}

@Injectable()
class MyService {
  constructor(private readonly dependency: MyDependency) {}

  doSomething() {
    // ...
  }
}

@Route('/users')
class UserController {
  constructor(private readonly service: MyService) {}

  @Authorize('admin')
  @Get('/:id')
  getUser(@Param('id') id: string) {
    // ...
  }
}

示例中，@Injectable()、@Route('/users')、@Authorize('admin')、@Get('/:id')和@Param('id')都是装饰器。它们分别用于将MyService类标记为可注入的服务、将UserController类标记为处理/users路由、将getUser方法标记为需要admin权限、将getUser方法标记为处理GET请求和获取id参数。

五、写在文末

作为一个JavaScript开发者，我认为装饰器模式在代码组织和维护方面有很大的帮助。使用装饰器，我们可以将各种功能单元拆分成独立的模块，并在需要的时候通过装饰器将它们动态地组装起来。这样做的好处是可以大大提高代码的可读性和可维护性，并且可以更加灵活地应对需求变化。

装饰器模式是一个非常有用的工具，它可以帮助我们更好地组织和维护代码，并且可以让我们更加专注于业务逻辑的实现。我相信随着JavaScript语言的不断发展和壮大，装饰器模式会在未来的开发中扮演越来越重要的角色。

本文正在参加「金石计划」

avatar
文章
阅读
粉丝