🧠 TS手写设计模式③：11个行为型模式写透，打造系统的“智能大脑”

喝拿铁的桔子
24 阅读4分钟

系列第 3 篇，前端高阶工程师必读：策略、观察者、责任链、命令、状态、解释器、中介者、访问者、备忘录、模板方法、迭代器。

📚 延伸阅读

🔍 什么是行为型模式？

行为型设计模式，关注的是：

系统中对象如何互动、协作，以及如何合理分配职责。

在前端项目中，尤其是 DSL 引擎、低代码平台、表单系统、复杂组件交互场景，行为型模式几乎无处不在：

  • 事件监听 → 观察者模式
  • 字段联动 → 中介者、状态模式
  • 多字段校验 → 责任链
  • 渲染策略切换 → 策略模式
  • 表单步骤流转 → 状态模式
  • DSL 表达式解析 → 解释器模式
  • 表单撤销恢复 → 备忘录模式
  • 节点遍历 → 访问者 / 迭代器

🧩 一图掌握：前端常见行为型模式场景

graph TD
  A[前端场景] --> B[字段渲染策略切换] --> B1[策略模式]
  A --> C[字段联动] --> C1[观察者模式]
  A --> D[字段校验链] --> D1[责任链模式]
  A --> E[撤销恢复] --> E1[命令模式]
  A --> F[表单状态流转] --> F1[状态模式]
  A --> G[DSL表达式解析] --> G1[解释器模式]
  A --> H[组件解耦通信] --> H1[中介者模式]
  A --> I[树结构遍历规则执行] --> I1[访问者模式]

🧠 01｜策略模式 Strategy Pattern

✅ 用于：可切换的逻辑/行为实现

在渲染引擎中，我们经常要根据字段配置选择不同的渲染方式，如：预览、编辑、调试视图。

interface RenderStrategy {
  render(): string;
}

class DefaultRender implements RenderStrategy {
  render() {
    return '<input />';
  }
}

class DebugRender implements RenderStrategy {
  render() {
    return '<input data-debug="true" />';
  }
}

class FieldRenderer {
  constructor(private strategy: RenderStrategy) {}
  render() {
    return this.strategy.render();
  }
}

🧪 使用：

const view = new FieldRenderer(new DebugRender());
console.log(view.render()); // <input data-debug="true" />

🧠 02｜观察者模式 Observer Pattern

✅ 用于：事件发布订阅，字段联动

一个字段变化，多个字段响应，典型的 Vue/React 表单联动实现。

type Listener = (val: any) => void;

class Subject {
  private listeners: Listener[] = [];

  subscribe(fn: Listener) {
    this.listeners.push(fn);
  }

  notify(val: any) {
    this.listeners.forEach(fn => fn(val));
  }
}

🧪 使用：

const ageField = new Subject();
ageField.subscribe(val => {
  console.log('联动字段收到年龄变化：', val);
});
ageField.notify(28);

🧠 03｜责任链模式 Chain of Responsibility

✅ 用于：字段校验链 / 表单中间件处理

abstract class Validator {
  next?: Validator;

  setNext(next: Validator) {
    this.next = next;
  }

  validate(value: any): string | null {
    return this.next?.validate(value) ?? null;
  }
}

class RequiredValidator extends Validator {
  validate(val: any) {
    if (!val) return '字段不能为空';
    return super.validate(val);
  }
}

🧪 使用：

const v1 = new RequiredValidator();
const v2 = new RequiredValidator();
v1.setNext(v2);

console.log(v1.validate('')); // 字段不能为空

🧠 04｜命令模式 Command Pattern

✅ 用于：封装操作，如撤销、恢复、Redo

interface Command {
  execute(): void;
  undo(): void;
}

class AddFieldCommand implements Command {
  execute() { console.log('添加字段'); }
  undo() { console.log('撤销添加'); }
}

🧪 使用：

const command = new AddFieldCommand();
command.execute(); // 添加字段
command.undo();    // 撤销添加

🧠 05｜状态模式 State Pattern

✅ 用于：状态驱动行为变化，如“草稿/提交/审核中”

interface State {
  render(): void;
}

class DraftState implements State {
  render() { console.log('表单处于草稿状态'); }
}

class FormContext {
  constructor(private state: State) {}
  render() { this.state.render(); }
}

🧠 06｜解释器模式 Interpreter Pattern

✅ 用于：解析 DSL 或条件语句，像 “a > 5 && b < 3”

interface Expression {
  interpret(ctx: Map<string, number>): boolean;
}

class Variable implements Expression {
  constructor(private key: string) {}
  interpret(ctx: Map<string, number>) {
    return ctx.get(this.key) ?? 0;
  }
}

🧪 实战场景：权限表达式、流程条件判断。

🧠 07｜中介者模式 Mediator Pattern

✅ 用于：统一协调多个组件通信，减少互相引用

class Mediator {
  notify(sender: string, message: string) {
    console.log(`${sender} 发送消息：${message}`);
  }
}

🧪 应用场景：多字段联动、流程联控。

🧠 08｜访问者模式 Visitor Pattern

✅ 用于：在不改变结构的前提下添加新操作

interface Element {
  accept(v: Visitor): void;
}

interface Visitor {
  visitField(field: Field): void;
}

class Field implements Element {
  accept(v: Visitor) {
    v.visitField(this);
  }
}

🧪 应用场景：AST 遍历、生成代码、表单导出。

🧠 09｜备忘录模式 Memento Pattern

✅ 用于：保存历史状态，支持撤销/重做

class Memento {
  constructor(private state: string) {}
  getState() { return this.state; }
}

🧪 场景：表单编辑器快照、配置历史记录。

🧠 10｜模板方法模式 Template Method

✅ 用于：统一定义执行步骤，支持子类定制

abstract class Field {
  render() {
    this.beforeRender();
    console.log('主渲染逻辑');
    this.afterRender();
  }

  abstract beforeRender(): void;
  abstract afterRender(): void;
}

🧠 11｜迭代器模式 Iterator Pattern

✅ 用于：顺序访问对象集合

class FieldList {
  private index = 0;
  constructor(private list: string[]) {}

  next() {
    return this.index < this.list.length
      ? { value: this.list[this.index++], done: false }
      : { value: null, done: true };
  }
}

📌 总结一览表

模式核心作用前端实用场景
策略行为切换渲染策略、布局算法
观察者发布订阅字段联动、事件总线
责任链顺序处理校验链、表单中间件
命令操作封装撤销重做、按钮操作逻辑
状态内部状态切换表单状态、流程节点状态
解释器表达式解析DSL、条件渲染引擎
中介者中心控制协作联动系统、流程控制
访问者添加新操作AST 遍历、导出功能
备忘录保存/恢复状态表单快照、撤销恢复
模板方法统一处理流程骨架渲染生命周期、校验模板
迭代器按序遍历分页渲染、字段遍历
avatar
文章
阅读
粉丝