JavaScript设计模式：高级技巧与示例

JavaScript中的设计模式：基于Node.js示例的高级进阶

设计模式是针对典型问题的经过验证的架构解决方案。如果你已经熟悉基础模式（单例、工厂、观察者），那么是时候深入研究更复杂的结构了。本文将通过JavaScript（Node.js）示例，分析四种高级GoF模式：组合模式、责任链模式、状态模式和备忘录模式。这些模式将帮助你编写灵活、可扩展且易于维护的代码。

1. 组合模式 (Composite)

目的：允许将对象组合成树形结构，并以统一方式处理每个对象或对象组。

示例：文件系统，其中文件夹可以包含文件和其他文件夹。我们想要计算总大小。

// 组件class FileSystemComponent {  getSize() {    throw new Error('getSize()方法必须被实现');  }}

// 叶子节点class File extends FileSystemComponent {  constructor(name, size) {    super();    this.name = name;    this.size = size;  }

  getSize() {    return this.size;  }}

// 容器（节点）class Folder extends FileSystemComponent {  constructor(name) {    super();    this.name = name;    this.children = [];  }

  add(component) {    this.children.push(component);  }

  getSize() {    return this.children.reduce((total, child) => total + child.getSize(), 0);  }}

// 使用const root = new Folder('root');const src = new Folder('src');const index = new File('index.js', 500);const utils = new File('utils.js', 300);

src.add(index);src.add(utils);root.add(src);root.add(new File('package.json', 200));

console.log(`总大小: ${root.getSize()} 字节`); // 1000 字节

优点：简化了树形结构的操作，对客户端隐藏了层次结构的复杂性。

2. 责任链模式 (Chain of Responsibility)

目的：允许将请求沿着处理链传递，直到其中一个处理器处理该请求。

示例：Express.js中的HTTP请求处理（中间件）。

class Handler {  setNext(handler) {    this.next = handler;    return handler;  }

  handle(request) {    if (this.next) {      return this.next.handle(request);    }    return null;  }}

class AuthHandler extends Handler {  handle(request) {    if (!request.token) {      return '错误：未授权';    }    console.log('AuthHandler: 验证通过');    return super.handle(request);  }}

class RoleHandler extends Handler {  handle(request) {    if (request.role !== 'admin') {      return '错误：权限不足';    }    console.log('RoleHandler: 角色确认');    return super.handle(request);  }}

class LoggingHandler extends Handler {  handle(request) {    console.log(`LoggingHandler: 来自${request.user}的请求`);    return super.handle(request);  }}

// 构建链const auth = new AuthHandler();const role = new RoleHandler();const log = new LoggingHandler();auth.setNext(role).setNext(log);

const request = { token: 'abc123', role: 'admin', user: 'Ivan' };const result = auth.handle(request);console.log(result); // null (一切正常)

const badRequest = { token: 'abc123', role: 'user', user: 'Petr' };console.log(auth.handle(badRequest)); // '错误：权限不足'

优点：降低了耦合度，易于添加/删除处理器。

3. 状态模式 (State)

目的：允许对象根据其内部状态改变行为。

示例：具有状态的文档：草稿、审核中、已发布。

class Docu