ES6开启设计模式行为型模式，解锁对象高效交流

前端

2023-03-21 16:50:11

揭秘行为型模式：JavaScript 对象交流之道

前言

在 JavaScript 的世界里，网页开发与设计不断革新，ES6 的到来更是带来一场编程风暴，重塑了整个 JavaScript 生态。今天，我们将踏上探索行为型模式的奇幻之旅，揭开对象交流的艺术。

行为型模式：对象沟通的基石

行为型模式是设计模式家族中举足轻重的一支，它们专注于解决对象之间的沟通与协作难题。通过一系列工具，这些模式让对象能够轻松高效地交互，从而提升开发效率。

行为型模式的四大家族

行为型模式包罗万象，以下四大家族尤为突出：

策略模式（Strategy）： 犹如变色龙般灵活，策略模式将算法和行为封装成独立对象，可根据不同场景随时切换和复用，让代码适应性更强。
观察者模式（Observer）： 宛如新闻发布会，观察者模式建立一对多依赖关系，让观察者对象密切关注被观察对象的变化，实现信息同步。
命令模式（Command）： 就好比指挥官与士兵，命令模式将指令抽象成对象，封装执行逻辑，分离请求者和执行者，提升代码的可维护性和扩展性。
状态模式（State）： 有如演员切换角色，状态模式允许对象在其内部状态改变时改变行为，在不同状态下执行不同的逻辑，实现灵活的业务处理。

JavaScript 中的行为型模式

行为型模式不仅拓展了 JavaScript 的开发视野，还大幅提升了代码的灵活性和可维护性。对于渴望在 JavaScript 领域大展身手的开发者来说，掌握行为型模式可谓必不可少的技能。

代码示例

策略模式：

// 定义算法接口
interface Strategy {
  calculate(num1: number, num2: number): number;
}

// 具体算法实现
class AddStrategy implements Strategy {
  calculate(num1, num2) {
    return num1 + num2;
  }
}

class SubtractStrategy implements Strategy {
  calculate(num1, num2) {
    return num1 - num2;
  }
}

// 使用策略
const context = {
  strategy: new AddStrategy(),
};

context.strategy.calculate(1, 2); // 结果为 3

观察者模式：

// 被观察者类
class Subject {
  private observers: Observer[] = [];

  subscribe(observer: Observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer: Observer) {
    this.observers = this.observers.filter(o => o !== observer);
  }

  notify() {
    this.observers.forEach(observer => observer.update());
  }
}

// 观察者类
class Observer {
  update() {
    console.log("收到更新通知");
  }
}

// 使用观察者模式
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify(); // 打印 "收到更新通知" 两次

命令模式：

// 命令接口
interface Command {
  execute(): void;
}

// 具体命令实现
class OpenCommand implements Command {
  private receiver: Receiver;

  constructor(receiver: Receiver) {
    this.receiver = receiver;
  }

  execute() {
    this.receiver.open();
  }
}

class CloseCommand implements Command {
  private receiver: Receiver;

  constructor(receiver: Receiver) {
    this.receiver = receiver;
  }

  execute() {
    this.receiver.close();
  }
}

// 接收者类
class Receiver {
  open() {
    console.log("打开文件");
  }

  close() {
    console.log("关闭文件");
  }
}

// 使用命令模式
const receiver = new Receiver();
const openCommand = new OpenCommand(receiver);
const closeCommand = new CloseCommand(receiver);

openCommand.execute(); // 打印 "打开文件"
closeCommand.execute(); // 打印 "关闭文件"

状态模式：

// 状态接口
interface State {
  handle(context: Context): void;
}

// 具体状态实现
class StartedState implements State {
  handle(context: Context) {
    console.log("状态已启动");
    context.transitionTo(new RunningState());
  }
}

class RunningState implements State {
  handle(context: Context) {
    console.log("状态正在运行");
    context.transitionTo(new FinishedState());
  }
}

class FinishedState implements State {
  handle(context: Context) {
    console.log("状态已完成");
  }
}

// 上下文类
class Context {
  private state: State;

  constructor() {
    this.state = new StartedState();
  }

  transitionTo(state: State) {
    this.state = state;
  }

  handle() {
    this.state.handle(this);
  }
}

// 使用状态模式
const context = new Context();

context.handle(); // 打印 "状态已启动"
context.handle(); // 打印 "状态正在运行"
context.handle(); // 打印 "状态已完成"