想掌握 Javascript 设计模式吗？这是您需要了解的一切！

当谈到编写干净、可维护和高效的代码时，设计模式在软件开发领域发挥着至关重要的作用。设计模式是开发人员在设计和构建软件系统时面临的常见问题的可重用解决方案。它们提供了一种结构化的方法来解决特定的挑战，使创建不仅健壮而且更易于理解和维护的代码变得更加容易。 在 ) 中，设计模式充当以提高灵活性、可重用性和可扩展性的方式构建代码的指南。它们概括了已经发展的最佳实践和设计原则，并提炼成经过验证的解决方案。 面向对象编程 (OOP 内容概述 设计模式的类别 常见的设计模式 JavaScript 中的单例模式 JavaScript 中的工厂和抽象工厂模式 JavaScript 中的构建器模式 JavaScript 中的原型模式 JavaScript 中的对象池模式 JavaScript 中的适配器模式 JavaScript 中的装饰器模式 JavaScript 中的代理模式 JavaScript 中的复合模式 JavaScript 中的桥接模式 JavaScript 中的享元模式 JavaScript 中的观察者模式 JavaScript 中的策略模式 JavaScript 中的命令模式 JavaScript 中的状态模式 JavaScript 中的责任链模式 JavaScript 中的访问者模式 结论 设计模式的类别 设计模式可以分为三大类： 这些模式侧重于对象创建机制，尝试以适合情况的方式创建对象。它们抽象了实例化过程，使其更加灵活并且独立于系统。 创建模式： 结构模式处理对象组合，形成对象之间的关系以创建更大、更复杂的结构。它们有助于定义如何组合对象和类以形成新结构并提供新功能。 结构模式： 行为模式涉及对象之间的通信，定义它们如何交互和分配责任。这些模式可帮助您设计对象以更灵活、更高效的方式协作的系统。 行为模式： 常见的设计模式 以下是每个类别中一些常见设计模式的列表： 创作模式 确保一个类只有一个实例，并提供对该实例的全局访问点。 单例模式： 定义用于创建对象的接口，但允许子类更改将创建的对象的类型。 工厂方法模式： 提供一个接口，用于创建相关或依赖对象系列，而无需指定它们的具体类。 抽象工厂模式： 将复杂对象的构造与其表示分离，允许相同的构造过程创建不同的表示。 构建器模式： 通过复制现有对象（称为原型）来创建新对象。 原型模式： 管理可重用对象池，以最大限度地减少对象创建和销毁的开销。 对象池模式： 结构模式 允许将现有类的接口用作另一个接口。 适配器模式： 动态地将附加职责附加到对象，为子类化提供灵活的替代方案。 装饰器模式： 为另一个对象提供代理或占位符来控制对其的访问。 代理模式： 将对象组合成树结构以表示部分-整体层次结构。 复合模式： 将对象的抽象与其实现分开，允许两者独立变化。 桥接模式： 通过与相关对象尽可能共享来最小化内存使用或计算费用。 享元模式： 行为模式 定义对象之间的一对多依赖关系，因此当一个对象更改状态时，它的所有依赖项都会收到通知并自动更新。 观察者模式： 定义一系列算法，封装每个算法，并使它们可以互换。 策略模式： 将请求封装为对象，从而允许使用队列、请求和操作对客户端进行参数化。 命令模式： 允许对象在其内部状态发生变化时改变其行为，将行为包装在单独的类中。 状态模式： 沿着处理程序链传递请求，允许每个处理程序决定是处理请求还是将其传递给链中的下一个处理程序。 责任链模式： 这表示要对对象结构的元素执行的操作，使您能够定义新操作而不更改元素的类。 访问者模式： 在本博客中，我们将深入研究每种设计模式，提供解释、实际用例和 代码示例，以帮助您在项目中有效地理解和实现它们。 JavaScript JavaScript 中的单例模式 单例模式是一种创建型设计模式，可确保类只有一个实例并提供对该实例的全局访问点。当您想要限制应用程序中类的实例数量并控制对单个共享实例的访问时，此模式特别有用。 在 JavaScript 中，由于语言的灵活性，实现单例模式相对简单。让我们深入研究如何在 JavaScript 中创建单例的简单示例。 实施例 // Singleton instance let instance = null; class Singleton { constructor() { if (!instance) { instance = this; // Your initialization code here } else { return instance; } } // Your methods and properties here }// Usage const singletonA = new Singleton(); const singletonB = new Singleton(); console.log(singletonA === singletonB); // Output: true (both variables reference the same instance) 在此示例中，我们创建一个带有构造函数的 Singleton 类，该构造函数检查实例是否已存在。如果实例不存在，它将创建一个实例并将其分配给实例变量。对构造函数的后续调用将返回现有实例，确保 Singleton 类只有一个实例。 现实世界的用例 单例模式在各种场景中都很有用，包括： 您可以使用单例来管理应用程序的配置设置，确保配置值有单一的真实来源。 管理配置设置： 可以使用单例来维护集中式日志记录或错误处理机制，允许您合并日志条目或错误消息。 记录器和错误处理： 在处理数据库时，您可能希望使用单例来确保应用程序之间仅共享一个数据库连接，以最大限度地减少资源消耗。 数据库连接： 实现单例来缓存常用数据可以通过维护单个缓存实例来帮助优化性能。 缓存： 注意事项 虽然单例模式可能很有用，但明智地使用它也很重要。过度使用单例模式可能会导致代码和全局状态紧密耦合，这可能会使您的应用程序更难以维护和测试。因此，权衡利弊并在真正为代码库增加价值的地方应用该模式至关重要。 JavaScript 中的工厂和抽象工厂模式 工厂模式和抽象工厂模式是处理对象创建的创建型设计模式，但它们以不同的方式实现并服务于不同的目的。让我们探索每一个模式，看看如何在 JavaScript 中实现它们。 工厂模式 工厂模式是一种创建模式，它提供用于创建对象的接口，但允许子类更改将创建的对象的类型。它封装了对象创建过程，使其更加灵活并与客户端代码解耦。 实施例 // Product class class Product { constructor(name) { this.name = name; } } // Factory for creating products class ProductFactory { createProduct(name) { return new Product(name); } }// Usage const factory = new ProductFactory(); const productA = factory.createProduct('Product A'); const productB = factory.createProduct('Product B');console.log(productA.name); // Output: 'Product A' console.log(productB.name); // Output: 'Product B' 在此示例中，ProductFactory 负责创建 Product 类的实例。它抽象了创建过程，允许您通过扩展工厂来创建不同类型的产品。 抽象工厂模式 抽象工厂模式是另一种创建模式，它提供了一个接口，用于创建相关或依赖对象系列，而无需指定它们的具体类。它允许您创建和谐协作的对象集。 实施例 // Abstract Product classes class Button { render() {} } class Checkbox { render() {} }// Concrete Product classes class MacButton extends Button { render() { return 'Render Mac button'; } }class MacCheckbox extends Checkbox { render() { return 'Render Mac checkbox'; } }class WindowsButton extends Button { render() { return 'Render Windows button'; } }class WindowsCheckbox extends Checkbox { render() { return 'Render Windows checkbox'; } }// Abstract Factory interface class GUIFactory { createButton() {} createCheckbox() {} }// Concrete Factories class MacFactory extends GUIFactory { createButton() { return new MacButton(); } createCheckbox() { return new MacCheckbox(); } }class WindowsFactory extends GUIFactory { createButton() { return new WindowsButton(); } createCheckbox() { return new WindowsCheckbox(); } }// Usage function createUI(factory) { const button = factory.createButton(); const checkbox = factory.createCheckbox(); return { button, checkbox }; }const macUI = createUI(new MacFactory()); console.log(macUI.button.render()); // Output: 'Render Mac button' console.log(macUI.checkbox.render()); // Output: 'Render Mac checkbox'const windowsUI = createUI(new WindowsFactory()); console.log(windowsUI.button.render()); // Output: 'Render Windows button' console.log(windowsUI.checkbox.render()); // Output: 'Render Windows checkbox' 在此示例中，我们有两个具体工厂：MacFactory 和 WindowsFactory，每个工厂都能够为其各自的平台创建一组相关的 UI 组件（按钮和复选框）。 createUI 函数允许您使用适当的工厂为特定平台创建内聚的 UI。 何时使用哪种模式： 当您想要封装对象创建过程并提供一个简单的接口来创建具有不同实现的对象时， 。 请使用工厂模式 当您需要创建必须一起工作的相关或依赖对象系列时 模式。它有助于确保创建的对象是兼容的和有凝聚力的。 ，请使用抽象工厂 JavaScript 中的构建器模式 构建器模式是一种创建型设计模式，它将复杂对象的构造与其表示分离，允许相同的构造过程创建不同的表示。当您的对象具有大量属性，并且您希望在保持灵活性的同时简化实例的创建时，此模式特别有用。 在 JavaScript 中，构建器模式通常使用构建器类或对象来实现，该构建器类或对象指导复杂对象的逐步构建。让我们深入研究一个示例来了解它是如何工作的。 实施例 // Product class with multiple properties class Product { constructor() { this.name = ''; this.price = 0; this.color = 'white'; // ... other properties } // Additional methods can be defined here }// Builder for creating Product instances class ProductBuilder { constructor() { this.product = new Product(); } setName(name) { this.product.name = name; return this; // Return the builder for method chaining } setPrice(price) { this.product.price = price; return this; } setColor(color) { this.product.color = color; return this; } // Other methods to set additional properties build() { return this.product; // Return the fully constructed product } }// Usage const builder = new ProductBuilder();const productA = builder .setName('Product A') .setPrice(99.99) .setColor('blue') .build();const productB = builder .setName('Product B') .setPrice(49.99) .build();console.log(productA); console.log(productB); 在此示例中，我们有一个具有多个属性的 Product 类。 ProductBuilder 类通过提供逐步设置每个属性的方法来帮助创建 Product 实例。方法链接允许您以流畅且可读的方式设置多个属性。最后，build 方法返回完全构建的 Product 实例。 现实世界的用例 构建器模式在各种场景中都有用，包括： 当您需要创建具有许多可选或可配置属性的对象时，构建器模式可以简化构建过程。 复杂的对象创建： 构建器可用于创建不可变对象，因为您可以在构造期间设置属性，但之后防止修改。 不可变对象： 构建器模式不是在构造函数中使用长参数列表，而是提供了一种更清晰、更有组织的方法来构造对象。 参数化构造函数： 配置库或组件时，构建器可以帮助创建和自定义配置对象。 配置对象： 注意事项 虽然构建器模式提供了许多优点，但值得注意的是，它增加了代码库的复杂性，特别是在构建的对象相对简单的情况下。因此，有必要评估 Builder 引入的复杂性是否适合您的特定用例。 JavaScript 中的原型模式 原型模式是一种创建型设计模式，允许您通过复制现有对象（称为原型）来创建新对象。它促进对象的创建，而无需指定要创建的确切对象类。当您想要高效地创建复杂对象的实例时，此模式特别有用。 在 JavaScript 中，原型模式与内置的 属性和 方法密切相关。让我们探讨如何在 JavaScript 中实现和使用原型模式。 prototype Object.create() 实施例 // Prototype object const vehiclePrototype = { init(make, model) { this.make = make; this.model = model; }, getDetails() { return `${this.make} ${this.model}`; }, }; // Create new instances using the prototype const car1 = Object.create(vehiclePrototype); car1.init('Toyota', 'Camry');const car2 = Object.create(vehiclePrototype); car2.init('Honda', 'Civic');console.log(car1.getDetails()); // Output: 'Toyota Camry' console.log(car2.getDetails()); // Output: 'Honda Civic' 在此示例中，我们定义了一个 对象，其中包含所有车辆通用的方法和属性。我们使用 基于此原型创建新实例（car1 和 car2）。这些实例继承了原型的属性和方法，允许您有效地创建具有共享行为的新对象。 vehiclePrototype Object.create() 现实世界的用例 原型模式在各种场景中都很有价值，包括： 当您需要创建具有相似结构的对象的多个实例时，原型模式可以减少重复设置对象的属性和方法的开销。 减少对象初始化开销： 如果您有具有嵌套结构的复杂对象，原型模式可以通过复制原型来简化类似对象的创建。 克隆复杂对象： 当您想要创建具有不同配置的对象时，可以使用原型通过各种设置来初始化它们。 可配置的对象创建： 注意事项 虽然原型模式很有用，但它有一些注意事项： 默认情况下，JavaScript 的 Object.create() 方法执行属性的浅拷贝。如果原型包含嵌套对象或函数，它们将在实例之间共享。如有必要，您可能需要实现深度复制。 浅拷贝： 修改原型上的属性或方法时要小心，因为它会影响从它创建的所有实例。 原型修改： 原型模式通常需要单独的初始化步骤来设置特定于实例的属性，这可能会增加复杂性。 初始化： JavaScript 中的对象池模式 对象池模式是一种创建型设计模式，它管理可重用对象池，以最大限度地减少对象创建和销毁的开销。当创建和销毁对象成本昂贵或资源密集型时，它特别有用。对象池模式通过回收和重用对象而不是从头开始创建新对象来帮助提高性能和资源利用率。 在 JavaScript 中，您可以使用数组或自定义池管理类来实现对象池模式。让我们通过一个简单的示例来探讨该模式的工作原理。 实施例 class ObjectPool { constructor(maxSize) { this.maxSize = maxSize; this.pool = []; } create() { if (this.pool.length 0) { // Reuse an object from the pool return this.pool.pop(); } else { // Pool is empty, no objects available for reuse console.log('Pool is empty. No objects available for reuse.'); return null; } } release(obj) { // Release an object back to the pool for reuse this.pool.push(obj); } }// Usage const pool = new ObjectPool(5); // Create a pool with a maximum size of 5 objectsconst obj1 = pool.create(); const obj2 = pool.create(); const obj3 = pool.create();pool.release(obj2); // Release obj2 back to the pool for reuseconst obj4 = pool.reuse(); // Reuse an object from the pool (obj2) 在此示例中，我们创建一个管理对象池的 ObjectPool 类。 create 方法在池未满时创建新对象，reuse 方法从池中检索对象以供重用，release 方法将对象返回到池中以供将来使用。 现实世界的用例 对象池模式在各种场景中都很有用，包括： 管理数据库连接可能会占用大量资源。使用对象池可以帮助重用连接、提高性能并减少开销。 数据库连接： 在多线程环境中，可以使用对象池来管理线程，特别是当线程的创建成本很高时。 线程管理： 对于消耗大量内存或需要时间初始化的对象，对象池模式可以减少创建和销毁实例的开销。 资源密集型对象： 注意事项 虽然对象池模式提供了性能优势，但考虑以下事项也很重要： 需要仔细管理资源，以确保对象在使用后正确返回到池中。 资源管理： 选择合适的池大小对于平衡资源利用率和内存消耗至关重要。 池大小： 在多线程环境中，需要实现适当的同步机制来保证线程安全。 线程安全： JavaScript 中的适配器模式 适配器模式是一种结构设计模式，允许具有不兼容接口的对象一起工作。它充当两个不兼容接口之间的桥梁，使它们在不更改源代码的情况下兼容。当您需要集成或使用不太符合应用程序要求的现有代码时，此模式特别有用。 在 JavaScript 中，适配器模式可以使用包装或适应不兼容接口的类或函数来实现。让我们通过一个实际示例来探讨如何在 JavaScript 中实现和使用适配器模式。 实施例 假设您有一个名为 的现有类，其中包含一个名为 的方法： OldSystem legacyRequest class OldSystem { legacyRequest() { return 'Data from the legacy system'; } } 现在，您希望在需要不同界面的现代应用程序中使用这个遗留系统。您可以创建一个适配器类或函数，如下所示： class Adapter { constructor(oldSystem) { this.oldSystem = oldSystem; } newRequest() { const legacyData = this.oldSystem.legacyRequest(); // Adapt the data or perform any necessary transformations return `Adapted: ${legacyData}`; } } 现在，您可以使用 Adapter 类使遗留系统与您的现代应用程序兼容： const oldSystem = new OldSystem(); const adapter = new Adapter(oldSystem); const result = adapter.newRequest(); console.log(result); // Output: 'Adapted: Data from the legacy system' 在此示例中，Adapter 类包装了 OldSystem 并提供了一个新接口 newRequest，它与您的现代应用程序兼容。 现实世界的用例 适配器模式在各种场景中都很有价值，包括： 当您需要将遗留系统或库与现代代码库集成时，适配器可以帮助弥合两者之间的差距。 集成遗留代码： 当使用具有不兼容接口的第三方库或API时，适配器可以使它们符合您的应用程序的要求。 第三方库： 适配器可用于在测试期间创建模拟对象或模拟接口以隔离依赖项。 测试： 适配器可用于维护与不同版本的 API 或库的兼容性。 版本兼容性： 注意事项 虽然适配器模式提供了灵活性和兼容性，但必须考虑以下几点： 由于额外的方法调用和数据转换，适配器可能会引入一些开销。根据需要进行测量和优化。 性能： 保持适配器代码干净并有详细记录，以确保未来的开发人员了解适配器的目的和用法。 可维护性： 小心不要创建过于复杂的适配器，以免尝试做太多事情。让他们专注于特定的适应任务。 接口复杂性： JavaScript 中的装饰器模式 装饰器模式是一种结构设计模式，允许您动态地向对象添加新的行为或职责，而无需更改其现有代码。这是通过用装饰器对象包装对象来扩展对象功能的有效方法。这种模式提倡“开放扩展，但封闭修改”的原则，使得可以轻松地向对象添加新功能，而无需更改其核心实现。 在 JavaScript 中，装饰器模式可以使用类和对象组合来实现。让我们通过一个实际示例来探讨如何在 JavaScript 中实现和使用装饰器模式。 实施例 假设您有一个基类 ： Coffee class Coffee { cost() { return 5; // Base cost of a regular coffee } } Now, you want to add decorators to your coffee to customize it with additional options, such as milk and sugar: javascript Copy code class MilkDecorator { constructor(coffee) { this.coffee = coffee; } cost() { return this.coffee.cost() + 2; // Adding the cost of milk } }class SugarDecorator { constructor(coffee) { this.coffee = coffee; } cost() { return this.coffee.cost() + 1; // Adding the cost of sugar } } 然后，您可以像这样创建装饰咖啡实例： const regularCoffee = new Coffee(); const coffeeWithMilk = new MilkDecorator(regularCoffee); const coffeeWithMilkAndSugar = new SugarDecorator(coffeeWithMilk); console.log(regularCoffee.cost()); // Output: 5 console.log(coffeeWithMilk.cost()); // Output: 7 console.log(coffeeWithMilkAndSugar.cost()); // Output: 8 在此示例中，我们有代表基础咖啡的 Coffee 类。 MilkDecorator 和 SugarDecorator 类是包装咖啡对象并将牛奶和糖的成本分别添加到基本成本的装饰器。 现实世界的用例 装饰器模式在各种场景中都很有价值，包括： 您可以使用装饰器向类添加功能，而无需修改其源代码，从而可以轻松引入新功能。 扩展类： 装饰器允许在运行时动态组合对象，使您能够从简单的组件构建复杂的对象。 动态组合： 您可以通过应用装饰器的不同组合来自定义对象，从而提供灵活性和可配置性。 自定义： 装饰器可用于记录或分析方法调用，而无需修改原始类。 日志记录和分析： 注意事项 虽然装饰器模式用途广泛，但记住一些注意事项很重要： 应用装饰器的顺序会影响最终行为，因此请注意包装对象的顺序。 装饰顺序： 过度使用装饰器可能会导致代码复杂且令人费解，因此请仔细考虑装饰器是否是适合您的用例的最佳解决方案。 复杂性： 确保装饰器遵守通用接口或约定，以保持与它们装饰的对象的兼容性。 接口兼容性： JavaScript 中的代理模式 代理模式是一种结构设计模式，它为另一个对象提供代理或占位符来控制对其的访问。它充当目标对象的中介或包装器，允许您添加其他行为、控制访问或延迟对象创建。代理模式在各种场景中都很有用，例如实现延迟加载、访问控制和日志记录。 在 JavaScript 中，可以使用内置的 对象创建代理。让我们通过实际例子来探讨如何在 JavaScript 中实现和使用代理模式。 Proxy 实施例 使用代理延迟加载 假设您有一个资源密集型对象，您只想在需要时才延迟加载。可以使用代理来实现延迟加载： class ExpensiveResource { constructor() { console.log('Creating an expensive resource...'); } fetchData() { console.log('Fetching data...'); } }class LazyResourceProxy { constructor() { this.resource = null; } fetchData() { if (!this.resource) { this.resource = new ExpensiveResource(); } this.resource.fetchData(); } }// Usage const lazyResource = new LazyResourceProxy(); // The actual resource is created and data is fetched only when needed lazyResource.fetchData(); 在此示例中，LazyResourceProxy 充当 ExpenseResource 的代理，仅在第一次调用 fetchData 方法时创建实际资源。 使用代理进行访问控制 您还可以使用代理来控制对对象及其属性的访问： const user = { username: 'john_doe', password: 'secret123', }; const userProxy = new Proxy(user, { get(target, property) { if (property === 'password') { throw new Error('Access denied to password.'); } return target[property]; }, });console.log(userProxy.username); // Output: 'john_doe' console.log(userProxy.password); // Throws an error: 'Access denied to password.' 在此示例中，代理拦截 get 操作并限制对密码属性的访问。 现实世界的用例 代理模式在各种场景中都很有价值，包括： 您可以使用代理来推迟资源密集型对象的创建和初始化，直到实际需要它们为止。 延迟加载： 代理可以强制执行访问控制策略，允许您限制或授予对某些属性或方法的访问权限。 访问控制： 代理可以实现缓存机制，通过存储和返回缓存数据来提高性能，而不是进行昂贵的操作。 缓存： 代理可以记录或分析方法调用，帮助您深入了解对象的行为。 日志记录和分析： 注意事项 使用代理模式时，请记住以下注意事项： 由于操作的拦截，代理可能会带来一些开销。请注意性能影响，尤其是在性能关键型代码中。 开销： 确保代理遵循与目标对象相同的接口，以保持与现有代码的兼容性。 兼容性： 虽然代理可以帮助控制访问，但不应将其作为唯一的安全措施。可能需要额外的安全措施，尤其是在服务器端。 安全性： JavaScript 中的复合模式 复合模式是一种结构设计模式，允许您将对象组合成树状结构来表示部分-整体层次结构。它允许客户统一处理单个对象和对象组合。当您需要处理由较小的相关对象组成的复杂结构，同时保持一致的界面时，复合模式特别有用。 在 JavaScript 中，您可以使用共享公共接口的类或对象来实现复合模式，从而使您能够构建层次结构。让我们通过实际示例探讨如何在 JavaScript 中实现和使用复合模式。 实施例 假设您正在构建一个图形设计应用程序，该应用程序需要处理简单的形状和复杂的形状组合（例如，组）。您可以使用复合模式来表示此层次结构： // Component interface class Graphic { draw() {} } // Leaf class (represents simple shapes) class Circle extends Graphic { constructor() { super(); // Circle-specific properties and methods } draw() { // Draw a circle } }// Composite class (represents groups of shapes) class Group extends Graphic { constructor() { super(); this.graphics = []; } add(graphic) { this.graphics.push(graphic); } draw() { // Draw each graphic in the group this.graphics.forEach((graphic) => graphic.draw()); } }// Usage const circle1 = new Circle(); const circle2 = new Circle(); const group = new Group();group.add(circle1); group.add(circle2);group.draw(); // Draws both circles in the group 在此示例中，Graphic 类充当组件接口。 Circle 类表示简单形状，而 Group 类表示形状的组合。 Circle 和 Group 类都实现了 draw 方法，允许您在渲染时统一对待它们。 现实世界的用例 复合模式在各种场景中都很有价值，包括： 它用于表示复杂的用户界面或图形场景，您需要在其中一致地处理单个元素和元素组。 图形和 UI 框架： 复合模式可以表示分层文件系统，其中文件和目录共享公共接口。 文件系统： 它可用于对组织结构进行建模，例如公司内的部门或大学内的部门。 组织结构： 当您的组件可以包含其他组件（例如，包含输入字段的表单）时，复合模式有助于管理结构。 嵌套组件： 注意事项 使用复合模式时，请考虑以下事项： 虽然该模式简化了复杂结构的处理，但它也会引入复杂性，尤其是在处理深层层次结构时。 复杂性： 确保所有组件（叶子和组合）共享一个公共接口以保持一致性。 统一接口： 根据实现的不同，遍历复合结构可能会对性能产生影响，因此请根据需要进行优化。 性能： JavaScript 中的桥接模式 桥接模式是一种结构设计模式，它将对象的抽象与其实现分开。它允许您在两者之间建立一座桥梁，使它们能够独立变化。当您想要避免抽象与其实现之间的永久绑定时，此模式特别有用，从而使您的代码更加灵活和可维护。 在 JavaScript 中，桥接模式可以使用类和对象来实现，这些类和对象为抽象提供抽象接口，并为各种平台或功能提供不同的具体实现。让我们通过实际示例探讨如何在 JavaScript 中实现和使用桥接模式。 实施示例 假设您正在构建一个绘图应用程序，可以在不同平台（例如 Web 浏览器和移动设备）上渲染形状。您可以使用桥接模式将绘图形状（抽象）与渲染逻辑（实现）分开： // Abstraction class Shape { constructor(renderer) { this.renderer = renderer; } draw() { // Delegating the drawing to the specific renderer this.renderer.renderShape(this); } }// Implementor interface class Renderer { renderShape(shape) {} }// Concrete Implementors class WebRenderer extends Renderer { renderShape(shape) { console.log(`Drawing on the web: ${shape.constructor.name}`); } }class MobileRenderer extends Renderer { renderShape(shape) { console.log(`Drawing on mobile: ${shape.constructor.name}`); } }// Concrete Abstractions (Shapes) class Circle extends Shape { constructor(renderer) { super(renderer); } }class Square extends Shape { constructor(renderer) { super(renderer); } }// Usage const webRenderer = new WebRenderer(); const mobileRenderer = new MobileRenderer();const circle = new Circle(webRenderer); const square = new Square(mobileRenderer);circle.draw(); // Output: Drawing on the web: Circle square.draw(); // Output: Drawing on mobile: Square 在此示例中，Shape 类表示抽象（要绘制的形状），Renderer 类表示实现者接口（特定于平台的渲染逻辑）。不同的具体实现器（WebRenderer 和 MobileRenderer）分别为 Web 和移动平台提供渲染逻辑。 Circle 和 Square 类是表示形状的具体抽象。 现实世界的用例 桥接模式在各种场景中都很有价值，包括： 当您想要确保抽象和实现可以独立变化时，从而更容易支持多个平台。 平台独立性： 它可以在数据库驱动程序中使用，将数据库特定的代码（实现）与数据库操作（抽象）分开。 数据库驱动程序： 在图形用户界面 (GUI) 框架中，桥接模式可以帮助将用户界面元素与底层窗口系统分开。 GUI 框架： 在处理硬件或设备驱动程序时，此模式允许您将设备特定的代码与更高级别的应用程序代码分开。 设备驱动程序： 注意事项 使用桥接模式时，请考虑以下事项： 虽然该模式提供了灵活性，但它会增加代码库的复杂性，特别是在处理许多抽象和实现时。 复杂性： 确保抽象和实现在发生变化时保持同步，因为它们可以独立发展。 维护： 仔细设计抽象和实现接口，以确保它们满足您的应用程序的要求。 接口设计： JavaScript 中的享元模式 享元模式是一种结构设计模式，旨在通过共享对象的公共部分来减少内存消耗并提高性能。它通过将对象的内在状态（共享且不可变）与其外在状态（唯一且依赖于上下文）分离来实现此目的。当您有大量相似的对象并希望最大限度地减少内存占用时，此模式特别有用。 在 JavaScript 中，您可以使用类或对象来表示共享的内部状态和单独的外部状态来实现享元模式。让我们通过实际示例来探讨如何在 JavaScript 中实现和使用享元模式。 实施例 假设您正在开发一个需要显示大量文本的文本编辑器。当角色对象具有相同的内在属性（例如，字体和大小）时，您可以使用享元模式来共享角色对象，而不是为每个角色创建单独的对象： class Character { constructor(char, font, size) { this.char = char; this.font = font; this.size = size; } render() { console.log(`Rendering character "${this.char}" in ${this.font}, size ${this.size}`); } }class CharacterFactory { constructor() { this.characters = {}; } getCharacter(char, font, size) { const key = `${char}-${font}-${size}`; if (!this.characters[key]) { this.characters[key] = new Character(char, font, size); } return this.characters[key]; } }// Usage const factory = new CharacterFactory();const charA1 = factory.getCharacter('A', 'Arial', 12); const charA2 = factory.getCharacter('A', 'Arial', 12); const charB = factory.getCharacter('B', 'Times New Roman', 14);charA1.render(); // Output: Rendering character "A" in Arial, size 12 charA2.render(); // Output: Rendering character "A" in Arial, size 12 (shared instance) charB.render(); // Output: Rendering character "B" in Times New Roman, size 14 在此示例中，Character 类表示具有字符本身、字体和大小等内在属性的单个字符。 CharacterFactory 类确保具有相同内在属性的字符被共享而不是重复。 现实世界的用例 享元模式在各种场景中都很有价值，包括： 处理大量文本时，可以通过共享通用字符、字体或其他文本相关属性来显着减少内存消耗。 文本处理： 在游戏开发中，它用于优化共享某些特征（例如纹理或材质）的对象的渲染。 游戏开发： 它可以应用于具有共享样式、字体或图标的UI组件，以最大限度地减少资源使用。 用户界面（UI）： 该模式可用于缓存经常使用的对象或数据以提高性能。 缓存： 注意事项 使用享元模式时，请考虑以下事项： 仔细识别并将对象的内在状态与外在状态分开。内在状态应该共享，而外在状态可以变化。 识别内在状态： 如果您的应用程序是多线程的，请确保享元对象是线程安全的。 线程安全： 虽然享元模式减少了内存使用量，但由于需要查找和共享实例，它可能会带来轻微的性能开销。 内存与性能： JavaScript 中的观察者模式 观察者模式是一种行为设计模式，它在对象之间建立一对多的依赖关系。它允许一个对象（主体或可观察对象）向多个观察者（侦听器）通知其状态或数据的变化。此模式通常用于实现分布式事件处理系统，其中一个对象的状态更改会触发其他依赖对象中的操作。 在 JavaScript 中，您可以使用自定义类或内置功能（例如事件侦听器和 方法）来实现观察者模式。让我们通过实际例子来探讨如何在 JavaScript 中实现和使用观察者模式。 addEventListener 实施例 自定义观察者模式 假设您正在构建一个天气应用程序，并且您希望 UI 的不同部分在天气条件发生变化时更新。您可以使用观察者模式的自定义实现： class WeatherStation { 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(this); }); } setWeatherData(weatherData) { this.weatherData = weatherData; this.notifyObservers(); } }class WeatherDisplay { update(weatherStation) { console.log(`Current weather: ${weatherStation.weatherData}`); } }// Usage const weatherStation = new WeatherStation(); const display1 = new WeatherDisplay(); const display2 = new WeatherDisplay();weatherStation.addObserver(display1); weatherStation.addObserver(display2);weatherStation.setWeatherData('Sunny'); // Both displays update with the new weather data 在此示例中，WeatherStation 充当主体，在天气数据发生变化时通知观察者（显示对象）。观察者使用 addObserver 方法订阅主题，并实现 update 方法来对更改做出反应。 使用事件监听器 JavaScript 还提供了一种使用事件监听器实现观察者模式的内置方法： class NewsPublisher { constructor() { this.subscribers = []; } subscribe(subscriber) { this.subscribers.push(subscriber); } unsubscribe(subscriber) { const index = this.subscribers.indexOf(subscriber); if (index !== -1) { this.subscribers.splice(index, 1); } } publishNews(news) { this.subscribers.forEach((subscriber) => { subscriber(news); }); } }// Usage const publisher = new NewsPublisher();const subscriber1 = (news) => { console.log(`Subscriber 1 received news: ${news}`); };const subscriber2 = (news) => { console.log(`Subscriber 2 received news: ${news}`); };publisher.subscribe(subscriber1); publisher.subscribe(subscriber2);publisher.publishNews('Breaking News: Important Announcement'); 在此示例中，NewsPublisher 充当主题，并使用 subscribe 方法添加订阅者（函数）。 publishNews 方法通过调用新闻函数来通知订阅者。 现实世界的用例 观察者模式在各种场景中都很有价值，包括： 在图形用户界面 (GUI) 中实现事件处理，其中 UI 组件对用户操作做出反应。 用户界面： 构建发布-订阅系统以将消息或事件分发给多个订阅者。 发布-订阅系统： 将模型（数据）与视图（UI）分离，并通知视图有关模型中的更改。 模型-视图-控制器 (MVC)： 创建自定义事件驱动系统来管理状态更改和交互。 自定义事件处理： 注意事项 使用观察者模式时，请考虑以下事项： 当观察者持有对主题的引用时，请小心内存泄漏。确保在不再需要观察员时正确移除观察员。 内存管理： 在某些情况下，通知观察者的顺序可能很重要。确保订单满足您的应用程序的要求。 通知顺序： 使用内置事件处理机制时，请注意 DOM 中的事件传播和冒泡（如果适用）。 事件处理： JavaScript 中的策略模式 策略模式是一种行为设计模式，它允许您定义一系列可互换的算法，封装每个算法，并使它们可以互换。它使客户端能够在运行时动态选择适当的算法。这种模式通过将算法的行为与使用它的上下文分开来提高灵活性和可重用性。 在 JavaScript 中，您可以使用对象或函数来表示不同的策略以及可以在这些策略之间切换的上下文对象来实现策略模式。让我们通过实际示例探讨如何在 JavaScript 中实现和使用策略模式。 实施例 假设您正在开发一个电子商务应用程序，并且您想要计算不同类型客户的折扣。您可以使用策略模式来封装折扣策略： // Discount Strategies const regularCustomerDiscount = (amount) => amount * 0.1; // 10% discount const premiumCustomerDiscount = (amount) => amount * 0.2; // 20% discount // Context class ShoppingCart { constructor(discountStrategy) { this.items = []; this.discountStrategy = discountStrategy; } addItem(item) { this.items.push(item); } calculateTotal() { const subtotal = this.items.reduce((total, item) => total + item.price, 0); return subtotal - this.discountStrategy(subtotal); } }// Usage const regularCustomerCart = new ShoppingCart(regularCustomerDiscount); const premiumCustomerCart = new ShoppingCart(premiumCustomerDiscount);regularCustomerCart.addItem({ name: 'Item 1', price: 50 }); premiumCustomerCart.addItem({ name: 'Item 2', price: 100 });console.log(`Regular Customer Total: $${regularCustomerCart.calculateTotal()}`); // Output: $45 (after 10% discount) console.log(`Premium Customer Total: $${premiumCustomerCart.calculateTotal()}`); // Output: $80 (after 20% discount) 在此示例中，我们将两个折扣策略定义为函数（regularCustomerDiscount 和 premiumCustomerDiscount）。 ShoppingCart 类将折扣策略作为参数，并根据所选策略计算总价。 现实世界的用例 策略模式在各种场景中都很有价值，包括： 当您需要从一系列算法中动态选择一个算法时。 算法选择： 使用不同的行为选项配置应用程序，例如排序算法或数据存储策略。 配置和设置： 允许用户通过提供不同的策略来定制和扩展应用程序的行为。 可定制的行为： 在单元测试中，您可以使用策略模式来提供组件的模拟实现以进行测试。 测试和模拟： 注意事项 使用策略模式时，请考虑以下事项： 确保上下文和策略之间的清晰分离，以维护干净且可维护的代码库。 清晰的分离： 动态切换策略的能力是该模式的一个关键特征。确保您的设计支持这种灵活性。 动态切换： 注意策略如何初始化并传递到上下文，以确保使用正确的策略。 策略初始化： JavaScript 中的命令模式 命令模式是一种行为设计模式，它将请求或简单操作转换为独立的对象。它允许您使用不同的请求参数化对象，延迟或排队请求的执行，并支持可撤消的操作。这种模式将请求的发送者与其接收者解耦，从而可以轻松扩展和维护代码。 在 JavaScript 中，您可以使用对象或类来表示命令和执行这些命令的调用程序来实现命令模式。让我们通过实际示例探讨如何在 JavaScript 中实现和使用命令模式。 实施例 假设您正在为智能家居开发远程控制应用程序，并且您希望创建一种灵活的方式来控制各种设备。 您可以使用命令模式： // Command interface class Command { execute() {} } // Concrete Commands class LightOnCommand extends Command { constructor(light) { super(); this.light = light; } execute() { this.light.turnOn(); } }class LightOffCommand extends Command { constructor(light) { super(); this.light = light; } execute() { this.light.turnOff(); } }// Receiver (Device) class Light { turnOn() { console.log('Light is on.'); } turnOff() { console.log('Light is off.'); } }// Invoker (Remote Control) class RemoteControl { constructor() { this.commands = []; } addCommand(command) { this.commands.push(command); } executeCommands() { this.commands.forEach((command) => { command.execute(); }); } }// Usage const livingRoomLight = new Light(); const kitchenLight = new Light();const livingRoomLightOn = new LightOnCommand(livingRoomLight); const livingRoomLightOff = new LightOffCommand(livingRoomLight); const kitchenLightOn = new LightOnCommand(kitchenLight); const kitchenLightOff = new LightOffCommand(kitchenLight);const remoteControl = new RemoteControl();remoteControl.addCommand(livingRoomLightOn); remoteControl.addCommand(kitchenLightOff);remoteControl.executeCommands(); // Output: "Light is on." (for living room) // Output: "Light is off." (for kitchen) 在此示例中，命令模式用于封装开灯和关灯的操作。 RemoteControl充当调用者，具体命令（例如，LightOnCommand和LightOffCommand）封装要执行的动作。 现实世界的用例 命令模式在各种场景中都很有价值，包括： 它通常在图形用户界面 (GUI) 中用于实现撤消和重做功能，其中每个用户操作都封装为命令。 GUI 应用程序： 在智能设备的远程控制应用中，它提供了一种灵活的方式来通过不同的命令控制各种设备。 远程控制系统： 当您需要排队并执行一系列具有不同参数或设置的请求或任务时。 批处理： 在数据库系统中，它可用于将数据库操作封装为命令，支持事务行为。 事务管理： 注意事项 使用命令模式时，请考虑以下事项： 确保命令被适当抽象，封装单个动作或操作。 命令抽象： 如果您需要撤消和重做功能，请实施必要的机制来支持反转命令。 撤消和重做： 请注意创建多个命令类所带来的复杂性，尤其是在具有大量可能命令的场景中。 复杂性： JavaScript 中的状态模式 状态模式是一种行为设计模式，允许对象在其内部状态发生变化时改变其行为。它将状态封装为单独的类并将行为委托给当前状态对象。这种模式有助于管理复杂的状态转换并促进“开放-封闭”原则，使得无需修改现有代码即可轻松添加新状态。 在 JavaScript 中，您可以使用表示状态的类和将其行为委托给当前状态的上下文对象来实现状态模式。让我们通过实际示例探讨如何在 JavaScript 中实现和使用状态模式。 实施例 假设您正在开发一台分配不同产品的自动售货机。自动售货机的行为取决于其当前状态，例如“就绪”、“正在分发”或“售完”。您可以使用状态模式来模拟此行为： // State interface class VendingMachineState { insertMoney() {} ejectMoney() {} selectProduct() {} dispenseProduct() {} } // Concrete States class ReadyState extends VendingMachineState { constructor(machine) { super(); this.machine = machine; } insertMoney() { console.log('Money inserted.'); this.machine.setState(this.machine.getDispensingState()); } selectProduct() { console.log('Please insert money first.'); } }class DispensingState extends VendingMachineState { constructor(machine) { super(); this.machine = machine; } dispenseProduct() { console.log('Product dispensed.'); this.machine.setState(this.machine.getReadyState()); } }class VendingMachine { constructor() { this.readyState = new ReadyState(this); this.dispensingState = new DispensingState(this); this.currentState = this.readyState; } setState(state) { this.currentState = state; } getReadyState() { return this.readyState; } getDispensingState() { return this.dispensingState; } insertMoney() { this.currentState.insertMoney(); } selectProduct() { this.currentState.selectProduct(); } dispenseProduct() { this.currentState.dispenseProduct(); } }// Usage const vendingMachine = new VendingMachine();vendingMachine.selectProduct(); // Output: "Please insert money first." vendingMachine.insertMoney(); // Output: "Money inserted." vendingMachine.dispenseProduct(); // Output: "Product dispensed." 在此示例中，状态模式用于管理自动售货机的行为。 “就绪”和“分配”等状态表示为单独的类，上下文（自动售货机）将其行为委托给当前状态。 现实世界的用例 状态模式在各种场景中都很有价值，包括： 管理具有不同状态和转换的应用程序的工作流，例如订单处理或审批工作流。 工作流管理： 实现根据游戏状态而变化的游戏角色行为，例如“空闲”、“攻击”或“防御”。 游戏开发： 根据不同的用户交互或应用程序状态处理 UI 组件的行为。 用户界面 (UI)： 实现用于解析、验证或网络通信的有限状态机。 有限状态机： 注意事项 使用状态模式时，请考虑以下事项： 确保状态转换定义良好并且状态有效地封装其行为。 状态转换： 管理上下文的状态转换并确保它将行为正确地委托给当前状态。 上下文管理： 请注意处理复杂应用程序中的许多状态和转换时可能出现的复杂性。 复杂性： JavaScript 中的责任链模式 责任链模式是一种行为设计模式，可帮助您构建对象链来处理请求。链中的每个对象都有机会处理请求或将其传递给链中的下一个对象。它将请求的发送者与其接收者解耦，并允许链中存在多个处理程序。此模式使您能够在不影响客户端代码的情况下添加或修改处理程序，从而提高了灵活性和可扩展性。 在 JavaScript 中，您可以使用代表处理程序和发起请求的客户端的对象或类来实现责任链模式。每个处理程序都有对链中下一个处理程序的引用。让我们通过实际示例探讨如何在 JavaScript 中实现和使用责任链模式。 实施示例 假设您正在开发一个订单处理系统，并且您希望根据订单总额来处理订单。您可以使用责任链模式创建一个处理程序链，每个处理程序负责处理特定价格范围内的订单： // Handler interface class OrderHandler { constructor() { this.nextHandler = null; } setNextHandler(handler) { this.nextHandler = handler; } handleOrder(order) { if (this.canHandleOrder(order)) { this.processOrder(order); } else if (this.nextHandler) { this.nextHandler.handleOrder(order); } else { console.log('No handler can process this order.'); } } canHandleOrder(order) {} processOrder(order) {} }// Concrete Handlers class SmallOrderHandler extends OrderHandler { canHandleOrder(order) { return order.amount 500; } processOrder(order) { console.log(`Processing large order for ${order.amount}`); } }// Client class Order { constructor(amount) { this.amount = amount; } }// Usage const smallOrderHandler = new SmallOrderHandler(); const mediumOrderHandler = new MediumOrderHandler(); const largeOrderHandler = new LargeOrderHandler();smallOrderHandler.setNextHandler(mediumOrderHandler); mediumOrderHandler.setNextHandler(largeOrderHandler);const order1 = new Order(80); const order2 = new Order(250); const order3 = new Order(600);smallOrderHandler.handleOrder(order1); // Output: "Processing small order for 80" smallOrderHandler.handleOrder(order2); // Output: "Processing medium order for 250" smallOrderHandler.handleOrder(order3); // Output: "Processing large order for 600" 在此示例中，责任链模式用于处理不同金额的订单。 SmallOrderHandler、MediumOrderHandler 和 LargeOrderHandler 等处理程序各自根据订单金额确定是否可以处理订单。如果可以，他们就会处理它；如果可以的话，他们就会处理它。否则，他们会将订单传递给链中的下一个处理程序。 现实世界的用例 责任链模式在各种场景中都很有价值，包括： 管理 HTTP 请求处理管道，其中每个中间件或处理程序都可以处理或转发请求。 请求处理： 以结构化方式处理日志消息或错误，每个处理程序负责特定类型的日志消息或错误条件。 日志记录和错误处理： 在事件驱动的系统中，您可以使用此模式来处理具有多个订阅者的事件，其中每个订阅者都可以处理或过滤事件。 事件处理： 按顺序实施身份验证和授权检查，每个处理程序验证请求的特定方面。 授权和身份验证： 注意事项 使用责任链模式时，请考虑以下事项： 确保链配置正确，处理程序按正确的顺序设置。 链配置： 每个处理者应有明确的职责，并且不应与其他处理者的职责重叠。 处理者职责： 包括链中没有处理程序可以处理请求的情况的逻辑。 默认处理： JavaScript 中的访问者模式 访问者模式是一种行为设计模式，允许您将算法与其运行的对象结构分开。它提供了一种向对象添加新操作而无需修改其类的方法，从而可以轻松扩展复杂对象层次结构的功能。当您有一组不同的元素并希望在不修改其代码的情况下对它们执行各种操作时，此模式特别有用。 在 JavaScript 中，您可以使用函数或类来实现访问者模式，以表示访问对象结构中的元素的访问者。让我们通过实际示例探讨如何在 JavaScript 中实现和使用访问者模式。 实施例 假设您正在开发一个内容管理系统，其中有不同类型的内容元素，例如文章、图像和视频。您希望对这些元素执行各种操作，例如渲染和导出，而不修改它们的类。您可以使用访客模式： // Element interface class ContentElement { accept(visitor) {} } // Concrete Elements class Article extends ContentElement { accept(visitor) { visitor.visitArticle(this); } }class Image extends ContentElement { accept(visitor) { visitor.visitImage(this); } }class Video extends ContentElement { accept(visitor) { visitor.visitVideo(this); } }// Visitor interface class Visitor { visitArticle(article) {} visitImage(image) {} visitVideo(video) {} }// Concrete Visitors class RendererVisitor extends Visitor { visitArticle(article) { console.log(`Rendering article: ${article.title}`); } visitImage(image) { console.log(`Rendering image: ${image.caption}`); } visitVideo(video) { console.log(`Rendering video: ${video.title}`); } }class ExportVisitor extends Visitor { visitArticle(article) { console.log(`Exporting article: ${article.title}`); } visitImage(image) { console.log(`Exporting image: ${image.caption}`); } visitVideo(video) { console.log(`Exporting video: ${video.title}`); } }// Usage const elements = [new Article('Article 1'), new Image('Image 1'), new Video('Video 1')]; const renderer = new RendererVisitor(); const exporter = new ExportVisitor();elements.forEach((element) => { element.accept(renderer); element.accept(exporter); }); 在此示例中，我们有文章、图像和视频等内容元素，我们希望在不修改其类的情况下对它们执行渲染和导出操作。我们通过实现访问者类（例如 RendererVisitor 和 ExportVisitor）来访问元素并执行所需的操作来实现此目的。 现实世界的用例 访客模式在各种场景中都很有价值，包括： 处理文档中的元素，例如 HTML 或 XML，其中不同的访问者可以执行解析、呈现或转换操作。 文档处理： 在编译器中，访问者可以遍历和分析编程语言的抽象语法树 (AST)，以实现类型检查、优化和代码生成等各种目的。 编译器设计： 当使用树或图等复杂数据结构时，访问者可以遍历和操作数据的结构或内容。 数据结构： 在报告系统中，访问者可以生成报告、执行数据分析或从数据集中提取特定信息。 报告和分析： 注意事项 使用访问者模式时，请考虑以下事项： 该模式可以通过创建新的访问者类轻松添加新操作，而无需修改现有元素。 可扩展性： 请注意，该模式可能会引入额外的复杂性，特别是对于简单的对象结构。 复杂性： 确保元素正确封装其状态并通过访问者方法提供访问。 封装： 结论 在对 JavaScript 设计模式的全面探索中，我们深入研究了各种模式，使开发人员能够创建灵活、可维护且高效的代码。每种设计模式都解决特定的问题，并为常见的软件设计挑战提供优雅的解决方案。 我们首先了解设计模式的基本概念，并将它们分为三大类：创建模式、结构模式和行为模式。在每个类别中，我们研究了流行的设计模式并展示了它们在 JavaScript 中的实际实现。 以下是我们所讨论的关键设计模式的简要回顾： 这些模式侧重于对象创建机制，包括用于确保类的单个实例的单例模式、用于使用灵活工厂创建对象的工厂和抽象工厂模式、用于逐步构造复杂对象的构建器模式、用于克隆的原型模式对象和对象池模式以实现有效的对象重用。 创建模式： 这些模式处理对象组合，提供从更简单的组件构建复杂结构的方法。我们探索了用于适配接口的适配器模式、用于动态向对象添加行为的装饰器模式、用于控制对对象的访问的代理模式、用于将对象组合成树结构的复合模式、用于将抽象与实现分离的桥接模式以及享元模式通过共享公共状态来最小化内存使用的模式。 结构模式： 这些模式涉及对象之间的交互和通信。我们涵盖了用于实现分布式事件处理系统的观察者模式、用于封装可互换算法的策略模式、用于将请求转换为独立对象的命令模式、用于基于内部状态管理对象行为的状态模式、用于构建分布式事件处理系统的责任链模式。用于处理请求的处理程序链，以及用于将算法与对象结构分离的访问者模式。 行为模式： 设计模式是开发人员工具包中的宝贵工具，可以创建可扩展且可维护的代码库。在 JavaScript 项目中理解和应用这些模式可以让您编写更高效、适应性更强且健壮的软件。 请记住，设计模式并不是一刀切的解决方案，其适用性取决于项目的具体要求和挑战。仔细考虑何时以及如何应用它们以获得最佳结果。 随着您作为 JavaScript 开发人员的不断成长，掌握这些设计模式将使您能够充满信心和创造力地应对复杂的软件设计挑战。无论您是构建 Web 应用程序、游戏引擎还是任何其他软件，设计模式都将是您编写优雅且可维护的代码的盟友。快乐编码！ 也发布 。 在这里