前端常见的7种设计模式

在前端开发中，设计模式是一种被广泛应用的思想。设计模式可以帮助开发者解决常见的问题，并提供可重用的解决方案。本文将会介绍前端常见的设计模式，并通过代码详解它们的实现。

一、单例模式

单例模式是指一个类只能被实例化一次，并提供全局访问点。这个模式非常适合那些需要共享资源的场景。比如，在前端开发中，我们经常需要确保某些资源只被加载一次，而不是每次都重新加载。下面是一个使用单例模式的例子：

class Singleton {
  constructor() {
    if (typeof Singleton.instance === 'object') {
      return Singleton.instance;
    }
    this.name = 'Singleton';
    Singleton.instance = this;
    return this;
  }
}

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

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

上述代码中，我们创建了一个 Singleton 类，该类只能被实例化一次。如果多次尝试实例化该类，将会返回同一个实例。这样就保证了某些资源只会被加载一次，从而提高性能。

二、观察者模式

观察者模式是指当一个对象状态改变时，它的所有依赖者都会收到通知并自动更新。这个模式非常适合那些需要实时更新用户界面的场景。下面是一个使用观察者模式的例子：

class ObserverList {
  constructor() {
    this.observerList = [];
  }

  add(observer) {
    return this.observerList.push(observer);
  }

  remove(observer) {
    this.observerList = this.observerList.filter((obs) => obs !== observer);
  }

  count() {
    return this.observerList.length;
  }

  get(i) {
    return this.observerList[i];
  }
}

class Subject {
  constructor() {
    this.observers = new ObserverList();
  }

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

  removeObserver(observer) {
    this.observers.remove(observer);
  }

  notify(context) {
    const observerCount = this.observers.count();
    for (let i = 0; i < observerCount; i++) {
      this.observers.get(i).update(context);
    }
  }
}

class Observer {
  constructor() {
    this.update = () => {};
  }
}

const subject = new Subject();

const observer1 = new Observer();
observer1.update = function (context) {
  console.log(`Observer 1: ${context}`);
};

const observer2 = new Observer();
observer2.update = function (context) {
  console.log(`Observer 2: ${context}`);
};

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

subject.notify('Hello World');

上述代码中，我们创建了一个 Subject 类和一个 Observer 类。Subject 类包含了一个观察者列表，并提供了添加、删除和通知观察者的方法。Observer 类则包含了一个更新方法，用于处理来自被观察者的通知。在主程序中，我们创建了两个观察者，并将它们添加到被观察者的观察者列表中。然后，我们通知被观察者，被观察者会自动通知所有观察者，并执行它们的更新方法。

三、工厂模式

工厂模式是指通过一个工厂类来创建其他类的实例。这个模式非常适合那些需要根据不同条件创建不同实例的场景。下面是一个使用工厂模式的例子：

class ProductA {
	constructor(name) {
		this.name = name;
	}
	operation() {
		console.log(`Product A (${this.name}) is working.`);
	}
}
class ProductB {
	constructor(name) {
		this.name = name;
	}
	operation() {
		console.log(`Product B (${this.name}) is working.`);
	}
}
class Factory {
	createProduct(type, name) {
		switch (type) {
			case 'A':
				return new ProductA(name);
			case 'B':
				return new ProductB(name);
			default:
				throw new Error('Invalid product type.');
		}
	}
}
const factory = new Factory();
const productA1 = factory.createProduct('A', 'productA1');
const productA2 = factory.createProduct('A', 'productA2');
const productB1 = factory.createProduct('B', 'productB1');
const productB2 = factory.createProduct('B', 'productB2');
productA1.operation(); // Product A (productA1) is working.
productA2.operation(); // Product A (productA2) is working.
productB1.operation(); // Product B (productB1) is working.
productB2.operation(); // Product B (productB2) is working.

上述代码中，我们创建了两个产品类 `ProductA` 和 `ProductB`，以及一个工厂类 `Factory`。工厂类提供了一个创建产品实例的方法 `createProduct`，该方法根据传入的参数来决定创建哪种产品实例。在主程序中，我们通过工厂类创建了四个不同的产品实例，并分别执行它们的操作方法。

四、装饰者模式

装饰者模式是指动态地给一个对象增加一些额外的功能。这个模式非常适合那些需要在运行时动态改变对象行为的场景。下面是一个使用装饰者模式的例子：

class Shape {
draw() {}
}

class Circle extends Shape {
draw() {
console.log('Drawing a circle.');
}
}

class Rectangle extends Shape {
draw() {
console.log('Drawing a rectangle.');
}
}

class Decorator {
constructor(shape) {
this.shape = shape;
}

draw() {
this.shape.draw();
}
}

class RedShapeDecorator extends Decorator {
draw() {
this.shape.draw();
this.setRedBorder();
}

setRedBorder() {
console.log('Setting red border.');
}
}

const circle = new Circle();
const rectangle = new Rectangle();

circle.draw(); // Drawing a circle.
rectangle.draw(); // Drawing a rectangle.

const redCircle = new RedShapeDecorator(new Circle());
const redRectangle = new RedShapeDecorator(new Rectangle());

redCircle.draw(); // Drawing a circle. Setting red border.
redRectangle.draw(); // Drawing a rectangle. Setting red border.

上述代码中，我们创建了两个形状类 Circle 和 Rectangle，以及一个装饰者类 Decorator。装饰者类包含了一个形状对象，用于对其进行装饰。然后，我们创建了一个红色形状装饰者类 RedShapeDecorator，用于在形状周围添加一个红色边框。在主程序中，我们先执行原始形状的绘制方法，然后再使用红色装饰器对其进行装饰。

五、代理模式

代理模式是指使用一个代理对象来控制对另一个对象的访问。这个模式非常适合那些需要控制对某些敏感资源的访问的场景。下面是一个使用代理模式的例子：

class Image {
  constructor(url) {
    this.url = url;
    this.loadImage();
  }

loadImage() {
    console.log(`Loading image from ${this.url}`);
  }
}

class ProxyImage {
  constructor(url) {
    this.url = url;
  }

loadImage() {
    if (!this.image) {
      this.image = new Image(this.url);
    }
    console.log(`Displaying cached image from ${this.url}`);
  }
}

const image1 = new Image('https://example.com/image1.jpg');
const proxyImage1 = new ProxyImage('https://example.com/image1.jpg');

proxyImage1.loadImage(); // Loading image from https://example.com/image1.jpg
proxyImage1.loadImage(); // Displaying cached image from https://example.com/image1.jpg

const image2 = new Image('https://example.com/image2.jpg');
const proxyImage2 = new ProxyImage('https://example.com/image2.jpg');

proxyImage2.loadImage(); // Loading image from https://example.com/image2.jpg
proxyImage2.loadImage(); // Displaying cached image from https://example.com/image2.jpg

上述代码中，我们创建了一个图片类 `Image` 和一个代理图片类 `ProxyImage`。代理图片类包含了一个图片对象，用于控制对其加载和显示的访问。在主程序中，我们首先创建了一个真实的图片对象，并使用代理图片对象进行访问。第一次访问时，代理图片对象会加载并显示真实的图片；第二次访问时，代理图片对象直接从缓存中获取并显示图片。

六、适配器模式

适配器模式是指将不兼容接口的对象转化为兼容接口的对象。这个模式非常适合那些需要改变接口而不影响原有代码的场景。下面是一个使用适配器模式的例子：

class OldCalculator {
  operations(a, b, operation) {
    switch (operation) {
      case 'add':
        return a + b;
      case 'sub':
        return a - b;
      default:
        return NaN;
    }
  }
}

class NewCalculator {
  add(a, b) {
    return a + b;
  }

sub(a, b) {
    return a - b;
  }
}

class CalculatorAdapter {
  constructor() {
    this.newCalculator = new NewCalculator();
  }

operations(a, b, operation) {
    switch (operation) {
      case 'add':
        return this.newCalculator.add(a, b);
      case 'sub':
        return this.newCalculator.sub(a, b);
      default:
        return NaN;
    }
  }
}

const oldCalculator = new OldCalculator();
console.log(oldCalculator.operations(10, 5, 'add')); // 15

const newCalculator = new NewCalculator();
console.log(newCalculator.add(10, 5)); // 15

const calculatorAdapter = new CalculatorAdapter();
console.log(calculatorAdapter.operations(10, 5, 'add')); // 15

上述代码中，我们创建了一个旧计算器类 OldCalculator 和一个新计算器类 NewCalculator。然后，我们创建了一个适配器类 CalculatorAdapter，该类包含了一个新计算器对象，用于将旧计算器的操作转化为新计算器的操作。在主程序中，我们分别使用旧计算器、新计算器和适配器进行加法运算，并得到了相同的结果。

七、命令模式

命令模式是指将请求封装成一个对象，并提供与执行该请求相关的所有信息。这个模式非常适合那些需要执行多个不同操作的场景。下面是一个使用命令模式的例子：

class Receiver {
  run() {
    console.log('Receiver is running.');
  }
}

class Command {
  constructor(receiver) {
    this.receiver = receiver;
  }

  execute() {}
}

class StartCommand extends Command {
  execute() {
    this.receiver.run();
  }
}

class Invoker {
  setCommand(command) {
    this.command = command;
  }

  executeCommand() {
    this.command.execute();
  }
}

const receiver = new Receiver();
const startCommand = new StartCommand(receiver);
const invoker = new Invoker();
invoker.setCommand(startCommand);
invoker.executeCommand(); // Receiver is running.

上述代码中，我们创建了一个接收者类 Receiver 和一个命令基类 Command。然后，我们创建了一个具体命令类 StartCommand，该类继承自命令基类，并实现了执行方法 execute，用于启动接收者。最后，我们创建了一个调用者类 Invoker，该类包含了一个命令对象，并提供了执行命令的方法。在主程序中，我们创建了一个接收者对象、一个具体命令对象和一个调用者对象，并将具体命令对象设置为调用者对象的命令。然后，我们执行调用者对象的执行方法，该方法会调用具体命令对象的执行方法，从而启动接收者。这个例子比较简单，但命令模式可以应用于很多复杂的场景，例如撤销/恢复操作、事务管理等。

八、观察者模式

观察者模式是指在对象之间定义一种一对多的依赖关系，使得每当一个对象改变状态时，所有依赖于它的对象都会得到通知并自动更新。这个模式非常适合那些需要在应用中实现事件处理的场景。下面是一个使用观察者模式的例子：

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

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

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

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

class ConcreteSubject extends Subject {
  constructor(state) {
    super();
    this.state = state;
  }

  getState() {
    return this.state;
  }

  setState(state) {
    this.state = state;
    this.notifyObservers();
  }
}

class Observer {
  update() {}
}

class ConcreteObserver extends Observer {
  update(subject) {
    console.log(`The subject has changed to ${subject.getState()}.`);
  }
}

const subject = new ConcreteSubject('state1');
const observer1 = new ConcreteObserver();
const observer2 = new ConcreteObserver();

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

subject.setState('state2'); // The subject has changed to state2.

上述代码中，我们创建了一个主题基类 Subject 和一个具体主题类 ConcreteSubject。主题类包含了一个状态属性和一组观察者对象，并提供了方法以添加、删除和通知观察者。然后，我们创建了一个观察者基类 Observer 和一个具体观察者类 ConcreteObserver，该类继承自观察者基类，并实现了更新方法。在主程序中，我们创建了一个具体主题对象、两个具体观察者对象，并将观察者对象添加到主题对象中。然后，我们修改了主题对象的状态，并通过主题对象通知观察者对象进行更新操作。

以上就是七种常见的设计模式以及它们的应用场景和示例代码。当然，这只是冰山一角，还有很多其他的设计模式可以应用于不同的场景。熟悉各种设计模式并且能够灵活运用它们可以让你成为更优秀的开发者。

链接: https://www.fly63.com/article/detial/12413

一、单例模式

二、观察者模式

三、工厂模式

四、装饰者模式

五、代理模式

六、适配器模式

七、命令模式

八、观察者模式

Recommend

上汽大众补贴37亿跟进降价潮？网友：日常价，别上当

WaterField Unveils Stylish New Magnetic Gaming Cases for Steam Deck, Nintendo Sw...

蓝色光标：GPT-4 与 AIGC 等相关 AI 技术尚处于起步阶段

Latest Windows 11 update is causing slow SSDs & WiFi connections, BSoD, and...

iPhone 15 Pro Max to 'Break Record' for Thinnest Bezels on a Smartphone

Bitwarden's password manager browser extension has a known exploit it hasn't add...

Microsoft’s new share button makes it easy to show people what Bing AI is saying

Launch HN: Codeparrot (YC W23) – Automated API testing using production traffic

Cloudflare partners with KnowBe4 to equip organizations with real-time security...

Tesla hit with right-to-repair class-action lawsuits alleging monopolistic pract...

About Joyk