看电影电视剧的好网站纤纤影院,凡客衬衫品牌介绍,网站开发模板教程,重庆的网站建设1. 观察者模式1.1. 使用场景观察者模式用于对象间的一对多依赖关系#xff0c;当一个对象的状态发生变化时#xff0c;所有依赖于它的对象都能收到通知并自动更新。常用于事件处理、通知系统。在前端中#xff0c;观察者模式用于实现事件监听、数据绑定等功能。1.2. 代码实现…1. 观察者模式1.1. 使用场景观察者模式用于对象间的一对多依赖关系当一个对象的状态发生变化时所有依赖于它的对象都能收到通知并自动更新。常用于事件处理、通知系统。在前端中观察者模式用于实现事件监听、数据绑定等功能。1.2. 代码实现
class Subject {constructor() {this.observers [];}addObserver(observer) {this.observers.push(observer);}removeObserver(observer) {this.observers this.observers.filter(obs obs ! observer);}notifyObservers(message) {this.observers.forEach(observer observer.update(message));}
}class Observer {update(message) {console.log(Observer received:, message);}
}// 使用观察者模式
const subject new Subject();
const observer1 new Observer();
const observer2 new Observer();subject.addObserver(observer1);
subject.addObserver(observer2);subject.notifyObservers(New update available); // Observer received: New update available1.3. 详细解释Subject发布者维护一个观察者列表提供方法来添加、移除和通知观察者。Observer观察者提供 update 方法来响应发布者的通知。观察者模式适合事件系统或数据模型更新的场景。1.4. 实际应用观察者模式常用于事件驱动系统如 DOM 事件监听器、Vue 或 React 的响应式系统。2. 发布订阅模式2.1. 使用场景发布订阅模式用于实现松耦合的事件驱动系统发布者Publisher和订阅者Subscriber通过事件中心Event Bus或Broker进行通信发布者无需知道谁订阅了事件而订阅者也无需知道事件由谁发布。该模式常用于消息队列、事件系统、异步处理等场景。2.2. 代码实现
// 事件中心Event Bus
class EventBus {constructor() {this.subscribers {}; // 存储所有事件和其对应的订阅者}// 订阅事件subscribe(event, callback) {if (!this.subscribers[event]) {this.subscribers[event] []; // 如果事件不存在创建一个新的订阅者列表}this.subscribers[event].push(callback); // 将订阅者的回调函数加入列表}// 发布事件publish(event, data) {if (this.subscribers[event]) {this.subscribers[event].forEach(callback callback(data)); // 通知所有订阅者}}// 取消订阅unsubscribe(event, callback) {if (this.subscribers[event]) {this.subscribers[event] this.subscribers[event].filter(cb cb ! callback); // 移除指定的订阅者}}
}// 创建事件中心
const eventBus new EventBus();// 订阅者1
const subscriber1 (data) {console.log(Subscriber 1 received:, data);
};// 订阅者2
const subscriber2 (data) {console.log(Subscriber 2 received:, data);
};// 订阅事件
eventBus.subscribe(eventA, subscriber1);
eventBus.subscribe(eventA, subscriber2);// 发布事件
eventBus.publish(eventA, This is event A data);
// Subscriber 1 received: This is event A data
// Subscriber 2 received: This is event A data// 取消订阅者2的订阅
eventBus.unsubscribe(eventA, subscriber2);// 再次发布事件
eventBus.publish(eventA, This is new event A data);
// Subscriber 1 received: This is new event A data2.3. 详细注释EventBus事件中心作为中介维护一个事件和订阅者的映射关系。负责发布事件、添加订阅者以及移除订阅者。subscribe用于订阅某个事件将订阅者的回调函数加入到对应事件的订阅者列表中。publish用于发布某个事件触发该事件的所有订阅者的回调函数。unsubscribe取消订阅某个事件移除指定订阅者的回调函数。2.4. 实际应用在前端开发中发布订阅模式常用于事件中心管理事件流比如在 Vue.js 的 emit和on 中。消息队列系统如 RabbitMQ、Kafka也是发布订阅模式的典型应用。3. 模板方法模式3.1. 使用场景模板方法模式定义了一个操作中的算法骨架而将一些步骤的实现延迟到子类。常用于固定流程中部分步骤需要定制的场景。在前端中模板方法模式可用于不同页面之间的结构共享。3.2. 代码实现
class AbstractClass {templateMethod() {this.step1();this.step2();this.step3();}step1() {console.log(AbstractClass: Step 1);}step2() {throw new Error(step2 must be implemented by subclass);}step3() {console.log(AbstractClass: Step 3);}
}class ConcreteClass extends AbstractClass {step2() {console.log(ConcreteClass: Step 2);}
}// 使用模板方法模式
const instance new ConcreteClass();
instance.templateMethod();
// Output:
// AbstractClass: Step 1
// ConcreteClass: Step 2
// AbstractClass: Step 33.3. 详细注释AbstractClass提供算法的骨架定义了 templateMethod 作为算法的模板方法具体步骤由子类实现。ConcreteClass子类实现了模板方法中的具体步骤。模板方法模式允许子类在不改变算法整体结构的前提下重新定义算法的某些步骤。3.4. 实际应用模板方法模式常用于页面加载逻辑、复杂流程处理等场景如表单验证步骤、数据处理流程等。4. 策略模式4.1. 使用场景策略模式定义了一系列算法并将每个算法封装起来使它们可以互换使用。在前端开发中策略模式可以用于处理不同的用户输入、动态选择不同的 UI 渲染逻辑等。4.2. 代码实现
class StrategyA {execute() {console.log(Executing Strategy A);}
}class StrategyB {execute() {console.log(Executing Strategy B);}
}class Context {setStrategy(strategy) {this.strategy strategy;}executeStrategy() {this.strategy.execute();}
}// 使用策略模式
const context new Context();
const strategyA new StrategyA();
context.setStrategy(strategyA);
context.executeStrategy(); // Executing Strategy Aconst strategyB new StrategyB();
context.setStrategy(strategyB);
context.executeStrategy(); // Executing Strategy B4.3. 详细注释StrategyA 和 StrategyB定义了不同的算法实现。Context上下文类维护当前策略并通过 setStrategy 方法动态切换策略。策略模式允许在运行时根据条件选择不同的算法避免使用大量条件语句。4.4. 实际应用策略模式常用于表单验证、输入处理、动态 UI 渲染等场景。5. 责任链模式5.1. 使用场景责任链模式用于将请求的处理者串联起来多个对象依次处理请求直到有对象处理它为止。在前端中责任链模式常用于事件处理链、表单验证流程等。5.2. 代码实现
class Handler {setNext(handler) {this.nextHandler handler;}handle(request) {if (this.nextHandler) {return this.nextHandler.handle(request);}return null;}
}class ConcreteHandlerA extends Handler {handle(request) {if (request A) {return Handled by A;}return super.handle(request);}
}class ConcreteHandlerB extends Handler {handle(request) {if (request B) {return Handled by B;}return super.handle(request);}
}// 使用责任链模式
const handlerA new ConcreteHandlerA();
const handlerB new ConcreteHandlerB();
handlerA.setNext(handlerB);console.log(handlerA.handle(A)); // Handled by A
console.log(handlerA.handle(B)); // Handled by B5.3. 详细注释Handler处理者的基类提供 setNext 方法来设置下一个处理者。ConcreteHandlerA 和 ConcreteHandlerB具体处理者实现了请求处理逻辑。责任链模式使得多个处理者依次处理请求避免了请求和处理者之间的紧耦合。5.4. 实际应用责任链模式常用于表单验证、事件处理链、权限管理等场景。6. 中介者模式6.1. 使用场景中介者模式用于定义对象间的通信方式避免直接交互造成的复杂性。在前端中中介者模式常用于组件之间的通信、事件总线等。6.2. 代码实现
class Mediator {notify(sender, event) {if (event EventA) {console.log(Mediator reacts to EventA and triggers EventB);sender.trigger(EventB);}}
}class Component {constructor(mediator) {this.mediator mediator;}trigger(event) {console.log(Component triggered: ${event});this.mediator.notify(this, event);}
}// 使用中介者模式
const mediator new Mediator();
const component new Component(mediator);component.trigger(EventA);/* Output:
Component triggered: EventA
Mediator reacts to EventA and triggers EventB
Component triggered: EventB
*/6.3. 详细注释Mediator中介者类负责协调不同组件之间的交互。Component组件类负责触发事件并通过中介者进行通信。中介者模式通过集中化的中介者避免了多个组件之间的复杂依赖关系。6.4. 实际应用中介者模式常用于组件通信、消息总线、事件系统等场景。7. 访问者模式7.1. 使用场景访问者模式用于在不改变数据结构的前提下定义对数据结构中元素的操作。在前端中访问者模式适用于复杂结构的遍历和操作如 DOM 树操作等。7.2. 代码实现
class Element {accept(visitor) {visitor.visit(this);}
}class ConcreteElementA extends Element {operationA() {console.log(Operation A);}
}class ConcreteElementB extends Element {operationB() {console.log(Operation B);}
}class Visitor {visit(element) {if (element instanceof ConcreteElementA) {element.operationA();} else if (element instanceof ConcreteElementB) {element.operationB();}}
}// 使用访问者模式
const elements [new ConcreteElementA(), new ConcreteElementB()];
const visitor new Visitor();
elements.forEach(element element.accept(visitor));7.3. 详细注释Element元素基类定义 accept 方法来接受访问者。Visitor访问者类提供 visit 方法处理不同的元素类型。访问者模式允许在不修改数据结构的前提下动态为结构中的每个元素定义新的操作。7.4. 实际应用访问者模式常用于对树形结构、DOM 元素的遍历操作。8. 命令模式8.1. 使用场景命令模式用于将请求封装为对象从而实现请求的参数化、队列化。在前端中命令模式适用于实现操作历史、撤销功能等场景。8.2. 代码实现
class Command {execute() {throw new Error(execute method must be implemented);}
}class ConcreteCommand extends Command {constructor(receiver) {super();this.receiver receiver;}execute() {this.receiver.action();}
}class Receiver {action() {console.log(Receiver action executed);}
}class Invoker {setCommand(command) {this.command command;}executeCommand() {this.command.execute();}
}// 使用命令模式
const receiver new Receiver();
const command new ConcreteCommand(receiver);
const invoker new Invoker();invoker.setCommand(command);
invoker.executeCommand(); // Receiver action executed8.3. 详细注释Command命令的基类定义 execute 方法。ConcreteCommand具体命令执行对接收者的操作。Invoker调用者负责执行命令。命令模式通过封装请求将请求处理逻辑与请求发出者解耦。8.4. 实际应用命令模式常用于实现操作历史、撤销重做、宏命令等场景。9. 解释器模式9.1. 使用场景解释器模式用于给定语言的语法表达式并解析其中的语句。在前端中解释器模式可用于解析自定义的模板语言、脚本等。9.2. 代码实现
class Expression {interpret(context) {throw new Error(interpret method must be implemented);}
}class NumberExpression extends Expression {constructor(value) {super();this.value value;}interpret() {return this.value;}
}class AddExpression extends Expression {constructor(left, right) {super();this.left left;this.right right;}interpret() {return this.left.interpret() this.right.interpret();}
}// 使用解释器模式
const left new NumberExpression(3);
const right new NumberExpression(5);
const addExpr new AddExpression(left, right);console.log(addExpr.interpret()); // 89.3. 详细注释Expression解释器基类定义 interpret 方法。NumberExpression 和 AddExpression具体的解释器解析数字和加法操作。解释器模式允许定义一个简单的语言或规则并通过解释器解析和执行。9.4. 实际应用解释器模式常用于处理模板引擎、正则表达式解析等场景。10. 迭代器模式10.1. 使用场景迭代器模式用于顺序访问集合对象的元素而无需暴露其内部结构。在前端中迭代器模式常用于遍历数组、集合等数据结构。10.2. 代码实现
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];
const iterator new Iterator(collection);while (iterator.hasNext()) {console.log(iterator.next()); // 1 2 3 4
}10.3. 详细注释Iterator迭代器类提供 hasNext 和 next 方法来顺序访问集合中的元素。迭代器模式允许分离集合对象的遍历逻辑使得遍历和数据结构解耦。10.4. 实际应用迭代器模式常用于处理数组、链表、树等数据结构的遍历。11. 备忘录模式11.1. 使用场景备忘录模式用于保存对象的状态以便在需要时恢复。在前端中备忘录模式可用于实现撤销功能、保存表单状态等。11.2. 代码实现
class Memento {constructor(state) {this.state state;}getState() {return this.state;}
}class Originator {setState(state) {console.log(Setting state to:, state);this.state state;}saveStateToMemento() {return new Memento(this.state);}getStateFromMemento(memento) {this.state memento.getState();}
}class Caretaker {constructor() {this.mementoList [];}
}// 使用备忘录模式
const originator new Originator();
const caretaker new Caretaker();originator.setState(State 1);
caretaker.add(originator.saveStateToMemento());originator.setState(State 2);
caretaker.add(originator.saveStateToMemento());originator.setState(State 3);
console.log(Current State:, originator.state); // Current State: State 3originator.getStateFromMemento(caretaker.get(0));
console.log(Restored State:, originator.state); // Restored State: State 111.3. 详细注释Memento备忘录类保存状态。Originator原始对象提供保存和恢复状态的方法。Caretaker管理备忘录列表。备忘录模式通过保存对象的状态允许在需要时恢复之前的状态。11.4. 实际应用备忘录模式常用于实现撤销功能、表单状态恢复等场景。12. 状态模式12.1. 使用场景状态模式允许对象在内部状态发生改变时改变其行为。在前端中状态模式可用于管理复杂的组件状态如表单验证、UI 状态管理等。12.2. 代码实现
class State {handle(context) {throw new Error(handle method must be implemented);}
}class ConcreteStateA extends State {handle(context) {console.log(State A, transitioning to State B);context.setState(new ConcreteStateB());}
}class ConcreteStateB extends State {handle(context) {console.log(State B, transitioning to State A);context.setState(new ConcreteStateA());}
}class Context {constructor() {this.state new ConcreteStateA();}setState(state) {this.state state;}request() {this.state.handle(this);}
}// 使用状态模式
const context new Context();
context.request(); // State A, transitioning to State B
context.request(); // State B, transitioning to State A12.3. 详细注释State状态基类定义 handle 方法。ConcreteStateA 和 ConcreteStateB具体状态类实现了状态切换逻辑。Context上下文类负责在不同状态下切换并调用状态行为。状态模式允许对象在状态变化时改变其行为使得状态切换透明化。12.4. 实际应用状态模式常用于处理复杂的状态逻辑如表单的验证状态、UI 的显示状态等。
