高级JavaScript模式：单例模式、装饰者模式和代理模式

JavaScript是一种多功能的编程语言，使开发人员能够创建动态和交互式的Web应用程序。通过其广泛的功能和灵活性，JavaScript可以实现各种设计模式来高效地解决复杂问题。在本文中，我们将探讨三种高级JavaScript模式：单例模式、装饰者模式和代理模式。这些模式为管理对象创建、动态添加功能和控制对对象的访问提供了优雅的解决方案。

单例模式

单例模式确保一个类只有一个实例，并提供了对该实例的全局访问点。当我们希望限制一个类的实例数量以防止冗余或确保单个实例在应用程序中共享时，这种模式非常有用。

示例

让我们考虑一个示例，我们想创建一个日志记录器对象，使其在整个应用程序中保持单个实例：

// Singleton Logger
const Logger = (() => {
   let instance;

   function createInstance() {
      const log = [];

      return {
         addLog: (message) => {
            log.push(message);
         },
         printLogs: () => {
            log.forEach((message) => {
               console.log(message);
            });
         },
      };
   }

   return {
      getInstance: () => {
         if (!instance) {
            instance = createInstance();
         }
         return instance;
      },
   };
})();

// Usage
const logger1 = Logger.getInstance();
const logger2 = Logger.getInstance();

logger1.addLog("Message 1");
logger2.addLog("Message 2");

logger1.printLogs();

说明

在这个示例中，我们使用即时调用函数表达式（IIFE）来封装Singleton的实现。getInstance方法检查是否存在一个logger实例。如果不存在，它使用createInstance函数创建一个新的实例。这确保了只创建一个logger实例，并在所有的getInstance调用中共享。logger实例维护一个内部日志数组，允许添加和打印消息。

装饰者模式

装饰者模式允许我们动态地向对象添加新的行为或修改现有行为，而不影响同一类的其他实例。它通过将对象包装在一个或多个装饰器中来扩展对象的功能，提供了一种灵活的替代方案。

示例

让我们考虑一个示例，我们有一个简单的汽车对象，并希望使用装饰器添加附加功能：

// Car class
class Car {
   constructor() {
      this.description = "Basic car";
   }

   getDescription() {
      return this.description;
   }
}

// Decorator class
class CarDecorator {
   constructor(car) {
      this.car = car;
   }

   getDescription() {
      return this.car.getDescription();
   }
}

// Decorators
class ElectricCarDecorator extends CarDecorator {
   constructor(car) {
      super(car);
   }

   getDescription() {
      return ` ${super.getDescription()}, electric engine`; } } class LuxuryCarDecorator extends CarDecorator { constructor(car) { super(car); } getDescription() { return `$ {super.getDescription()}, leather seats`;
   }
}

// Usage
const basicCar = new Car();
const electricLuxuryCar = new ElectricCarDecorator(
   new LuxuryCarDecorator(basicCar)
);

console.log(electricLuxuryCar.getDescription());

解释

在这个示例中，我们从一个表示基本汽车的Car类开始，该类具有一个getDescription方法。CarDecorator类作为基本装饰器，为所有装饰器提供了一个公共接口。每个具体的装饰器都继承CarDecorator并重写getDescription方法来添加或修改功能。

我们创建了两个具体的装饰器：ElectricCarDecorator和LuxuryCarDecorator。ElectricCarDecorator添加了一个电动引擎功能，而LuxuryCarDecorator添加了皮革座椅。通过组合这些装饰器，我们可以动态地增强汽车对象的多个功能。

代理模式

代理模式允许我们通过提供代理或占位符来控制对对象的访问。它可以用于添加额外的逻辑，如验证或缓存，而不修改原始对象的行为。代理充当客户端和实际对象之间的中介，实现对对象交互的精细控制。

示例

让我们考虑一个示例，我们使用代理来为用户对象实现简单的访问控制：

// User object
const user = {
   name: "John",
   role: "user",
};

// Proxy
const userProxy = new Proxy(user, {
   get: (target, property) => {
      if (property === "role" && target.role === "admin") {
         throw new Error("Access denied");
      }

      return target[property];
   },
});

console.log(userProxy.name); 
console.log(userProxy.role);

解释

在这个示例中，我们有一个用户对象，其中包含属性name和role。我们使用Proxy构造函数创建了一个代理，提供了一个handler对象和一个get trap。get trap拦截属性访问，并允许我们实现自定义逻辑。在这种情况下，我们检查正在访问的属性是否为role，并且用户是否具有”admin”角色。如果满足条件，我们抛出一个错误来拒绝访问；否则，我们允许属性访问。