前端设计模式深度解析与实战

2.2 建造者模式（Builder Pattern）

适用于分步骤构建复杂对象，链式调用让配置过程清晰流畅。

class Car {
  constructor() {
    this.engine = null;
    this.seats = 0;
    this.gps = false;
  }
  toString() {
    return `Car with ${this.engine} engine, ${this.seats} seats, GPS: ${this.gps}`;
  }
}

class CarBuilder {
  constructor() {
    this.car = new Car();
  }
  setEngine(engine) {
    this.car.engine = engine;
    return this;
  }
  setSeats(seats) {
    this.car.seats = seats;
    return this;
  }
  setGPS(hasGPS) {
    this.car.gps = hasGPS;
    return this;
  }
  build() {
    return this.car;
  }
}

// 使用
const car = new CarBuilder()
  .setEngine('V8')
  .setSeats(4)
  .setGPS(true)
  .build();
console.log(car.toString());

2.3 单例模式（Singleton Pattern）

确保一个类只有一个实例，并提供全局访问点。常用于配置管理或日志服务。

class Singleton {
  static #instance = null;
  constructor() {
    if (Singleton.#instance) {
      return Singleton.#instance;
    }
    Singleton.#instance = this;
    // 初始化代码
    this.config = {};
  }
  static getInstance() {
    if (!Singleton.#instance) {
      Singleton.#instance = new Singleton();
    }
    return Singleton.#instance;
  }
  setConfig(key, value) {
    this.config[key] = value;
  }
  getConfig(key) {
    return this.config[key];
  }
}

// 使用
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

2.4 原型模式（Prototype Pattern）

通过克隆现有对象来创建新对象，适合对象创建成本较高的场景。

class ComponentPrototype {
  constructor(name, styles = {}) {
    this.name = name;
    this.styles = styles;
    this.children = [];
  }
  clone() {
    const clone = new ComponentPrototype(this.name);
    clone.styles = { ...this.styles };
    clone.children = [...this.children];
    return clone;
  }
  addChild(child) {
    this.children.push(child);
  }
  render() {
    console.log(`Rendering ${this.name} with styles:`, this.styles);
  }
}

// 使用
const baseButton = new ComponentPrototype('Button', { color: 'blue', padding: '10px' });
const primaryButton = baseButton.clone();
primaryButton.name = 'Primary Button';
primaryButton.styles.color = 'green';

三、结构型模式

3.1 适配器模式（Adapter Pattern）

让不兼容的接口能够协同工作，是解决遗留系统集成的常用手段。

// 旧系统
class OldPaymentSystem {
  processPayment(amountInDollars) {
    console.log(`Processing $${amountInDollars} payment`);
    return true;
  }
}

// 新系统（期望欧元）
class NewPaymentSystem {
  processPayment(amountInEuros) {
    console.log(`Processing €${amountInEuros} payment`);
    return true;
  }
}

// 适配器
class PaymentAdapter {
  constructor(oldSystem) {
    this.oldSystem = oldSystem;
  }
  processPayment(amountInEuros) {
    // 转换欧元为美元
    const amountInDollars = amountInEuros * 1.2;
    return this.oldSystem.processPayment(amountInDollars);
  }
}

// 使用
const oldSystem = new OldPaymentSystem();
const adapter = new PaymentAdapter(oldSystem);
adapter.processPayment(100); // 转换为 $120

3.2 装饰器模式（Decorator Pattern）

动态地给对象添加一些额外的职责，比继承更灵活。

// 基础组件
class TextComponent {
  constructor(text) {
    this.text = text;
  }
  render() {
    return this.text;
  }
}

// 装饰器基类
class TextDecorator {
  constructor(component) {
    this.component = component;
  }
  render() {
    return this.component.render();
  }
}

// 具体装饰器
class BoldDecorator extends TextDecorator {
  render() {
    return `<b>${super.render()}</b>`;
  }
}

class ItalicDecorator extends TextDecorator {
  render() {
    return `<i>${super.render()}</i>`;
  }
}

class LinkDecorator extends TextDecorator {
  constructor(component, url) {
    super(component);
    this.url = url;
  }
  render() {
    return `<a href="${this.url}">${super.render()}</a>`;
  }
}

// 使用
let text = new TextComponent('Hello World');
text = new BoldDecorator(text);
text = new ItalicDecorator(text);
text = new LinkDecorator(text, 'https://example.com');
console.log(text.render());

3.3 代理模式（Proxy Pattern）

控制对对象的访问，常用于懒加载、权限校验等场景。

// 真实对象
class ImageLoader {
  constructor(filename) {
    this.filename = filename;
    this.loadImage();
  }
  loadImage() {
    console.log(`Loading image: ${this.filename}`);
    this.image = `Image data for ${this.filename}`;
  }
  display() {
    console.log(`Displaying: ${this.image}`);
  }
}

// 代理
class ImageProxy {
  constructor(filename) {
    this.filename = filename;
    this.realImage = null;
  }
  display() {
    if (!this.realImage) {
      this.realImage = new ImageLoader(this.filename);
    }
    this.realImage.display();
  }
}

// 使用
const image1 = new ImageProxy('photo1.jpg');
const image2 = new ImageProxy('photo2.jpg');
image1.display(); // 加载并显示
image1.display(); // 直接显示（已缓存）

3.4 外观模式（Facade Pattern）

为子系统中的一组接口提供一个一致的界面，简化复杂系统的调用。

// 复杂子系统
class CPU {
  freeze() { console.log('CPU freeze'); }
  jump(position) { console.log(`CPU jump to ${position}`); }
  execute() { console.log('CPU execute'); }
}

class Memory {
  load(position, data) { console.log(`Memory load ${data} at ${position}`); }
}

class HardDrive {
  read(lba, size) {
    const data = `data from sector ${lba}`;
    console.log(`HardDrive read: ${data}`);
    return data;
  }
}

// 外观
class ComputerFacade {
  constructor() {
    this.cpu = new CPU();
    this.memory = new Memory();
    this.hardDrive = new HardDrive();
  }
  start() {
    console.log('Computer starting...');
    this.cpu.freeze();
    const bootData = this.hardDrive.read(0, 1024);
    this.memory.load(0x0, bootData);
    this.cpu.jump(0x0);
    this.cpu.execute();
    console.log('Computer started!');
  }
}

// 使用
const computer = new ComputerFacade();
computer.start();

3.5 组合模式（Composite Pattern）

以树形结构组合对象，使得用户对单个对象和组合对象的使用具有一致性。

// 组件接口
class UIComponent {
  constructor(name) {
    this.name = name;
    this.children = [];
  }
  add(component) {
    this.children.push(component);
  }
  remove(component) {
    const index = this.children.indexOf(component);
    if (index > -1) {
      this.children.splice(index, 1);
    }
  }
  render() {
    console.log(`Rendering ${this.name}`);
    this.children.forEach(child => child.render());
  }
}

// 叶子节点
class Button extends UIComponent {
  constructor(name) {
    super(name);
  }
  render() {
    console.log(`[Button] ${this.name}`);
  }
}

class Input extends UIComponent {
  constructor(name) {
    super(name);
  }
  render() {
    console.log(`[Input] ${this.name}`);
  }
}

// 使用
const form = new UIComponent('Login Form');
form.add(new Input('Username'));
form.add(new Input('Password'));
form.add(new Button('Submit'));

const panel = new UIComponent('Main Panel');
panel.add(form);
panel.render();

四、行为型模式

4.1 观察者模式（Observer Pattern）

定义对象间的一对多依赖关系，当一个对象状态改变时，所有依赖者都会收到通知。

// 主题
class Subject {
  constructor() {
    this.observers = [];
  }
  subscribe(observer) {
    this.observers.push(observer);
  }
  unsubscribe(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }
  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

// 具体观察者
class UserInterface {
  constructor(name) {
    this.name = name;
  }
  update(data) {
    console.log(`${this.name} received:`, data);
  }
}

// 使用
const newsPublisher = new Subject();
newsPublisher.subscribe(new UserInterface('Mobile App'));
newsPublisher.subscribe(new UserInterface('Web Dashboard'));
newsPublisher.notify('New product launched!');

4.2 发布 - 订阅模式（Pub/Sub Pattern）

观察者模式的变体，引入消息通道，解耦更彻底。

class EventBus {
  constructor() {
    this.events = {};
  }
  subscribe(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }
  unsubscribe(event, callback) {
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter(cb => cb !== callback);
  }
  publish(event, data) {
    if (!this.events[event]) return;
    this.events[event].forEach(callback => callback(data));
  }
}

// 使用
const bus = new EventBus();
bus.subscribe('user.login', data => console.log(`[LOG] ${data}`));
bus.publish('user.login', { username: 'john', time: new Date() });

4.3 策略模式（Strategy Pattern）

定义一系列算法，把它们一个个封装起来，并且使它们可相互替换。

// 策略接口
class PaymentStrategy {
  pay(amount) {}
}

// 具体策略
class CreditCardPayment extends PaymentStrategy {
  constructor(cardNumber, cvv) {
    super();
    this.cardNumber = cardNumber;
    this.cvv = cvv;
  }
  pay(amount) {
    console.log(`Paid $${amount} with credit card ${this.cardNumber}`);
  }
}

// 上下文
class ShoppingCart {
  constructor() {
    this.items = [];
    this.paymentStrategy = null;
  }
  addItem(item, price) {
    this.items.push({ item, price });
  }
  setPaymentStrategy(strategy) {
    this.paymentStrategy = strategy;
  }
  checkout() {
    const total = this.items.reduce((sum, item) => sum + item.price, 0);
    console.log(`Total: $${total}`);
    if (this.paymentStrategy) {
      this.paymentStrategy.pay(total);
      this.items = [];
    } else {
      throw new Error('Payment strategy not set');
    }
  }
}

// 使用
const cart = new ShoppingCart();
cart.addItem('Book', 25);
cart.setPaymentStrategy(new CreditCardPayment('1234-5678-9012-3456', '123'));
cart.checkout();

4.4 状态模式（State Pattern）

允许对象内部状态改变时改变其行为，避免大量的条件判断语句。

// 状态接口
class OrderState {
  constructor(order) {
    this.order = order;
  }
  next() {}
  previous() {}
  cancel() {}
}

// 具体状态
class PendingState extends OrderState {
  next() {
    this.order.setState(new ProcessingState(this.order));
    console.log('Order moved to processing');
  }
  cancel() {
    this.order.setState(new CancelledState(this.order));
    console.log('Order cancelled');
  }
}

class ProcessingState extends OrderState {
  next() {
    this.order.setState(new ShippedState(this.order));
    console.log('Order shipped');
  }
}

// 上下文
class Order {
  constructor() {
    this.state = new PendingState(this);
  }
  setState(state) {
    this.state = state;
  }
  next() {
    this.state.next();
  }
  cancel() {
    this.state.cancel();
  }
}

// 使用
const order = new Order();
order.next(); // Pending -> Processing
order.cancel(); // Processing -> Cancelled

4.5 命令模式（Command Pattern）

将请求封装成对象，支持撤销操作和解耦发送者与接收者。

// 命令接口
class Command {
  execute() {}
  undo() {}
}

// 接收者
class Light {
  turnOn() { console.log('Light is ON'); }
  turnOff() { console.log('Light is OFF'); }
}

// 调用者
class RemoteControl {
  constructor() {
    this.commands = [];
    this.history = [];
  }
  setCommand(command) {
    this.commands.push(command);
  }
  pressButton(index) {
    if (index < this.commands.length) {
      const command = this.commands[index];
      command.execute();
      this.history.push(command);
    }
  }
  pressUndo() {
    if (this.history.length > 0) {
      const command = this.history.pop();
      command.undo();
    }
  }
}

// 使用
const remote = new RemoteControl();
const light = new Light();
remote.setCommand({
  execute: () => light.turnOn(),
  undo: () => light.turnOff()
});
remote.pressButton(0);

五、前端特定模式

5.1 模块模式（Module Pattern）

利用闭包创建私有作用域，保护内部变量不被外部篡改。

const UserModule = (function () {
  let users = [];
  let userCount = 0;

  function generateId() {
    return Date.now().toString(36) + Math.random().toString(36).substr(2);
  }

  return {
    addUser(name, email) {
      const user = {
        id: generateId(),
        name,
        email,
        createdAt: new Date()
      };
      users.push(user);
      userCount++;
      return user.id;
    },
    getAllUsers() {
      return [...users];
    }
  };
})();

// 使用
const userId = UserModule.addUser('John', '[email protected]');

5.2 混入模式（Mixin Pattern）

通过组合扩展类功能，实现代码复用而不必深层次的继承。

const Loggable = Base => class extends Base {
  log(message) {
    console.log(`[${this.constructor.name}] ${message}`);
  }
};

const Serializable = Base => class extends Base {
  serialize() {
    return JSON.stringify(this);
  }
  static deserialize(json) {
    const data = JSON.parse(json);
    return new this(data);
  }
};

class Model {
  constructor(data = {}) {
    Object.assign(this, data);
  }
}

class User extends Serializable(Loggable(Model)) {
  constructor(data) {
    super(data);
  }
}

// 使用
const user = new User({ name: 'John Doe' });
user.log('Created user');

5.3 中间件模式（Middleware Pattern）

处理请求的管道，常用于 Express 等框架中的请求拦截与处理。

class MiddlewarePipeline {
  constructor() {
    this.middlewares = [];
  }
  use(middleware) {
    this.middlewares.push(middleware);
  }
  async execute(context, finalHandler) {
    let index = -1;
    const dispatch = async i => {
      if (i <= index) throw new Error('next() called multiple times');
      index = i;
      let fn = this.middlewares[i];
      if (i === this.middlewares.length) fn = finalHandler;
      if (!fn) return;
      await fn(context, () => dispatch(i + 1));
    };
    return dispatch(0);
  }
}

// 使用
const pipeline = new MiddlewarePipeline();
pipeline.use(async (ctx, next) => {
  console.log('Middleware 1: Logging request');
  ctx.startTime = Date.now();
  await next();
  const duration = Date.now() - ctx.startTime;
  console.log(`Middleware 1: Request took ${duration}ms`);
});

5.4 组件模式（Component Pattern）

前端框架的核心思想，将 UI 拆分为独立的、可复用的单元。

class Component {
  constructor(props = {}) {
    this.props = props;
    this.state = {};
    this.children = [];
  }
  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.render();
  }
  addChild(child) {
    this.children.push(child);
  }
  mount(container) {
    this.container = container;
    this.render();
  }
  render() {
    throw new Error('render() must be implemented');
  }
}

class Button extends Component {
  handleClick = () => {
    this.setState({ clicked: true });
    if (this.props.onClick) this.props.onClick();
  };
  render() {
    const button = document.createElement('button');
    button.textContent = this.props.label || 'Click me';
    button.style.backgroundColor = this.state.clicked ? 'green' : 'blue';
    button.onclick = this.handleClick;
    if (this.container) {
      this.container.innerHTML = '';
      this.container.appendChild(button);
    }
    return button;
  }
}

六、React/Vue 中的设计模式

6.1 高阶组件（HOC）- React

用于复用组件逻辑，如权限校验、数据获取等。

const withLoading = WrappedComponent => {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) {
      return <div className="loading">Loading...</div>;
    }
    return <WrappedComponent {...props} />;
  };
};

const DataDisplay = ({ data }) => (
  <div className="data">{JSON.stringify(data)}</div>
);

const EnhancedDataDisplay = withLoading(DataDisplay);

6.2 渲染属性（Render Props）- React

一种技术，用于共享代码逻辑，通常配合 HOC 使用。

class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };
  handleMouseMove = event => {
    this.setState({ x: event.clientX, y: event.clientY });
  };
  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

// 使用
<MouseTracker render={({ x, y }) => (
  <h1>The mouse position is ({x}, {y})</h1>
)} />

6.3 提供者模式（Provider Pattern）

基于 Context API，解决深层组件传递 props 的问题。

const ThemeContext = React.createContext();

class ThemeProvider extends React.Component {
  state = { theme: 'light' };
  toggleTheme = () => {
    this.setState(prev => ({
      theme: prev.theme === 'light' ? 'dark' : 'light'
    }));
  };
  render() {
    return (
      <ThemeContext.Provider value={{ theme: this.state.theme, toggleTheme: this.toggleTheme }}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

6.4 Vue 组合式函数（Composables）

Vue 3 推荐的模式，提取和复用响应式逻辑。

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue';
export function useMouse() {
  const x = ref(0);
  const y = ref(0);
  const update = event => {
    x.value = event.pageX;
    y.value = event.pageY;
  };
  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));
  return { x, y };
}

七、设计模式选择指南

八、最佳实践

1. 不要过度设计：简单的代码往往比复杂的设计模式更好，按需引入。
2. 模式组合使用：实际项目中经常组合多种模式来解决复杂问题。
3. 考虑可测试性：设计模式应提高代码的可测试性，而非降低。
4. 保持一致性：团队内统一使用某些模式，降低沟通成本。
5. 文档化：对使用的设计模式进行说明，方便后续维护。

九、现代 JavaScript 中的新特性

9.1 Proxy 和 Reflect 实现模式

利用 Proxy 可以轻松实现数据绑定、验证等高级功能。

function createObservable(obj, callback) {
  return new Proxy(obj, {
    set(target, property, value) {
      const oldValue = target[property];
      target[property] = value;
      callback(property, oldValue, value);
      return true;
    },
    get(target, property) {
      console.log(`Getting ${property}`);
      return target[property];
    }
  });
}

const user = createObservable(
  { name: 'John', age: 30 },
  (prop, oldVal, newVal) => {
    console.log(`${prop} changed from ${oldVal} to ${newVal}`);
  }
);
user.name = 'Jane'; // 触发回调

9.2 使用 ES6+ 特性简化模式

Symbol 可用于实现真正的私有属性，Generator 可简化迭代逻辑。

// 使用 Symbol 实现私有属性
const _private = Symbol('private');
class MyClass {
  constructor() {
    this[_private] = 'secret';
  }
  getSecret() {
    return this[_private];
  }
}

// 使用 Generator 实现迭代器模式
function* paginate(items, pageSize) {
  for (let i = 0; i < items.length; i += pageSize) {
    yield items.slice(i, i + pageSize);
  }
}

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const page of paginate(items, 3)) {
  console.log('Page:', page);
}

设计模式是解决常见问题的工具箱，理解它们有助于编写更优雅、可维护的代码。在实际开发中，灵活运用这些模式，能让你的前端工程更加健壮。