在软件开发中,设计模式是一种解决特定问题的优秀解决方案,它们可以帮助我们编写可重用、可维护和可扩展的代码,JavaScript是一种广泛使用的编程语言,它有许多内置的设计模式,本文将介绍一些常见的JavaScript设计模式,并通过实例来说明如何使用它们。

1、单例模式(Singleton)

单例模式是一种确保一个类只有一个实例,并提供一个全局访问点的模式,在JavaScript中,我们可以使用闭包来实现单例模式。

function Singleton() {
  if (!Singleton.instance) {
    Singleton.instance = this;
  }
  return Singleton.instance;
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // 输出 true

2、工厂模式(Factory)

工厂模式是一种创建对象的模式,它提供了一种将实例化逻辑封装在一个方法中的方式,在JavaScript中,我们可以使用构造函数和原型链来实现工厂模式。

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

function CarFactory() {}

CarFactory.prototype.createCar = function (make, model, year) {
  return new Car(make, model, year);
};

const car1 = CarFactory.createCar('Toyota', 'Camry', 2018);
const car2 = CarFactory.createCar('Honda', 'Accord', 2019);

console.log(car1); // 输出 Car { make: 'Toyota', model: 'Camry', year: 2018 }
console.log(car2); // 输出 Car { make: 'Honda', model: 'Accord', year: 2019 }

3、观察者模式(Observer)

观察者模式是一种当对象状态发生变化时通知所有依赖对象的模式,在JavaScript中,我们可以使用事件监听器来实现观察者模式。

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notifyObservers() {
    for (let observer of this.observers) {
      observer.update();
    }
  }
}

class Observer {
  update() {
    console.log('State changed');
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notifyObservers(); // 输出 State changed State changed

4、策略模式(Strategy)

策略模式是一种定义一系列算法,并将每个算法封装在一个单独的对象中,使它们可以互换的模式,在JavaScript中,我们可以使用函数和对象来实现策略模式。

function calculateBMI(height, weight) {
  const bmi = weight / (height * height);
  return bmi;
}

function getBMICategory(bmi) {
  let category;
  if (bmi < 18.5) {
    category = 'Underweight';
  } else if (bmi >= 18.5 && bmi < 24.9) {
    category = 'Normal weight';
  } else if (bmi >= 24.9 && bmi < 29.9) {
    category = 'Overweight';
  } else {
    category = 'Obesity';
  }
  return category;
}

JavaScript设计模式:理解与实践

5、适配器模式(Adapter)

适配器模式是一种将一个类的接口转换为另一个客户端期望的接口的模式,在JavaScript中,我们可以使用类和继承来实现适配器模式。

class Target {
  request() {
    return Target;
  }
}

class Client {
  performAction(adapter) {
    console.log(Performing action using ${adapter}); // 输出 "Performing action using Target"
    console.log(Result: ${adapter.request()}); // 输出 "Result: Target"
  }
}