当前位置：首页 > 数据库 > 正文内容

js设计模式有哪几种，JavaScript设计模式全解析

wzgly2个月前 (07-11)数据库3

JavaScript设计模式主要分为三大类：创建型模式、结构型模式和行为型模式，创建型模式包括工厂模式、单例模式和建造者模式等，用于创建对象；结构型模式如适配器模式、装饰者模式和代理模式等，用于处理类或对象的组合；行为型模式如观察者模式、策略模式和命令模式等，用于处理对象间的通信和交互，这些模式在JavaScript开发中广泛应用，有助于提高代码的可维护性和可扩展性。

单例模式（Singleton） 单例模式确保一个类只有一个实例，并提供一个全局访问点，这在需要全局访问某个对象，并且这个对象又只需要一个实例的情况下非常有用。

创建一个全局访问点：通过一个静态方法来获取实例。
确保只有一个实例：使用一个静态变量来存储实例，并在创建新实例时检查这个变量是否已经被赋值。
延迟初始化：实例在第一次使用时才被创建，这可以提高性能。

工厂模式（Factory） 工厂模式用于创建对象，但它将对象的创建过程抽象化，使得客户端代码不需要知道具体创建哪个类的实例。

定义一个工厂函数：该函数根据输入参数返回不同类的实例。
降低创建对象的复杂度：将对象的创建逻辑从客户端代码中分离出来。
增加系统的灵活性：如果需要创建新的对象类型，只需要添加新的工厂函数即可。

观察者模式（Observer） 观察者模式定义了对象之间的一对多依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都会得到通知并自动更新。

定义一个主题（Subject）：主题维护一个观察者列表，并提供添加、删除和通知观察者的方法。
定义一个观察者（Observer）：观察者实现一个更新方法，当主题状态变化时，会自动调用这个方法。
解耦主题和观察者：主题和观察者之间没有直接的依赖关系，提高了系统的可扩展性。

装饰者模式（Decorator） 装饰者模式允许向一个现有的对象添加新的功能，同时又不改变其结构，这种类型的设计模式属于结构型模式，它是作为现有类的一个包装。

定义一个装饰者接口：装饰者需要实现与被装饰对象相同的方法。
创建具体装饰者：具体装饰者实现装饰者接口，并在需要时添加新的功能。
动态添加功能：通过装饰者，可以在不修改原有类代码的情况下，为对象添加新的功能。

策略模式（Strategy） 策略模式定义了算法家族，分别封装起来，让它们之间可以互相替换，此模式让算法的变化独立于使用算法的客户。

定义一个策略接口：策略接口定义了所有支持的算法的公共方法。
实现具体的策略类：每个具体的策略类都实现了策略接口，并实现了自己的算法。
客户端代码使用策略：客户端代码根据需要选择合适的策略类，并使用策略接口调用算法。

通过以上几种设计模式,我们可以更好地组织代码，提高代码的可读性和可维护性，在实际开发中，选择合适的设计模式是非常重要的，希望这篇文章能帮助你更好地理解JavaScript中的设计模式。

其他相关扩展阅读资料参考文献：

单例模式
1. 确保全局唯一实例：通过对象字面量或立即执行函数（IIFE）创建唯一对象，避免重复初始化。var singleton = (function(){ return { init: function(){...} }; })();
2. 隐藏状态与方法：利用闭包封装私有变量和方法，仅暴露公共接口，如：var Counter = (function(){ var count = 0; return { increment: function(){ count++ }, getCount: function(){ return count } }; })();
3. 避免全局污染：通过模块化封装，减少全局变量冲突，使用ES6的const声明单例对象,或通过模块导出控制访问范围。
工厂模式
1. 统一创建对象：通过函数封装对象实例化逻辑，替代new关键字。function createCar(type){ return new Car(type); }
2. 解耦实例化与使用：将对象创建过程独立，便于维护和扩展，如：const instance = Factory.create('User'); 无需关心具体实现类。
3. 支持多类型扩展：通过条件判断或参数传递实现不同对象的创建，新增类型只需扩展工厂函数。if (type === 'Admin') { return new Admin(); }
模块模式
1. 封装私有变量与方法：利用闭包创建私有作用域，仅通过接口暴露功能，如：var Module = (function(){ var privateVar = 10; function privateMethod(){...} return { publicMethod: function(){...} }; })();
2. 模块化代码结构：将相关功能组合为独立模块，提升代码复用性，通过IIFE组织工具函数、数据和逻辑，形成独立组件。
3. 避免命名冲突：通过模块导出控制全局变量污染，适合大型项目中的命名空间管理，如：export default { init, run }; 隔离模块作用域。
观察者模式
1. 事件监听机制：通过addEventListener或自定义事件系统实现对象间通信。document.addEventListener('click', handler);
2. 异步数据同步：利用事件队列确保数据更新的及时性，避免阻塞主线程，如：表单输入事件触发后，异步更新UI状态。
3. 解耦事件发布与订阅：通过事件中心（如EventEmitter）分离事件触发者与监听者，提升系统灵活性。eventBus.on('update', callback); 无需直接关联对象。
策略模式
1. 动态算法切换：将算法封装为独立对象，通过上下文切换策略，支付方式选择payWithCreditCard()或payWithPayPal()。
2. 解耦逻辑与算法：通过策略接口统一调用，避免类中嵌套复杂条件判断，如：const strategy = new StrategyA(); context.executeStrategy(strategy);
3. 支持扩展性：新增策略只需实现接口，无需修改现有代码，添加StrategyB后，直接调用context.setStrategy(new StrategyB());。

深入理解设计模式的核心价值
设计模式并非魔法，而是解决常见问题的标准化方案。单例模式在配置管理中能确保全局唯一配置对象，避免重复加载资源；工厂模式在UI组件库中能统一生成按钮、输入框等元素，降低耦合度；模块模式在工具库开发中能封装私有变量，防止外部篡改；观察者模式在数据驱动应用中能实现事件联动，如表单验证与UI更新的自动同步；策略模式在业务逻辑中能灵活切换处理方式,如不同用户的权限校验规则。

实际应用中的注意事项

避免过度设计：如单例模式在简单场景中可能增加复杂度，需根据需求判断是否必要。
兼容性考量：观察者模式在浏览器中依赖EventTarget接口，需注意兼容性处理（如polyfill）。
性能优化：工厂模式频繁创建对象时，需考虑缓存机制（如使用Object.create或Map存储实例）。
可维护性：策略模式中策略类过多时，需通过抽象类或接口统一管理，避免代码冗余。
副作用控制：模块模式中私有变量修改需谨慎，防止意外状态泄露（如通过Object.freeze冻结对象）。

设计模式的演变与选择
随着ES6模块化的发展，模块模式逐渐被import/export替代，但其核心思想仍适用。观察者模式在React中通过useState和useEffect实现组件间通信，而策略模式在Redux中通过中间件动态切换行为，开发者需根据项目需求选择模式：

小型工具库：优先使用模块模式封装功能。
复杂业务逻辑：采用策略模式或工厂模式分离职责。
实时交互场景：依赖观察者模式处理事件驱动。
避免重复对象：使用单例模式管理全局资源。

设计模式的本质是问题解决
JavaScript设计模式的本质是通过结构化代码提升可维护性、扩展性和协作效率。工厂模式通过统一接口简化对象创建，策略模式通过动态绑定实现灵活配置，观察者模式通过事件机制解耦组件交互，开发者需结合实际场景选择模式，避免盲目套用。模块模式和单例模式适合基础架构，而策略模式和观察者模式更适用于复杂业务，最终目标是让代码更清晰、更易协作,而非追求模式数量。