前端中常见的设计模式

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 Observable {constructor() {this.observers = [];}addObserver(observer) {this.observers.push(observer);}notifyObservers(data) {this.observers.forEach(observer => observer.update(data));}
}class Observer {update(data) {console.log(`Received data: ${data}`);}
}const subject = new Observable();
const observer1 = new Observer();
const observer2 = new Observer();subject.addObserver(observer1);
subject.addObserver(observer2);subject.notifyObservers("Hello, observers!");

3. 工厂模式（Factory Pattern）：

描述：工厂模式用于通过一个共同的接口来创建对象，隐藏了对象的创建细节。在前端中，可以用于创建不同类型的UI组件。

代码示例

class Button {render() {console.log("Rendering a button");}
}
class Input {render() {console.log("Rendering an input");}
}class UIFactory {create(type) {switch (type) {case "button":return new Button();case "input":return new Input();default:throw new Error("Invalid type");}}
}const factory = new UIFactory();
const button = factory.create("button");
const input = factory.create("input");button.render(); // Logs: "Rendering a button"
input.render();  // Logs: "Rendering an input"

4. 装饰者模式

描述：装饰者模式用于动态地将责任添加到对象上，以扩展对象的功能。在前端中，可以用于增强组件的功能。
代码示例：

class Component {operation() {console.log("Basic operation");}
}class Decorator {constructor(component) {this.component = component;}operation() {console.log("Decorator operation");this.component.operation();}
}const component = new Component();
const decoratedComponent = new Decorator(component);component.operation();         // Logs: "Basic operation"
decoratedComponent.operation(); // Logs: "Decorator operation" followed by "Basic operation"

5.策略模式

描述：策略模式定义了一系列算法，并将每个算法封装起来，使得它们可以互相替换。在前端中，可以用于处理不同的数据转换、验证或处理逻辑。
代码示例

class PaymentStrategy {constructor(paymentMethod) {this.paymentMethod = paymentMethod;}pay(amount) {return this.paymentMethod.pay(amount);}
}class CreditCardPayment {pay(amount) {console.log(`Paying ${amount} using credit card.`);}
}class PayPalPayment {pay(amount) {console.log(`Paying ${amount} using PayPal.`);}
}const creditCardPayment = new PaymentStrategy(new CreditCardPayment());
creditCardPayment.pay(100); // Logs: "Paying 100 using credit card."const payPalPayment = new PaymentStrategy(new PayPalPayment());
payPalPayment.pay(50); // Logs: "Paying 50 using PayPal."

6. 适配器模式

描述：适配器模式用于将一个类的接口转换成客户端期望的另一个接口。在前端中，可以用于处理不同数据格式或API之间的适配。
代码示例

class OldApi {request() {return "Response from old API";}
}class NewApi {fetch() {return "Response from new API";}
}class Adapter {constructor(api) {this.api = api;}request() {if (this.api instanceof OldApi) {return this.api.request();} else if (this.api instanceof NewApi) {return this.api.fetch();}}
}const oldApi = new OldApi();
const newApi = new NewApi();const oldAdapter = new Adapter(oldApi);
console.log(oldAdapter.request()); // Logs: "Response from old API"const newAdapter = new Adapter(newApi);
console.log(newAdapter.request()); // Logs: "Response from new API"

7. 命令模式

描述：命令模式将请求或操作封装成对象，允许参数化调用。在前端中，可以用于处理用户操作、撤销/重做功能等。
代码描述:

class Command {constructor(receiver) {this.receiver = receiver;}execute() {this.receiver.performAction();}
}class Receiver {performAction() {console.log("Action performed");}
}const receiver = new Receiver();
const command = new Command(receiver);command.execute(); // Logs: "Action performed"

8. 代理模式

描述：代理模式控制对其他对象的访问，可以添加额外的逻辑，如缓存、权限控制等。在前端中，可以用于懒加载、请求缓存等场景。
代码描述

class RealImage {constructor(filename) {this.filename = filename;this.loadImageFromDisk();}display() {console.log(`Displaying image: ${this.filename}`);}loadImageFromDisk() {console.log(`Loading image: ${this.filename}`);}
}class ProxyImage {constructor(filename) {this.filename = filename;this.realImage = null;}display() {if (!this.realImage) {this.realImage = new RealImage(this.filename);}this.realImage.display();}
}const image1 = new ProxyImage("image1.jpg");
image1.display(); // Logs: "Loading image: image1.jpg" followed by "Displaying image: image1.jpg"
image1.display(); // Logs: "Displaying image: image1.jpg" (no additional loading)const image2 = new ProxyImage("image2.jpg");
image2.display(); // Logs: "Loading image: image2.jpg" followed by "Displaying image: image2.jpg"

9. 迭代器模式

描述：迭代器模式提供一种顺序访问聚合对象元素的方法，而无需暴露其内部表示。在前端中，可以用于遍历数据集合。
代码描述：

class Iterator {constructor(collection) {this.collection = collection;this.index = 0;}hasNext() {return this.index < this.collection.length;}next() {return this.collection[this.index++];}
}const collection = [1, 2, 3, 4, 5];
const iterator = new Iterator(collection);while (iterator.hasNext()) {console.log(iterator.next());
}

10. 状态模式

描述：状态模式允许对象在内部状态变化时改变其行为。在前端中，可以用于管理复杂的UI状态转换。
代码描述

class State {handle() {console.log("Default state handling");}
}class ConcreteStateA extends State {handle() {console.log("State A handling");}
}class ConcreteStateB extends State {handle() {console.log("State B handling");}
}class Context {constructor() {this.state = new State();}setState(state) {this.state = state;}request() {this.state.handle();}
}const context = new Context();
context.request(); // Logs: "Default state handling"context.setState(new ConcreteStateA());
context.request(); // Logs: "State A handling"context.setState(new ConcreteStateB());
context.request(); // Logs: "State B handling"

其他

模板方法模式：模板方法模式定义了一个算法的骨架，允许子类为其中的步骤提供具体实现。在前端中，可以用于创建可定制的UI组件。
组合模式：组合模式将对象组合成树状结构，以表示部分-整体的层次关系。在前端中，可以用于处理UI组件的嵌套结构。
备忘录模式：备忘录模式用于捕获对象的内部状态，并在需要时进行恢复。在前端中，可以用于实现撤销/重做功能或保存应用状态。
访问者模式：访问者模式用于在不改变元素类的情况下，为元素添加新的操作。在前端中，可以用于遍历并处理复杂的DOM结构或数据结构。
责任链模式：责任链模式将请求的发送者和接收者解耦，形成一个链条，并将请求沿着链条传递，直到有一个接收者能够处理它。在前端中，可以用于处理用户输入、事件处理等场景。
桥接模式：桥接模式用于将抽象部分与其实现部分分离，使它们可以独立变化。在前端中，可以用于处理不同平台或不同样式的渲染。
解释器模式：解释器模式用于定义语言的文法，并解释语言中的表达式。在前端中，可以用于处理自定义的模板语言或表达式。
享元模式：享元模式用于共享细粒度对象，以减少内存占用。在前端中，可以用于管理大量的相似对象，例如优化渲染性能。
合成模式：合成模式用于将对象组合成树状结构，以表示“整体-部分”的层次关系。在前端中，可以用于构建复杂的UI组件层次结构。
外观模式：外观模式提供了一个简化的接口，用于访问复杂子系统中的功能。在前端中，可以用于封装复杂的API调用，以提供更简洁的接口。