JS装饰器模式，让你的代码更优雅

装饰器模式

JavaScript装饰器模式是一种常用的设计模式，它可以让你在不改变原有代码的情况下，动态地给对象添加新的功能。本文将通过一个实际的例子来介绍JavaScript装饰器模式的使用方法和优势。

装饰器模式的定义

装饰器模式是一种结构型设计模式，它允许你在运行时动态地给一个对象添加新的功能，而不需要修改原有的代码。装饰器模式通常用于解决继承关系过于复杂或不适用的情况。

例子：给函数添加缓存功能

假设我们有一个计算函数，它的计算过程非常耗时，我们希望能够给它添加缓存功能，以提高性能。我们可以使用装饰器模式来实现这个功能。

首先，我们定义一个计算函数：

function calculate(num) {
  console.log('Calculating...');
  let result = 0;
  for (let i = 0; i < num; i++) {
    result += i;
  }
  return result;
}

然后，我们定义一个装饰器函数，它接受一个函数作为参数，并返回一个新的函数，这个新的函数可以缓存原函数的计算结果：

function cache(fn) {
  const cache = new Map();
  return function (num) {
    if (cache.has(num)) {
      console.log('Cache hit!');
      return cache.get(num);
    } else {
      console.log('Cache miss!');
      const result = fn(num);
      cache.set(num, result);
      return result;
    }
  };
}

最后，我们使用装饰器函数来装饰我们的计算函数：

const cachedCalculate = cache(calculate);
console.log(cachedCalculate(10000000)); // Calculating... Cache miss! 49999995000000
console.log(cachedCalculate(10000000)); // Cache hit! 49999995000000

现在，我们可以看到，当我们第一次调用cachedCalculate函数时，它会执行计算函数，并将结果缓存起来。当我们再次调用cachedCalculate函数时，它会直接从缓存中获取结果，而不需要重新计算。

装饰器模式的优势

使用装饰器模式可以让我们在不改变原有代码的情况下，动态地给对象添加新的功能。这样可以让我们的代码更加优雅和可维护，同时也可以提高代码的复用性和灵活性。

在上面的例子中，我们使用装饰器模式给计算函数添加了缓存功能，这样可以提高计算函数的性能。如果我们需要给其他函数添加缓存功能，只需要使用相同的装饰器函数即可，而不需要重复编写代码。

总结

JavaScript装饰器模式是一种常用的设计模式，它可以让我们在不改变原有代码的情况下，动态地给对象添加新的功能。在实际开发中，我们可以使用装饰器模式来解决继承关系过于复杂或不适用的情况，同时也可以提高代码的复用性和灵活性。