目录
JavaScript 设计模式：综合指南
JavaScript 以其广泛的采用和多功能性，已成为现代 Web 开发的基石。随着您深入研究 JavaScript 开发，理解和利用模式变得至关重要。在本文中，我们将踏上揭开 JavaScript 模式神秘面纱的旅程，并探索它们如何增强您的编码实践。
先决条件
要理解本文中讨论的概念和技术，您需要了解 JavaScript 的基础知识。熟悉变量、函数、数据类型、面向对象编程等概念至关重要。
在继续之前，让我们花点时间了解 JavaScript 作为编程语言的重要性。
JavaScript 作为一种编程语言
JavaScript 通常被称为“网络语言”，是一种动态的高级编程语言。它主要用于 Web 浏览器中的客户端脚本编写，但随着 Node.js 的出现，它也在服务器端获得了关注。JavaScript 的主要功能包括操作 DOM、处理事件、为网页提供交互性等的能力。
话虽这么说，让我们简要讨论一下 JavaScript 中模式的重要性和用途。
JavaScript 开发中模式的重要性
JavaScript 中的模式可以作为软件开发过程中遇到的重复问题的经过验证的解决方案。它们提供结构、改进代码组织、增强可维护性并促进可重用性。通过理解和应用模式，开发人员可以编写更清晰、更高效的代码并有效应对复杂的挑战。
理解 JavaScript 模式的目的
理解 JavaScript 模式不仅仅是记住语法或遵循最佳实践。它使开发人员能够批判性地思考软件设计、选择适当的解决方案并构建可扩展的应用程序。通过掌握 JavaScript 模式，您可以深入了解该语言及其生态系统，从而能够编写健壮且可维护的代码。
现在我们知道了 JavaScript 模式的重要性和用途，让我们深入研究 JS 设计模式的基础知识。
设计模式的基础知识
在本节中，我们为理解 JavaScript 开发背景下的设计模式奠定了基础。
设计模式的定义和特点
设计模式是可重用的模板，封装了解决重复出现的软件设计问题的最佳实践。它们提供了一种结构化的方法来设计软件系统，并促进模块化、灵活和可维护的代码。设计模式的共同特征包括其目的、结构、参与者和协作。
设计模式的类型
设计模式可以分为三种主要类型：
- 创意型
- 结构性
- 行为的
了解这些类别有助于确定给定问题的适当模式。
- 创作模式
创建模式专注于对象创建机制，提供以灵活且受控的方式实例化对象的方法。JavaScript 中一些常用的创建模式包括：
- 单例模式
- 工厂模式
- 构造函数
- 原型
- 建设者
- 模块
单例模式
单例模式确保一个类只有一个实例，并提供对其的全局访问点。当您想要限制类的实例数量并确保在整个应用程序中可以访问单个共享实例时，此模式非常有用。
// Implementation example of the Singleton Patternclass Singleton {
constructor() {
if (!Singleton.instance) {
// Initialize the instance
Singleton.instance = this;
}
return Singleton.instance;
}}const instance1 = new Singleton();const instance2 = new Singleton();console.log(instance1 === instance2); // Output: true
在此示例中，Singleton 类有一个构造函数，用于检查该类的实例是否已存在。如果实例不存在（!Singleton.instance条件），它将通过将 this 分配给 来初始化实例Singleton.instance。这确保了对构造函数的后续调用将返回相同的实例。
当使用新的 Singleton() 语法创建实例 1 和实例 2 时，这两个变量都引用 Singleton 类的同一个实例。因此，当使用严格相等运算符比较实例 1 === 实例 2 时，其计算结果为 true。
工厂模式
工厂模式提供了一种创建对象而无需指定其具体类的方法。它将对象创建逻辑封装在一个单独的工厂方法中，允许创建者和创建的对象之间的灵活性和解耦。
// Implementation example of the Factory Patternclass Car {
constructor(make, model) {
this.make = make;
this.model = model;
}}class CarFactory {
createCar(make, model) {
return new Car(make, model);
}}const factory = new CarFactory();const myCar = factory.createCar("Tope", "Model 1");
在此示例中，CarFactory使用 创建实例new CarFactory()，然后createCar使用参数“Tope”和“Model 1”在工厂上调用该方法。这将创建一个新的 Car 对象，其品牌为“Tope”，型号为“Model 1”，并分配给该myCar变量。
构造函数模式
构造函数模式使用new关键字从构造函数创建对象。它允许您在构造函数中定义和初始化对象属性。
// Implementation example of the Constructor Patternfunction Person(name, age) {
this.name = name;
this.age = age;}const tope = new Person("Tope", 24);
上面的代码定义了一个名为 Person 的构造函数，它带有两个参数：姓名和年龄。在函数内部，使用 this 关键字将名称和年龄值分配给新创建的对象的相应属性。
稍后，通过使用参数“Tope”和 24 调用 Person 函数来创建 Person 对象的新实例。这将创建一个新对象，其 name 属性设置为“Tope”，age 属性设置为 24，然后分配给变量top。这段代码的输出是 Tope 持有一个对象，代表一个名为“Tope”、年龄为 24 岁的人。
原型模式
JavaScript 中的原型模式专注于通过克隆或扩展现有对象作为原型来创建对象。它允许我们创建新实例而无需显式定义它们的类。在此模式中，对象充当创建新对象的原型，从而实现继承以及在多个对象之间共享属性和方法。
// Prototype objectconst carPrototype = {
wheels: 4,
startEngine() {
console.log("Engine started.");
},
stopEngine() {
console.log("Engine stopped.");
}};// Create new car instance using the prototypeconst car1 = Object.create(carPrototype);car1.make = "Toyota";car1.model = "Camry";// Create another car instance using the same prototypeconst car2 = Object.create(carPrototype);car2.make = "Honda";car2.model = "Accord";car1.startEngine(); // Output: "Engine started."car2.stopEngine(); // Output: "Engine stopped."
在此示例中，汽车实例 car1 和 car2 是使用原型对象 carPrototype 创建的。car1 的品牌为“Toyota”，型号为“Camry”，而 car2 的品牌为“Honda”，型号为“Accord”。当car1.startEngine()被调用时，它输出“发动机启动。”，当car2.stopEngine()被调用时，它输出“发动机停止。”。这演示了如何利用原型对象在多个实例之间共享属性和方法。
建造者模式
在构建器模式中，构建器类或对象负责构造最终对象。它提供了一组方法来配置和设置正在构建的对象的属性。构建过程通常涉及按特定顺序调用这些方法来逐步构建对象。
class CarBuilder {
constructor() {
this.car = new Car();
}
setMake(make) {
this.car.make = make;
return this;
}
setModel(model) {
this.car.model = model;
return this;
}
setEngine(engine) {
this.car.engine = engine;
return this;
}
setWheels(wheels) {
this.car.wheels = wheels;
return this;
}
build() {
return this.car;
}}class Car {
constructor() {
this.make = "";
this.model = "";
this.engine = "";
this.wheels = 0;
}
displayInfo() {
console.log(`Make: ${this.make}, Model: ${this.model}, Engine: ${this.engine}, Wheels: ${this.wheels}`);
}}// Usageconst carBuilder = new CarBuilder();const car = carBuilder.setMake("Toyota").setModel("Camry").setEngine("V6").setWheels(4).build();car.displayInfo(); // Output: Make: Toyota, Model: Camry, Engine: V6, Wheels: 4
在此示例中，该类CarBuilder允许构造具有不同属性的 Car 对象。通过调用setMake、setModel、setEngine、setWheels方法，可以设置 Car 对象的属性。build 方法完成构建并返回完全构建的 Car 对象。Car 类代表一辆汽车，并包含一个displayInfo记录其详细信息的方法。通过创建carBuilder实例并链接属性设置方法，可以使用特定的品牌、型号、发动机和车轮值构建汽车对象。调用car.displayInfo()显示汽车信息。
模块模式
模块模式将相关的方法和属性封装到单个模块中，提供了一种干净的方式来组织和保护代码。它允许私有和公共成员，从而实现信息隐藏并防止全局名称空间污染。
const MyModule = (function() {
// Private members
let privateVariable = "I am private";
function privateMethod() {
console.log("This is a private method");
}
// Public members
return {
publicVariable: "I am public",
publicMethod() {
console.log("This is a public method");
// Accessing private members within the module
console.log(privateVariable);
privateMethod();
}
};})();// Usageconsole.log(MyModule.publicVariable); // Output: "I am public"MyModule.publicMethod(); // Output: "This is a public method" "I am private" "This is a private method"
在此示例中，代码使用立即调用函数表达式(IIFE)来封装私有和公共成员。该模块具有私有变量和方法，以及公共变量和方法。访问时，公共成员提供预期的输出。此模式允许对封装的私有成员进行受控访问，同时公开选定的公共成员。
- 结构模式
结构模式侧重于组织和组合对象以形成更大的结构。它们促进对象的组合，定义对象之间的关系并提供灵活的方法来操纵其结构。JavaScript 中一些常用的结构模式包括：
- 装饰模式
- 观察者模式
- 适配器
- 桥接模式
- 组合模式
装饰模式
装饰器模式允许您动态添加行为或修改对象的现有行为。它通过用一个或多个装饰器包装对象来增强对象的功能，而无需修改其结构。
// Implementation example of the Decorator Patternclass Coffee {
getCost() {
return 1;
}}class CoffeeDecorator {
constructor(coffee) {
this.coffee = coffee;
}
getCost() {
return this.coffee.getCost() + 0.5;
}}const myCoffee = new Coffee();const coffeeWithMilk = new CoffeeDecorator(myCoffee);console.log(coffeeWithMilk.getCost()); // Output: 1.5
在此示例中，该类CoffeeDecorator包装了一个基础Coffee对象并添加了附加功能。它有一个getCost方法，通过将基础咖啡的成本与附加成本 0.5 相结合来计算总成本。
在使用部分，创建myCoffee该类的实例。Coffee然后，实例化coffeeWithMilk该类的实例，并作为参数传递。调用时，它会返回咖啡的总成本以及装饰器添加的成本，从而得到 1.5 的输出。此示例说明了装饰器模式如何通过动态添加或修改对象的属性或方法来扩展对象的功能。CoffeeDecoratormyCoffeecoffeeWithMilk.getCost()
观察者模式
观察者模式为复杂子系统提供了一个简化的接口，充当隐藏底层实现细节的前端接口。它通过提供高级接口，提供了一种与复杂系统交互的便捷方式。
// Implementation example of the Facade Patternclass SubsystemA {
operationA() {
console.log("Subsystem A operation.");
}}class SubsystemB {
operationB() {
console.log("Subsystem B operation.");
}}class Facade {
constructor() {
this.subsystemA = new SubsystemA();
this.subsystemB = new SubsystemB();
}
operation() {
this.subsystemA.operationA();
this.subsystemB.operationB();
}}const facade = new Facade();facade.operation(); // Output: "Subsystem A operation." "Subsystem B operation."
在此示例中，代码由三个类组成：SubsystemA、SubsystemB和Facade。和SubsystemA类SubsystemB代表独立的子系统，并有各自的operationA和operationB方法。该类Facade充当聚合子系统功能的简化接口。
在使用部分，创建facade该类的实例。Facade调用会触发from和fromfacade.operation()的执行。结果，输出显示“子系统 A 操作”。接下来是“子系统 B 操作”。这演示了外观模式如何提供统一且简化的接口来与复杂的子系统交互，抽象出它们的复杂性并使它们更易于使用。operationASubsystemAoperationBSubsystemB
适配器模式
适配器模式是一种结构设计模式，它允许具有不兼容接口的对象通过充当它们之间的桥梁来进行协作。它提供了一种将一个对象的接口转换为客户期望的另一个接口的方法。
// Implementation class LegacyPrinter {
printLegacy(text) {
console.log(`Legacy Printing: ${text}`);
}}// Target interfaceclass Printer {
print(text) {}}// Adapterclass PrinterAdapter extends Printer {
constructor() {
super();
this.legacyPrinter = new LegacyPrinter();
}
print(text) {
this.legacyPrinter.printLegacy(text);
}}// Usageconst printer = new PrinterAdapter();printer.print("Hello, World!"); // Output: "Legacy Printing: Hello, World!"
在此代码中，适配器模式用于弥合LegacyPrinter类和所需Printer接口之间的差距。扩展PrinterAdapter了该类Printer并在内部利用了LegacyPrinter来适应该print方法。当printer.print("Hello, World!")被调用时，它有效地触发传统打印功能并输出“传统打印：Hello, World!”。这展示了适配器模式如何通过提供标准化接口来集成不兼容的组件。
桥接模式
桥接模式是一种结构设计模式，它将系统的抽象和实现分开，允许系统独立发展。它通过使用接口或抽象类在两者之间引入了桥梁。下面是一个示例代码片段来说明桥接模式：
// Example class Shape {
constructor(color) {
this.color = color;
}
draw() {}}// Concrete Abstractionsclass Circle extends Shape {
draw() {
console.log(`Drawing a ${this.color} circle`);
}}class Square extends Shape {
draw() {
console.log(`Drawing a ${this.color} square`);
}}// Implementorclass Color {
getColor() {}}// Concrete Implementorsclass RedColor extends Color {
getColor() {
return "red";
}}class BlueColor extends Color {
getColor() {
return "blue";
}}// Usageconst redCircle = new Circle(new RedColor());redCircle.draw(); // Output: "Drawing a red circle"const blueSquare = new Square(new BlueColor());blueSquare.draw(); // Output: "Drawing a blue square"
在此示例中，我们有由 Shape 类表示的抽象，它具有颜色属性和绘制方法。具体抽象（圆形和方形）继承自 Shape 类并实现其特定的绘制行为。由声明该方法Implementor的 Color 类表示getColor。Concrete Implementors、RedColor和BlueColor、 继承自 Color 类并提供各自的颜色实现。
在使用部分，我们创建具体抽象的实例，传递适当的具体实现者对象。这允许抽象将与颜色相关的功能委托给实现者。当我们调用draw方法时，它从Implementor访问颜色并相应地执行绘图操作。
组合模式
组合模式是一种结构设计模式，允许您统一处理单个对象和对象组合。它使您能够创建层次结构，其中每个元素都可以被视为单个对象或对象集合。该模式使用通用接口来表示单个对象（叶节点）和组合（复合节点），允许客户端与它们统一交互。
// Implementation class Employee {
constructor(name) {
this.name = name;
}
print() {
console.log(`Employee: ${this.name}`);
}}// Compositeclass Manager extends Employee {
constructor(name) {
super(name);
this.employees = [];
}
add(employee) {
this.employees.push(employee);
}
remove(employee) {
const index = this.employees.indexOf(employee);
if (index !== -1) {
this.employees.splice(index, 1);
}
}
print() {
console.log(`Manager: ${this.name}`);
for (const employee of this.employees) {
employee.print();
}
}}// Usageconst john = new Employee("John Doe");const jane = new Employee("Jane Smith");const mary = new Manager("Mary Johnson");mary.add(john);mary.add(jane);const peter = new Employee("Peter Brown");const bob = new Manager("Bob Williams");bob.add(peter);bob.add(mary);bob.print();
在此示例中，我们有 Component 类 Employee，它代表各个员工。Composite 类 Manager 扩展了 Employee 类，并且可以包含员工的集合。它提供了在集合中添加和删除员工的方法，并重写 print 方法以显示经理的姓名及其下的员工。
在使用部分，我们创建一个复合层次结构，其中 Manager 对象可以包含单个员工 (Employee) 和其他经理 (Manager)。我们将员工添加到经理中，构建了一个层次结构。最后，我们调用顶级经理的 print 方法，该方法递归地打印层次结构，显示经理及其各自的员工。
- 行为模式
行为模式关注对象之间的交互和职责分配。它们为对象之间的通信、协调和协作提供解决方案。以下是行为模式的类型。
- 观察者模式
- 策略模式
- 命令模式
- 迭代器模式
- 中介者模式
观察者模式
观察者模式在对象之间建立一对多关系，其中多个观察者会收到主体状态变化的通知。它支持对象之间的松耦合并促进事件驱动的通信。
// Implementation example of the Observer Patternclass 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("Observer is notified of changes.");
}}const subject = new Subject();const observer1 = new Observer();const observer2 = new Observer();subject.addObserver(observer1);subject.addObserver(observer2);subject.notifyObservers(); // Output: "Observer is notified of changes." "Observer is notified of changes."
在此示例中，该类Subject代表一个主题，它维护观察者列表并提供添加、删除和通知观察者的方法。该类Observer通过其方法定义观察者的行为update。在使用部分，创建subject该类的实例。Subject使用该方法还创建了两个observer实例并将其添加到主题中addObserver。
subject.notifyObservers()调用时，它会触发update每个观察者的方法。结果，输出“观察者收到更改通知”。被记录两次，表明观察者已被告知主题的变化。
策略模式
策略模式允许您将可互换的算法封装在单独的策略对象中。它支持在运行时动态选择算法，从而提高灵活性和可扩展性。
// Implementation example of the Strategy Patternclass Context {
constructor(strategy) {
this.strategy = strategy;
}
executeStrategy() {
this.strategy.execute();
}}class ConcreteStrategyA {
execute() {
console.log("Strategy A is executed.");
}}class ConcreteStrategyB {
execute() {
console.log("Strategy B is executed.");
}}const contextA = new Context(new ConcreteStrategyA());contextA.executeStrategy(); // Output: "Strategy A is executed."const contextB = new Context(new ConcreteStrategyB());contextB.executeStrategy(); // Output: "Strategy B is executed."
在此示例中，该类表示一个使用属性和方法Context封装不同策略的上下文。有两个具体的策略类和，每个都有自己的方法来输出特定的消息。strategyexecuteStrategyConcreteStrategyAConcreteStrategyBexecute
在使用部分，创建类contextA的实例作为策略。调用会调用 的方法，导致输出“策略 A 已执行”。同样，创建一个实例作为策略，调用会触发的方法，导致输出“策略 B 已执行”。这演示了策略模式如何通过将行为封装在不同的策略对象中来允许在运行时动态选择行为。ContextConcreteStrategyAcontextA.executeStrategy()executeConcreteStrategyAcontextBConcreteStrategyBcontextB.executeStrategy()executeConcreteStrategyB
命令模式
命令模式将请求封装为对象，允许您使用不同的请求对客户端进行参数化、对请求进行排队或记录请求，并支持撤消操作。它将请求的发送者与接收者解耦，从而促进松散耦合和灵活性。
// Implementation class Receiver {
execute() {
console.log("Receiver executes the command.");
}}class Command {
constructor(receiver) {
this.receiver = receiver;
}
execute() {
this.receiver.execute();
}}class Invoker {
setCommand(command) {
this.command = command;
}
executeCommand() {
this.command.execute();
}}const receiver = new Receiver();const command = new Command(receiver);const invoker = new Invoker();invoker.setCommand(command);invoker.executeCommand(); // Output: "Receiver executes the command."
在此示例中，该类Receiver在被调用时执行命令，并且该类Command封装了命令并将执行委托给接收者。该类Invoker设置并执行命令。在使用部分，创建了接收者、命令和调用者。该命令是为调用者设置的，调用invoker.executeCommand()执行该命令，导致输出“接收者执行该命令”。
迭代器模式
迭代器模式是一种行为设计模式，它提供了一种顺序访问聚合对象的元素而不暴露其底层表示的方法。它允许您以统一的方式遍历对象集合，而不管集合的具体实现如何。该模式将遍历逻辑与集合分开，从而促进了一种干净而灵活的方法来迭代元素。
// Implementation class Collection {
constructor() {
this.items = [];
}
addItem(item) {
this.items.push(item);
}
createIterator() {}}// Concrete Aggregateclass ConcreteCollection extends Collection {
createIterator() {
return new ConcreteIterator(this);
}}// Iteratorclass Iterator {
constructor(collection) {
this.collection = collection;
this.index = 0;
}
hasNext() {}
next() {}}// Concrete Iteratorclass ConcreteIterator extends Iterator {
hasNext() {
return this.index < this.collection.items.length;
}
next() {
return this.collection.items[this.index++];
}}// Usageconst collection = new ConcreteCollection();collection.addItem("Item 1");collection.addItem("Item 2");collection.addItem("Item 3");const iterator = collection.createIterator();while (iterator.hasNext()) {
console.log(iterator.next());}
在此代码中，我们有由 Collection 类表示的 Aggregate，它定义了用于创建迭代器对象的接口。具体聚合 (Concrete Aggregate)ConcreteCollection扩展了 Collection 类并提供了迭代器创建的具体实现。
Iterator 由 Iterator 类表示，它定义了访问和遍历元素的接口。具体迭代器 (Concrete Iterator)ConcreteIterator扩展了迭代器类并提供了迭代逻辑的具体实现。在使用部分，我们创建混凝土骨料的实例，ConcreteCollection并向其中添加项目。然后我们使用该方法创建一个迭代器createIterator。通过使用迭代器hasNext和 next 方法，我们迭代集合并打印每个项目。
中介者模式
中介者模式通过引入充当协调对象之间交互的中心枢纽的中介者对象来简化对象通信。它封装了通信逻辑，并为对象提供了注册、发送和接收消息的方法。
// Implementation class Mediator {
constructor() {
this.colleague1 = null;
this.colleague2 = null;
}
setColleague1(colleague) {
this.colleague1 = colleague;
}
setColleague2(colleague) {
this.colleague2 = colleague;
}
notifyColleague1(message) {
this.colleague1.receive(message);
}
notifyColleague2(message) {
this.colleague2.receive(message);
}}class Colleague {
constructor(mediator) {
this.mediator = mediator;
}
send(message) {
// Send a message to the mediator
this.mediator.notifyColleague2(message);
}
receive(message) {
console.log(`Received message: ${message}`);
}}// Usageconst mediator = new Mediator();const colleague1 = new Colleague(mediator);const colleague2 = new Colleague(mediator);mediator.setColleague1(colleague1);mediator.setColleague2(colleague2);colleague1.send("Hello Colleague 2!"); // Output: "Received message: Hello Colleague 2!"
在此示例中，我们有一个 Mediator 类，它充当两个 Colleague 对象之间的中介。中介者保存对同事的引用并提供在他们之间发送消息的方法。
每个Colleague对象都有一个对中介者的引用，并且可以通过通知中介者来发送消息。调解员又将消息转发给适当的同事。在这种情况下，同事 1 向同事 2 发送消息，后者接收并记录该消息。
结论
我们探索了 JavaScript 中的一系列基本设计模式，包括创建模式、结构模式和行为模式。创建模式使我们能够以灵活且高效的方式创建对象。结构模式有助于器官的灵活性和可扩展性。行为模式支持 JavaScript 对象之间的有效通信和交互。通过利用这些设计模式，JavaScript 开发人员可以提高代码的可重用性、可维护性和整体系统性能。有了这些知识，我们就可以构建健壮且高效的 JavaScript 应用程序，以满足现代软件开发的需求。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
