JS设计模式应用举例，浅谈理论与实践的差距

前端

2024-02-12 08:26:29

前言

纸上谈兵终觉浅，学习设计模式，看了很多书，但是始终还是觉得不如直接看例子来的更加客观具体，下面主要记录了js中的几个常见的设计模式举例，供自己以后复习的时候可以直接通过例子更快更好的理解设计模式。

设计模式浅析

设计模式是一套已被证明有效的软件设计方法，它可以帮助开发者设计出更灵活、更易维护的代码。设计模式有很多种，每种模式都有其独特的优点和缺点。在JavaScript中，常见的几个设计模式包括：

创建型模式： 帮助开发者创建对象。常见的创建型模式包括工厂方法模式、抽象工厂模式、单例模式等。
结构型模式： 帮助开发者组织对象和类。常见的结构型模式包括适配器模式、装饰器模式、代理模式等。
行为型模式： 帮助开发者定义对象之间的交互方式。常见的行为型模式包括策略模式、观察者模式、命令模式等。

JS设计模式实例

工厂方法模式

工厂方法模式是一种创建型设计模式，它允许开发者定义一个接口来创建对象，但由子类决定要创建哪个类。这种模式可以使代码更灵活，更容易维护。

实例：

class Shape {
  constructor(type) {
    this.type = type;
  }

  draw() {
    console.log(`Drawing a ${this.type}`);
  }
}

class Circle extends Shape {
  constructor() {
    super('circle');
  }

  draw() {
    super.draw();
    console.log('Drawing a circle');
  }
}

class Square extends Shape {
  constructor() {
    super('square');
  }

  draw() {
    super.draw();
    console.log('Drawing a square');
  }
}

class Rectangle extends Shape {
  constructor() {
    super('rectangle');
  }

  draw() {
    super.draw();
    console.log('Drawing a rectangle');
  }
}

class ShapeFactory {
  createShape(type) {
    switch (type) {
      case 'circle':
        return new Circle();
      case 'square':
        return new Square();
      case 'rectangle':
        return new Rectangle();
      default:
        throw new Error('Invalid shape type');
    }
  }
}

const factory = new ShapeFactory();

const circle = factory.createShape('circle');
circle.draw(); // Drawing a circle
const square = factory.createShape('square');
square.draw(); // Drawing a square
const rectangle = factory.createShape('rectangle');
rectangle.draw(); // Drawing a rectangle

适配器模式

适配器模式是一种结构型设计模式，它允许两个原本不兼容的接口一起工作。这种模式可以使代码更灵活，更容易维护。

实例：

class LegacyDatabase {
  read() {
    console.log('Reading from legacy database');
    return 'Legacy data';
  }

  write(data) {
    console.log('Writing to legacy database');
    console.log(`Data: ${data}`);
  }
}

class NewDatabase {
  async read() {
    console.log('Reading from new database');
    return 'New data';
  }

  async write(data) {
    console.log('Writing to new database');
    console.log(`Data: ${data}`);
  }
}

class DatabaseAdapter {
  constructor(database) {
    this.database = database;
  }

  read() {
    return this.database.read();
  }

  write(data) {
    this.database.write(data);
  }
}

const legacyDatabase = new LegacyDatabase();
const newDatabase = new NewDatabase();

const legacyDatabaseAdapter = new DatabaseAdapter(legacyDatabase);
legacyDatabaseAdapter.read(); // Reading from legacy database
legacyDatabaseAdapter.write('Legacy data'); // Writing to legacy database: Legacy data

const newDatabaseAdapter = new DatabaseAdapter(newDatabase);
newDatabaseAdapter.read(); // Reading from new database
newDatabaseAdapter.write('New data'); // Writing to new database: New data

代理模式

代理模式是一种结构型设计模式，它允许一个对象代表另一个对象，以便控制对另一个对象的访问。这种模式可以使代码更灵活，更容易维护。

实例：

class RealSubject {
  doSomething() {
    console.log('Doing something');
  }
}

class Proxy {
  constructor(realSubject) {
    this.realSubject = realSubject;
  }

  doSomething() {
    console.log('Proxy doing something');
    this.realSubject.doSomething();
  }
}

const realSubject = new RealSubject();
const proxy = new Proxy(realSubject);

proxy.doSomething(); // Proxy doing something
// Doing something