设计原则

介绍

设计原则是指导代码结构的思想，而设计模式是这些思想的具体实现方式。

SOLID 原则

单一职责原则（SRP）
开放封闭原则（OCP）
里氏替换原则（LSP）
接口隔离原则（ISP）
依赖倒置原则（DIP）

另外两个原则

迪米特法则（LoD）
合成复用原则（CRP）

1. 单一职责原则（SRP）⭐

单一职责原则（SRP：Single Responsibility Principle）

一个类（或模块/函数）只做一件事情。

设计模式

代理模式：比如图片懒加载，原图片类只负责加载真实 DOM，代理类负责展示占位图和监听视口，各自职责单一
装饰器模式：将核心逻辑和辅助逻辑（如日志记录、性能监控）剥离，通过装饰器组合
迭代器模式：把“数据存储”和“数据遍历”解耦，严格遵守单一职责原则
外观模式：虽然它“涉及”了很多事情，但它自己不负责实现任何具体的业务逻辑

前端应用

React：组件拆分（Container / UI）
Vue：composition API（逻辑拆分）
hooks：一个 hook 一个功能

2. 开放封闭原则（OCP）⭐

开放封闭原则（OCP：Open Closed Principle）

可以扩展的，但不可以修改。
开闭原则的核心不是“不能改代码”，而是“让变化通过扩展来实现，而不是修改已有逻辑”。

设计模式

策略模式：新增策略，不修改原代码
观察者/发布订阅：新增订阅者，不修改原逻辑
装饰器模式：扩展功能，不修改原对象
代理模式：扩展功能，不修改原对象
模板方法模式：流程固定，步骤可扩展
职责链模式：新增处理逻辑，只需增加节点

前端应用

表单校验规则
支付方式
UI 主题切换
插件系统

3. 里氏替换原则（LSP）

里氏替换原则（LSP：Liskov Substitution Principle）

“如果你声称自己继承了老爸，那你老爸能干的活，你必须都能干，而且不能把事情搞砸；你可以比老爸多干活，但绝不能少干活或乱干活。”
子类只能去“扩展”父类的能力，而绝对不能去“阉割”或“改变”父类已经承诺好的行为！

反面例子：企鹅算不算鸟？

在生物学上：企鹅是鸟。
但是在面向对象编程中，如果“鸟”定义了飞翔行为：企鹅绝不能继承鸟！

// 父类：鸟
class Bird {
  fly() {
    console.log("扑腾翅膀，飞向天空！");
  }
}

// 子类：麻雀（完美继承老爸，遵守LSP）
class Sparrow extends Bird {
  // 麻雀没重写飞，直接用老爸的飞
}

// 子类：企鹅（企鹅也是鸟，所以继承了鸟类）
class Penguin extends Bird {
  // 但是企鹅不会飞！强行重写老爸的方法，抛出异常
  fly() {
    throw new Error("我是企鹅，我飞不起来啊！");
  }
}

如何修改：

不能强行继承！应该提取更基础的父类。

基类：Bird（只包含吃饭、睡觉）
派生类1：FlyingBird 继承 Bird（增加 fly 方法）
派生类2：WalkingBird 继承 Bird（增加 walk 方法）
麻雀继承 FlyingBird，企鹅继承 WalkingBird。

设计模式

模板方法模式：子类扩展不破坏流程
策略模式：可替换算法

前端应用

React 组件继承（不推荐乱继承），组件行为不能随意改变
API 返回结构的一致性
TS 类型设计

4. 接口隔离原则（ISP）

接口隔离原则（ISP：Interface Segregation Principle）

保持接口的单一独立，避免出现“胖接口”。

// ❌ 有些用户不需要上传
interface User {
  login()
  uploadVideo()
}
// ✅
interface Login {}
interface Upload {}

设计模式

适配器模式：专门用来“拆接口 / 转接口”，通过转换接口避免依赖不需要的字段
策略模式：不同用户用不同策略

前端应用

TS 接口拆分
API 类型定义
hooks 设计

5. 依赖倒置原则（DIP）

依赖倒置原则（DIP：Dependence Inversion Principle）

面向接口编程，依赖于抽象而不依赖于具体，高层模块不依赖低层模块。

高层模块：系统的核心业务逻辑（比如：订单结算、用户登录校验）。它决定了软件是干什么的，它是“老板”。
低层模块：具体的基础工具/细节（比如：Axios 网络请求、LocalStorage、MySQL 数据库、UI 组件）。它们是干活的“员工”。

//❌ 订单类直接依赖了 MySQL 这个具体的底层类
class Order {
  save() {
    const db = new MySQL(); // 写死了 MySQL
    db.insert();
  }
}

//✅ Order 不管具体是什么 DB，只要外部传进来一个符合规范的对象即可
class Order {
  constructor(database) {
    this.db = database; // 依赖注入
  }
  save() {
    this.db.insert(); // 面向抽象调用
  }
}
const order = new Order(new MongoDB()); // 外部决定用什么DB