JavaScript设计模式(九)——装饰器模式 (Decorator)

引言：为什么装饰器模式值得学习

装饰器模式是一种结构型设计模式，允许动态地添加对象功能而不修改其核心代码。在JavaScript中，这一模式显著提升了代码的复用性、灵活性和可维护性。与代理模式不同，装饰器更注重功能扩展而非控制访问，通过包装原始对象来增强其行为，而不是像代理那样控制对对象的访问。对于中级开发者而言，掌握装饰器模式能够帮助你编写更模块化、可扩展的代码，有效应对复杂业务场景下的功能叠加需求。

装饰器模式的核心原理：工作机制与关键概念

装饰器模式是一种结构型设计模式，允许向对象动态添加新功能，而不改变其原有结构。在JavaScript中，装饰器通过包装原始对象实现功能叠加。基本结构包含被装饰对象和装饰器，装饰器接收原始对象并扩展其行为。

装饰器的核心价值在于动态扩展功能。通过组合多个装饰器，可以灵活增强对象行为，每个装饰器负责特定功能，按需应用。

装饰器遵循开闭原则，对扩展开放，对修改封闭。添加新功能只需创建新装饰器，无需修改现有代码，提高系统可维护性。

在JavaScript中，装饰器可通过函数或类实现。函数装饰器通过高阶函数返回增强后的函数；类装饰器则通过装饰器工厂或装饰器类包装原始类。

// 基础函数装饰器
function loggingDecorator(fn) {
  return function(...args) {
    console.log(`Calling ${fn.name} with`, args);
    return fn.apply(this, args);
  };
}

// 应用装饰器
const decoratedFn = loggingDecorator(originalFunction);

这种模式在JavaScript设计模式中扮演着重要角色，使代码更加灵活、可扩展，同时保持原有对象的纯净性。

JavaScript中的装饰器实现：代码示例详解

在JavaScript中实现装饰器模式有多种方式。函数装饰器可通过高阶函数实现，如添加日志功能：

function withLogging(fn) {
  return function(...args) {
    console.log(`Calling with: ${args}`);
    try {
      return fn.apply(this, args);
    } catch (error) {
      console.error(`Error: ${error}`);
      throw error;
    }
  };
}

类装饰器使用ES6+语法：

function addTimestamp(target) {
  target.createdAt = new Date();
  target.prototype.getCreatedAt = function() {
    return target.createdAt;
  };
}

@addTimestamp
class MyClass {}

装饰器链可组合多个功能：

function withLog(target) {
  return new Proxy(target, {
    apply: (t, thisArg, args) => {
      console.log(`Called with: ${args}`);
      return t.apply(thisArg, args);
    }
  });
}

function withCache(target) {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    return cache.has(key) ? cache.get(key) : 
      (cache.set(key, target(...args)), cache.get(key));
  };
}

const decorated = withLog(withCache((x) => x * x));

完整示例包含错误处理，确保装饰器健壮性。

实际应用场景：何时使用装饰器模式

装饰器模式在JavaScript中有着广泛的应用场景，通过动态为对象添加功能，实现了代码的灵活复用和可维护性。

日志记录装饰器可动态添加方法调用日志，便于调试和监控：

function logDecorator(target, key, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`调用方法: ${key}, 参数: ${args}`);
    return originalMethod.apply(this, args);
  };
}

性能监控装饰器能测量函数执行时间，优化性能瓶颈：

function performanceDecorator(target, key, 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(`${key} 执行时间: ${end - start}ms`);
    return result;
  };
}

权限控制装饰器在API调用前检查用户权限，增强安全性：

function permissionDecorator(role) {
  return function(target, key, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args) {
      if (!currentUser.roles.includes(role)) {
        throw new Error(`无权限执行 ${key}`);
      }
      return originalMethod.apply(this, args);
    };
  };
}

缓存装饰器避免重复计算，提升应用响应速度：

function cacheDecorator(target, key, descriptor) {
  const cache = new Map();
  const originalMethod = descriptor.value;
  descriptor.value = function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = originalMethod.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

这些装饰器场景展示了如何在不修改原有代码的情况下，为函数添加额外功能，提高了代码的可维护性和复用性。

装饰器模式的优缺点：权衡利弊

装饰器模式通过动态添加功能，显著增强了代码的灵活性，允许在不修改原有代码的情况下扩展对象行为。它支持功能的动态组合，使开发者能够像搭积木一样灵活组装功能，同时提高了代码的可测试性，因为各个装饰器可以独立测试。

然而，装饰器模式也有其局限性。过度使用装饰器会增加系统复杂性，特别是在装饰器链较长时，可能导致性能开销。此外，由于装饰器包装了原始对象，调试时可能需要追踪多层装饰，增加了难度。

该模式特别适合需要频繁扩展功能的场景，如API中间件系统，可以动态添加认证、日志、缓存等功能。但对于简单功能或静态需求，使用装饰器则可能导致过度设计，反而降低代码可读性。

// 优点：灵活组合功能
class Component {}
@log
@cache
class DataComponent extends Component {}

// 缺点：装饰器链可能增加复杂性
@performanceMonitor
@errorHandler
@authValidator
class APIController {}

最佳实践和注意事项：正确使用装饰器

在JavaScript中正确使用装饰器模式需要遵循以下最佳实践：

保持装饰器单一职责，每个装饰器专注于一项功能增强。例如：

// 日志装饰器 - 只负责记录方法调用
function log(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`调用 ${propertyKey}`, args);
    return originalMethod.apply(this, args);
  };
}

编写单元测试验证装饰器行为，确保装饰逻辑正确且不影响原有功能。使用Jest等测试框架模拟不同场景。

避免在简单逻辑上滥用装饰器。如果功能可以直接实现，不需要额外抽象，应保持代码简洁。

性能方面，优先使用轻量级装饰器，减少链式调用的开销。对于高频调用的方法，考虑缓存装饰结果：

// 缓存装饰器 - 避免重复计算
function memoize(target, propertyKey, descriptor) {
  const cache = new Map();
  const originalMethod = descriptor.value;
  descriptor.value = function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = originalMethod.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

合理应用这些实践，能让装饰器模式成为提升代码可维护性和可扩展性的有力工具。

总结

装饰器模式通过动态组合而非继承实现功能扩展，是JavaScript中提升代码灵活性的重要设计模式。在实际项目中，可利用装饰器构建日志系统、权限控制等横切关注点，实现代码复用与解耦。