设计模式javascript 设计模式23模式介绍

JavaScript设计模式：面向对象编程的优雅解决方案

在软件开发中，设计模式是一种经过验证的最佳实践，用于解决特定类型的问题，它们提供了一种结构化的方法来组织代码，使其更易于理解、修改和维护，JavaScript是一种广泛使用的编程语言，它支持面向对象编程（OOP），在JavaScript中，有许多设计模式可以帮助我们编写高质量的代码，本文将介绍一些常见的JavaScript设计模式，以及如何在实际应用中使用它们。

1、单例模式（Singleton）

单例模式是一种确保一个类只有一个实例，并提供一个全局访问点的设计模式，在JavaScript中，由于其特殊的原型继承机制，实现单例模式相对简单，以下是一个简单的单例模式实现：

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、工厂模式（Factory）

工厂模式是一种创建对象的抽象方法，它提供了一个接口来封装对象的创建过程，在JavaScript中，可以使用构造函数、原型链或ES6类来实现工厂模式，以下是一个简单的工厂模式实现：

function createPerson(name, age) {
  return {
    name: name,
    age: age,
    sayHello: function () {
      console.log(Hello, my name is ${this.name} and I am ${this.age} years old.);
    },
  };
}
const person1 = createPerson("Alice", 30);
const person2 = createPerson("Bob", 25);
person1.sayHello(); // 输出 "Hello, my name is Alice and I am 30 years old."
person2.sayHello(); // 输出 "Hello, my name is Bob and I am 25 years old."

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() {
    this.observers.forEach((observer) => observer.update());
  }
}
class Observer {
  update() {
    console.log("The subject has changed!");
  }
}
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notifyObservers(); // 输出 "The subject has changed!" twice

4、策略模式（Strategy）

策略模式是一种定义一系列算法，并将每个算法封装在一个单独的类中，使它们可以相互替换的设计模式，在JavaScript中，可以使用函数和高阶函数来实现策略模式，以下是一个简单的策略模式实现：

function calculateTax(rate, income) {
  return income * rate;
}
function calculateInsurance(rate, income) {
  return income * rate;
}
function calculateTotalCost(income, taxRate, insuranceRate) {
  const tax = calculateTax(taxRate, income);
  const insurance = calculateInsurance(insuranceRate, income);
  return tax + insurance;
}
const totalCost = calculateTotalCost(100000, 0.3, 0.1); // 输出 "14000"，即税和保险的总费用为14000元。