前端开发设计模式：架构

一、设计模式是什么

设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。是指导思想和方法论，而不是现成的代码。

设计模式是通过概念总结出来的模板，每一个模式对应在某种场合下对某个问题的一种解决方案。

设计模式是一套被广泛应用的思想，能帮忙开发者解决常见的问题并提供可重用的解决方案。

 

二、为什么要用设计模式

1. 代码可重用性
2. 代码更容易被他人理解
3. 保证代码可靠性
4. 让开发变得更高效

 

五大设计原则

• 单一职责原则 - S - Single Responsibility Principle

　　一个程序只做好一件事。

　　如果功能过于复杂就拆分开，保持每个部分的独立性。

• 开放封闭原则 - O - Opened Closed Principle

　　对扩展开放，对修改封闭

　　增加需求时，扩展新代码，而非修改已有代码

• 里氏替换原则 - L - Liskov Substitution Principle

　　子类能覆盖父类

　　父类能出现的地方，子类也能出现

• 接口隔离原则 - I - Interface Segregation Principle

　　保持接口的单一独立

　　类似单一职责原则，这里更关注接口

• 依赖反转原则 - D - dependency Inversion Principle

　　面向接口编程，依赖于抽象而不依赖于具体类

　　使用方只关注接口而不关注具体类的的实现

　　在 JS 设计模式中，主要用到的设计模式基本都围绕 【单一职责】和【开放封闭】这两个原则来展开。

 

三、设计模式的类型

　　1、结构型模式

　　核心目标：
　　　　优化类或对象的组合结构，解决复杂系统中类与对象之间的耦合问题，增强代码的灵活性和可扩展性。

　　常见场景：

• 组合多个类形成更复杂的结构（如树形结构、装饰器）
• 适配不同接口或隐藏内部实现细节。

　　前端示例：

• 适配器模式：将不同格式的 API 数据装换为统一格式，供组件使用
• 装饰器模式：为现有组件动态添加功能（如日志记录、权限校验）
• 组合模式：将树形结构（如菜单、目录）抽象为统一接口处理

 

　　2、创建型模式

　　核心目标：

　　简化对象的创建过程，控制对象实例化的方式，避免直接依赖具体类

　　常见场景：

• 对象创建逻辑复杂或需要灵活配置
• 需要隐藏对象创建细节（如单例、工厂）

　　前端示例：

• 工厂模式：根据配置生成不同类型的组件实例（如弹窗、按钮）
• 单例模式：确保全局唯一实例（如 Vuex Store、全局状态管理）
• 原型模式：创建多个具有相似功能的组件（这些组件会有相同的样式和部分通用行为，同时也能有各自独特的内容）

 

　　3、行为型模式

 　　核心目标：

　　定义对象之间的交互方式，解决职责分配和行为协作问题，提升代码的可维护性和复用性

　　常见场景：

• 对象间的通信、状态变化或算法封装
• 解耦发送者与接收者（如事件机制）

　　前端示例：

• 策略模式：根据不同条件选择不同算法（如排序、数据格式化）
• 观察者模式：实现组件间的响应式通信（如 Vue 的响应式系统、事件总线）
• 状态模式：根据状态切换行为（如按钮的禁用/启用状态逻辑）

 

 

四、如何用？及分类

分类	模式
创建型模式	单例模式	工厂模式	原型模式
结构型模式	代理模式	适配器模式	装饰器模式	外观模式	桥接模式
	组合模式	享元模式
行为型模式	观察者模式(发布-订阅模式)	策略模式	迭代器模式	中介者模式	访问者模式
	模版方法模式	职责链模式	命令模式	状态模式	解释器模式