设计模式概念

// 举例：向咖啡中加配料更新价格
// 抽象组件：饮料
class Beverage {
  constructor() {
    if (new.target === Beverage) {
      throw new Error("Beverage is an abstract class.");
    }
  }
 
  getDescription() {
    throw new Error("Method 'getDescription()' must be implemented.");
  }
 
  cost() {
    throw new Error("Method 'cost()' must be implemented.");
  }
}
// 具体组件：浓缩咖啡
class Espresso extends Beverage {
  getDescription() {
    return "Espresso";
  }
 
  cost() {
    return 1.99;
  }
}
// 抽象装饰类：调料
class CondimentDecorator extends Beverage {
  constructor(beverage) {
    super();
    if (new.target === CondimentDecorator) {
      throw new Error("CondimentDecorator is an abstract class.");
    }
    this.beverage = beverage;
  }
 
  getDescription() {
    return this.beverage.getDescription();
  }
 
  cost() {
    return this.beverage.cost();
  }
}
// 具体装饰类：摩卡
class Mocha extends CondimentDecorator {
  getDescription() {
    return `${this.beverage.getDescription()}, Mocha`;
  }
 
  cost() {
    return this.beverage.cost() + 0.2;
  }
}
class Milk extends CondimentDecorator {
  getDescription() {
    return `${this.beverage.getDescription()}, Milk`;
  }
 
  cost() {
    return this.beverage.cost() + 0.1;
  }
}
// 客户端代码
let beverage = new Espresso();
console.log(`${beverage.getDescription()} $${beverage.cost()}`);
beverage = new Mocha(beverage);
console.log(`${beverage.getDescription()} $${beverage.cost()}`);
beverage = new Milk(beverage);
console.log(`${beverage.getDescription()} $${beverage.cost()}`);

// 抽象组件：角色
class Character {
  constructor(name) {
    this.name = name;
  }
 
  getAttack() {
    return 10;
  }
 
  getDefense() {
    return 10;
  }
 
  getDescription() {
    return `${this.name}`;
  }
}
// 抽象装饰类: 装备
class EquipmentDecorator extends Character {
  constructor(character) {
    super();
    this.character = character;
  }
 
  getAttack() {
    return this.character.getAttack();
  }
 
  getDefense() {
    return this.character.getDefense();
  }
 
  getDescription() {
    return this.character.getDescription();
  }
}
// 具体装饰类：武器
class WeaponDecorator extends EquipmentDecorator {
  constructor(character, weaponName, attactBonus) {
    super(character);
    this.weaponName = weaponName;
    this.attactBonus = attactBonus;
  }
 
  getAttack() {
    return super.getAttack() + this.attactBonus;
  }
 
  getDescription() {
    return `${super.getDescription()}, Weapon: ${this.weaponName}`
  }
}
// 具体装饰类:盔甲
class ArmorDecorator extends EquipmentDecorator {
  constructor(character, armorName, defenseBonus) {
    super(character);
    this.armorName = armorName;
    this.defenseBonus = defenseBonus;
  }
 
  getDefense() {
    return super.getDefense() + this.defenseBonus;
  }
 
  getDescription() {
    return `${super.getDescription()}, Armor: ${this.armorName}`;
  }
}
// 客户端代码
let character = new Character("Warrior");
console.log(character.getDescription());
console.log(`Attack: ${character.getAttack()}, Defense: ${character.getDefense()}`);
 
character = new WeaponDecorator(character, "Sword", 5);
console.log(character.getDescription());
console.log(`Attack: ${character.getAttack()}, Defense: ${character.getDefense()}`);
 
character = new ArmorDecorator(character, "Shield", 3);
console.log(character.getDescription());
console.log(`Attack: ${character.getAttack()}, Defense: ${character.getDefense()}`);

// 目标接口:新的温度计接口
class NewThermometer {
  constructor() {
    console.log('target', new.target)
    if (new.target === NewThermometer) {
      throw new Error("NewThermometer cannot be instantiated directly");
    }
  }
 
  getTemperature () {
    throw new Error("Method 'getTemperature()' must be implemented.");
  }
}
// 适配者类 旧的温度计
class OldThermometer {
  constructor() {
    this.themperature = 0;
  }
 
  setTemperture(temperature) {
    this.temperature = temperature;
  }
 
  getTemperatureInFahrenheit() {
    return this.temperature;
  }
}
// 适配器:将旧温度计适配到新温度计接口
 
class ThermometerAdapter extends NewThermometer {
  constructor(oldThermometer) {
    super()
    this.oldThermometer = oldThermometer;
  }
 
  getTemperature() {
    const temperatureInFahrenheit = this.oldThermometer.getTemperatureInFahrenheit();
    const temperatureInCelsius = (temperatureInFahrenheit - 32) * 5 / 9;
    return temperatureInCelsius;
  }
}
// 客户端代码
function clientCode (thermometer) {
  console.log(`Temperature: ${thermometer.getTemperature()}°C`);
}
const oldThermometer = new OldThermometer();
oldThermometer.setTemperture(98.6);
 
const newThermometer = new ThermometerAdapter(oldThermometer);
clientCode(newThermometer);
// 在这个例子中,NewThermometer是目标接口,定义了新的温度计应该具有的接口。OldThermometer是适配者类,表示旧的温度计,它使用华氏度表示温度。ThermometerAdapter是适配器,它包装了一个OldThermometer对象,并将其接口转换为NewThermometer接口,将华氏度转换为摄氏度

// 下面是一个使用JavaScript实现的组合模式的例子,演示了如何使用组合模式来表示文件系统中的目录和文件
class FileSystemItem {
  constructor(name) {
    this.name = name;
  }
 
  display() {
    throw new Error("Method 'display()' must be implemented.");
  }
}
// 叶子：文件
class File extends FileSystemItem {
  contructor(name) {
    super(name);
  }
 
  display() {
    console.log(`Displaying file ${this.name}`);
  }
}
// 组合：目录
class Directory extends FileSystemItem {
  constructor(name) {
    super(name);
    this.items = [];
  }
 
  add(item) {
    this.items.push(item);
  }
 
  remove(item) {
    const index = this.items.indexOf(item);
    if (index !== -1) {
      this.items.splice(index, 1);
    }
  }
 
  display() {
    console.log(`Directory: ${this.name}`);
    for (const item of this.items) {
      item.display();
    }
  }
}
 
// 客户端代码
function clientCode () {
  const root = new Directory("root");
  const dir1 = new Directory("dir1");
  const dir2 = new Directory("dir2");
 
  const file1 = new File("file1.txt");
  const file2 = new File("file2.txt");
  const file3 = new File("file3.txt");
 
  root.add(dir1);
  root.add(dir2);
  root.add(file1);
 
  dir1.add(file2);
  dir2.add(file3);
 
  root.display();
}
 
clientCode();

// 下面是一个简单的例子，演示了一个绘图应用,它可以使用不同的渲染器(如SVG、Canvas)来绘制不同的形状(如圆形、矩形)。
// 实现化角色
class Renderer {
  constructor() {
    if (new.target === Renderer) {
      throw new Error("Cannot instantiate abstract class.");
    }
  }
 
  renderCircle(radius) {
 
  }
 
  renderRect(width, height) {
 
  }
}
// 具体化实现角色：SVG渲染器
class SVGRenderer extends Renderer {
  renderCircle(radius) {
    console.log(`Rendering a circle with radius ${radius} using SVG.`);
  }
 
  renderRect(width, height) {
    console.log(`Rendering a rectangle with width ${width} and height ${height} using SVG.`);
  }
}
// 具体实现化角色:Canvas渲染器
class CanvasRenderer extends Renderer {
  renderCircle(radius) {
    console.log(`Rendering a circle with radius ${radius} using Canvas.`);
  }
 
  renderRect(width, height) {
    console.log(`Rendering a rectangle with width ${width} and height ${height} using Canvas.`);
  }
}
// 抽象化角色:形状
class Shape {
  constructor(renderer) {
    this.renderer = renderer
  }
}
// 修正抽象化角色：圆形
class Circle extends Shape {
  constructor(renderer, radius) {
    super(renderer);
    this.radius = radius;
  }
 
  draw() {
    this.renderer.renderCircle(this.radius);
  }
}
// 修正抽象化角色:矩形
class Rect extends Shape {
  constructor(renderer, width, height) {
    super(renderer);
    this.width = width;
    this.height = height;
  }
 
  draw() {
    this.renderer.renderRect(this.width, this.height);
  }
}
 
// 客户端代码
function clientCode () {
  const svgRenderer = new SVGRenderer();
  const canvasRenderer = new CanvasRenderer();
 
  const svgCircle = new Circle(svgRenderer, 100);
  const svgRect = new Rect(svgRenderer, 100, 200);
  const canvasCircle = new Circle(canvasRenderer, 100);
  const canvasRect = new Rect(canvasRenderer, 100, 200);
 
  svgCircle.draw();
  svgRect.draw();
  canvasCircle.draw();
  canvasRect.draw();
}
 
clientCode();
 
// Renderer是实现化角色,定义了渲染器的接口。
// SVGRenderer和CanvasRenderer是具体实现化角色,实现了具体的渲染方法。
// Shape是抽象化角色,持有一个渲染器的引用。
// Circle和Rect是修正抽象化角色,继承自Shape,并定义了具体的绘制方法。
 
// Rendering a circle with radius 5 using SVG.
// Rendering a rectangle with width 10 and height 20 using SVG.
// Rendering a circleRendering a circle with radius 8 using Canvas.
// Rendering a rectangle with width 15 and height 30 using Canvas.
 
// 如果我们想要添加一个新的渲染器(如WebGL渲染器),只需要创建一个新的WebGLRenderer类,实现Renderer接口,而不需要修改任何形状的代码
 
class WebGLRenderer extends Renderer {
  renderCircle(radius) {
    console.log(`Rendering a circle with radius ${radius} using WebGL.`);
  }
 
  renderRect(width, height) {
    console.log(`Rendering a rectangle with width ${width} and height ${height} using WebGL.`);
  }
}
 
// 客户端代码
const webglRenderer = new WebGLRenderer();
const webglCircle = new Circle(webglRenderer, 6);
const webglRect = new Rect(webglRenderer, 12, 24);
 
webglCircle.draw();
webglRect.draw();
 
// 同样地,如果我们想要添加一个新的形状(如三角形),只需要创建一个新的Triangle类,继承自Shape,并实现draw()方法,而不需要修改任何渲染器的代码
class Triangle extends Shape {
  constructor(renderer, base, height) {
    super(renderer);
    this.base = base;
    this.height = height;
  }
 
  draw() {
    console.log(`Rendering a triangle with base ${this.base} and height ${this.height}.`);
    // 使用渲染器绘制三角形...
  }
}

// 子系统类
// DVD播放
class DVDPlayer {
  on () {
    console.log('DVD Player is on');
  }
 
  play (movie) {
    console.log(`Playing movie: ${movie}`);
  }
 
  stop () {
    console.log('DVD player stopped');
  }
 
  off () {
    console.log('DVD player is off');
  }
}
// 投影
class Projector {
  on () {
    console.log('Projector is on');
  }
 
  wideScreenMode () {
    console.log('Projector in widescreen mode');
  }
 
  off () {
    console.log('Projector is off');
  }
}
// 环绕立体声
class SurroundSoundSystem {
  on() {
    console.log('Surround sound system is on');
  }
 
  setVolume(volume) {
    console.log(`Setting volume to ${volume}`);
  }
 
  off() {
    console.log('Surround sound system is off');
  }
}
// 外观类
class HomeTheaterFacade {
  constructor(devplayer, projector, soundSystem) {
    this.dvdPlayer = devplayer;
    this.projector = projector;
    this.soundSystem = soundSystem;
  }
 
  watchMovie(movie) {
    console.log('Get ready to watch a movie...');
    this.dvdPlayer.on();
    this.projector.on();
    this.projector.wideScreenMode();
    this.soundSystem.on();
    this.soundSystem.setVolume(5);
    this.dvdPlayer.play(movie);
  }
 
  endMove () {
    console.log('Shutting movie theater down...');
    this.dvdPlayer.stop();
    this.dvdPlayer.off();
    this.projector.off();
    this.soundSystem.off();
  }
}
// 客户端代码
const devPlayer = new DVDPlayer();
const projector = new Projector();
const soundSystem = new SurroundSoundSystem();
 
const homeTheater = new HomeTheaterFacade(devPlayer, projector, soundSystem);
 
homeTheater.watchMovie('Titanic');
homeTheater.endMove();

// 抽象主题
class Image {
  display () {}
}
// 真实主题
class RealImage extends Image {
  constructor(fileName) {
    super()
    this.fileName = fileName
    this.loadFromDisk(fileName)
  }
 
  display () {
    console.log(`Displaying ${this.fileName}`);
  }
 
  loadFromDisk () {
    console.log(`Loading ${this.fileName}`);
  }
}
// 代理类
class ProxyImage extends Image {
  constructor(fileName) {
    super()
    this.fileName = fileName
    this.realImage = null
  }
 
  display () {
    if (!this.realImage) {
      this.realImage = new RealImage(this.fileName)
    }
    this.realImage.display()
  }
}
// 客户端
const image = new ProxyImage('test_10mb.jpg')
// 第一次调用 display 方法，将触发真实图像的加载
image.display();
// 第二次调用 display 方法，不会触发真实图像的加载，因为它已经被加载过了
image.display();

// 天气数据和显示板的交互
// 主题：天气数据
class WeatherData {
  constructor() {
    this.observers = [];
    this.temperature = null;
    this.humidity = null;
    this.pressure = null;
  }
 
  registerObserver(observer) {
    this.observer.push(observer);
  }
 
  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }
 
  notifyObservers() {
    this.observers.forEach(observer => observer.update())
  }
 
  measurementsChanged() {
    this.notifyObservers();
  }
 
  setMeasurements(temperature, humidity, pressure) {
    this.temperature = temperature;
    this.humidity = humidity;
    this.pressure = pressure;
    this.measuredChanged();
  }
 
  getTemperature() {
    return this.temperature;
  }
 
  getHumidity() {
    return this.humidity;
  }
 
  getPressure() {
    return this.pressure;
  }
}
// 观察者：显示面板
class DisplayElement {
  constructor(weatherData) {
    this.weatherData = weatherData;
    this.temperature = null;
    this.humidity = null;
    this.pressure = null;
    this.weatherData.registerObserver(this);
  }
 
  update() {
    this.temperature = this.weatherData.getTemperature();
    this.humidity = this.weatherData.getHumidity();
    this.pressure = this.weatherData.getPressure();
    this.display();
  }
 
  display() {
    console.log(`Temperature: ${this.temperature}°C, Humidity: ${this.humidity}%, Pressure: ${this.pressure}hPa`);
  }
}
 
// 客户端// 客户端代码
const weatherData = new WeatherData();
const displayElement1 = new DisplayElement(weatherData);
const displayElement2 = new DisplayElement(weatherData);
 
weatherData.setMeasurements(25, 65, 1013);
weatherData.setMeasurements(26, 70, 1015);
 
weatherData.removeObserver(displayElement2);
 
weatherData.setMeasurements(27, 75, 1020);
 
// Temperature: 25°C, Humidity: 65%, Pressure: 1013hPa
// Temperature: 25°C, Humidity: 65%, Pressure: 1013hPa
// Temperature: 26°C, Humidity: 70%, Pressure: 1015hPa
// Temperature: 26°C, Humidity: 70%, Pressure: 1015hPa
// Temperature: 27°C, Humidity: 75%, Pressure: 1020hPa

// 使用观察者模式实现简单的事件管理的例子
// 主题:事件管理器
class EventManager {
  constructor() {
    this.listeners = new Map();
  }
 
  subscribe(eventType, listener) {
    if (!this.listeners.has(eventType)) {
      this.listeners.set(eventType, []);
    }
    this.listeners.get(eventType).push(listener);
  }
 
  unsubscribe(eventType, listener) {
    if (this.listeners.has(eventType)) {
      const index = this.listeners.get(eventType).indexOf(listener);
      if (index !== -1) {
        this.listeners.get(eventType).splice(index, 1);
      }
    }
  }
 
  notify (eventType, data) {
    if (this.listeners.has(eventType)) {
      this.listeners.get(eventType).forEach(listener => listener(data));
    }
  }
}
// 观察者：事件监听器
class EventListener {
  constructor(name) {
    this.name = name;
  }
 
  handleEvent(data) {
    console.log(`${this.name} received: ${data}`);
  }
}
 
// 客户端代码
const eventManager = new EventManager();
 
const listener1 = new EventListener("Listener 1");
const listener2 = new EventListener("Listener 2");
 
eventManager.subscribe("eventA", listener1.handleEvent.bind(listener1));
eventManager.subscribe("eventA", listener2.handleEvent.bind(listener2));
eventManager.subscribe("eventB", listener1.handleEvent.bind(listener1));
 
eventManager.notify("eventA", "Event A occurred!");
eventManager.notify("eventB", "Event B occurred!");
 
eventManager.unsubscribe("eventA", listener2.handleEvent);
 
eventManager.notify("eventA", "Event A occurred again!");
 
// Listener 1 received: Event A occurred!Listener 2 received: Event A occurred!
// Listener 1 received: Event B occurred!
// Listener 1 received: Event A occurred again!

// 接收者
class Receiver {
  execute() {
    console.log('Executing a request.');
  }
}
// 抽象命令类
class Command {
  constructor(receiver) {
    this.receiver = receiver;
  }
 
  execute() {}
}
// 具体命令类
class ConcreteCommand extends Command {
  execute() {
    console.log('ConcreteCommand: Calling receiver.');
    this.receiver.execute();
  }
}
// 调用者
class Invoker {
  setCommand(command) {
    this.command = command;
  }
 
  executeCommand() {
    console.log('Invoker: Calling command.');
    this.command.execute();
  }
}
// 客户端
const receiver = new Receiver();
const command = new ConcreteCommand(receiver);
const invoker = new Invoker();
 
invoker.setCommand(command);
invoker.executeCommand();

class AbstractClass {
  templateMethod() {
    this.baseOperation1();
    this.requiredOperations1();
    this.baseOperation2();
    this.hook1();
    this.requiredOperation2();
    this.baseOperation3();
    this.hook2();
  }
 
  baseOperation1() {
    console.log('AbstractClass says: I am doing the bulk of the work');
  }
 
  baseOperation2() {
    console.log(
      'AbstractClass says: But I let subclasses override some operations'
    );
  }
 
  baseOperation3() {
    console.log(
      'AbstractClass says: But I am doing the bulk of the work anyway'
    );
  }
 
  requiredOperations1() {}
 
  requiredOperation2() {}
 
  hook1() {}
 
  hook2() {}
}
 
class ConcreteClass1 extends AbstractClass {
  requiredOperations1() {
    console.log('ConcreteClass1 says: Implemented Operation1');
  }
 
  requiredOperation2() {
    console.log('ConcreteClass1 says: Implemented Operation2');
  }
}
 
class ConcreteClass2 extends AbstractClass {
  requiredOperations1() {
    console.log('ConcreteClass2 says: Implemented Operation1');
  }
 
  requiredOperation2() {
    console.log('ConcreteClass2 says: Implemented Operation2');
  }
 
  hook1() {
    console.log('ConcreteClass2 says: Overridden Hook1');
  }
}
 
console.log('Same client code can work with different subclasses:');
clientCode(new ConcreteClass1());
console.log('');
 
console.log('Same client code can work with different subclasses:');
clientCode(new ConcreteClass2());
 
function clientCode(abstractClass) {
  abstractClass.templateMethod();
}
// 在这个例子中，AbstractClass 是抽象父类，它定义了一个名为 templateMethod 的模板方法。这个模板方法由一系列的方法组成，其中 requiredOperations1 和 requiredOperation2 是抽象的，需要子类 ConcreteClass1 和 ConcreteClass2 来提供具体的实现
// hook1 和 hook2 是钩子方法，子类可以选择是否覆盖它们

// 抽象策略类
class CalculationStrategy {
  calculate(price) {}
}
// 具体策略类
class NormalStrategy extends CalculationStrategy {
  calculate(price) {
    return price;
  }
}
// 具体策略类
class DiscountStrategy extends CalculationStrategy {
  calculate(price) {
    return price * 0.8;
  }
}
// 上下文
class PriceContext {
  constructor(strategy) {
    this.strategy = strategy;
  }
  setStrategy(strategy) {
    this.strategy = strategy;
  }
  calculate(price) {
    return this.strategy.calculate(price);
  }
}
// 客户端
const priceContext = new PriceContext(new NormalStrategy());
console.log(priceContext.calculate(100)); // 100
priceContext.setStrategy(new DiscountStrategy());
console.log(priceContext.calculate(100)); // 80
// 在这个例子中,CalculationStrategy是抽象策略类,它定义了计算价格的接口。NormalStrategy和DiscountStrategy是具体策略类,分别实现了普通计算和打折计算
// PriceContext是上下文,它维护对策略对象的引用,并提供了一个setStrategy方法来动态地改变策略
// 在客户端代码中,我们首先创建了一个使用NormalStrategy的PriceContext,并计算价格,输出为100。然后,我们将策略改为DiscountStrategy,再次计算价格,这次输出为80
// 这个例子展示了策略模式如何让算法可以独立于使用它的客户端而变化。客户端可以在运行时根据需要切换算法,而不需要修改使用算法的代码