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

装饰器模式 JavaScript装饰器模式是一种常用的设计模式，它可以让你在不改变原有代码的情况下，动态地给对象添加新的功能。本文将通过一个实际的例子来介绍JavaScript装饰器模式的使用方法和优势。装饰器模式的定义装饰器模式是一种结构型设计模式，它允许你在运行时动态地给一个对象添加新的功能，而不需要修改原有的代码。装饰器模式通常用于解决继承关系过于复杂或不适用的情况。例子：给函数添加缓存功能假设我们有一 2023-07-29 0 Comments

装饰器模式

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函数时，它会直接从缓存中获取结果，而不需要重新计算。