js设计模式分类示例

下面我将为每种设计模式提供一个简单的 JavaScript 示例代码。请注意，这些示例是为了说明设计模式的基本概念而简化的，实际应用中可能需要更复杂的实现。

创建型模式

1. 单例模式

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}
const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true

2. 工厂模式

class Car {
  constructor(model) {
    this.model = model;
  }
}
class CarFactory {
  createCar(model) {
    return new Car(model);
  }
}
const factory = new CarFactory();
const car = factory.createCar('Tesla');
console.log(car.model); // 'Tesla'

3. 抽象工厂模式

class SportsCar {
  constructor() {
    this.type = 'Sports Car';
  }
}
class SUV {
  constructor() {
    this.type = 'SUV';
  }
}
class CarFactory {
  createSportsCar() {
    return new SportsCar();
  }
  createSUV() {
    return new SUV();
  }
}
const factory = new CarFactory();
const sportsCar = factory.createSportsCar();
const suv = factory.createSUV();
console.log(sportsCar.type); // 'Sports Car'
console.log(suv.type); // 'SUV'

结构型模式

1. 适配器模式

class OldCalculator {
  operation(num1, num2) {
    return num1 + num2;
  }
}
class NewCalculator {
  add(num1, num2) {
    return num1 + num2;
  }
}
class CalculatorAdapter {
  constructor(oldCalculator) {
    this.oldCalculator = oldCalculator;
  }
  add(num1, num2) {
    return this.oldCalculator.operation(num1, num2);
  }
}
const oldCalc = new OldCalculator();
const adapter = new CalculatorAdapter(oldCalc);
console.log(adapter.add(10, 20)); // 30

2. 装饰器模式

function Beverage() {
  this.cost = function() {
    return 1;
  };
}
function Milk(beverage) {
  this.beverage = beverage;
  this.cost = function() {
    return this.beverage.cost() + 0.5;
  };
}
const beverage = new Beverage();
const beverageWithMilk = new Milk(beverage);
console.log(beverageWithMilk.cost()); // 1.5

行为型模式

1. 策略模式

class CompressionStrategy {
  compress() {}
}
class ZipCompressionStrategy extends CompressionStrategy {
  compress(files) {
    console.log('Compressing using ZIP');
  }
}
class RarCompressionStrategy extends CompressionStrategy {
  compress(files) {
    console.log('Compressing using RAR');
  }
}
class CompressionContext {
  setStrategy(strategy) {
    this.strategy = strategy;
  }
  compressFiles(files) {
    this.strategy.compress(files);
  }
}
const context = new CompressionContext();
context.setStrategy(new ZipCompressionStrategy());
context.compressFiles(['file1', 'file2']); // 'Compressing using ZIP'

2. 观察者模式

class Subject {
  constructor() {
    this.observers = [];
  }
  subscribe(observer) {
    this.observers.push(observer);
  }
  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }
  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}
class Observer {
  update(data) {
    console.log(`Observer received notification: ${data}`);
  }
}
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify('HelloObservers'); // Observer received notification: HelloObservers
subject.unsubscribe(observer1);
subject.notify('HelloObservers'); // Observer received notification: HelloObservers (only observer2 will receive this notification)

这些示例代码展示了不同设计模式的基本用法。在实际开发中，设计模式的选择和实现可能会更加复杂，取决于具体的应用场景和需求。