前端设计模式实战：从新手到精通的技能提升指南

7次阅读

没有评论

共计 2181 个字符，预计需要花费 6 分钟才能阅读完成。

刚接触前端开发时，我们常常会陷入以下困境：

代码组织混乱 ：功能相似的代码分散在不同文件，修改时需要多处同步
组件通信复杂 ：父子组件层层传递 props，中间组件被迫充当 ” 传话筒 ”
可扩展性差 ：新增需求时不得不重构大量现有代码
状态管理困难 ：全局状态被随意修改，难以追踪变化来源

这些问题的本质是缺乏对代码结构的有效管理，而设计模式正是经过验证的最佳实践方案。

工厂模式 ：
适用场景：需要创建多种相似对象（如不同 UI 组件、API 客户端）
优势：隐藏创建逻辑，支持灵活扩展新产品类型
示例：React 组件工厂、不同环境下的配置对象创建
单例模式 ：
适用场景：全局唯一实例（如状态管理 store、日志服务）
优势：避免重复实例化，节省内存开销
风险：过度使用会导致代码耦合度高

解决组件间松耦合通信的经典方案：

// 事件总线实现
class EventBus {private events: Record<string, Function[]> = {};

  subscribe(event: string, callback: Function) {if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }

  emit(event: string, ...args: any[]) {this.events[event]?.forEach(cb => cb(...args));
  }
}

// 使用示例
const bus = new EventBus();
bus.subscribe('form-submit', (data) => {console.log('收到表单数据:', data);
});

动态切换算法行为的优雅方案：

// 支付策略接口
interface PaymentStrategy {pay(amount: number): void;
}

// 具体策略实现
class CreditCardStrategy implements PaymentStrategy {pay(amount: number) {console.log(` 信用卡支付 ${amount} 元 `);
  }
}

class AlipayStrategy implements PaymentStrategy {pay(amount: number) {console.log(` 支付宝支付 ${amount} 元 `);
  }
}

// 上下文类
class PaymentContext {constructor(private strategy: PaymentStrategy) {}

  executePayment(amount: number) {this.strategy.pay(amount);
  }
}

// 使用示例
const ctx = new PaymentContext(new AlipayStrategy());
ctx.executePayment(100); // 输出：支付宝支付 100 元

不修改原类的情况下扩展功能：

// 类装饰器
function logClass<T extends {new (...args: any[]): {}}>(constructor: T) {
  return class extends constructor {constructor(...args: any[]) {super(...args);
      console.log(` 实例化 ${constructor.name}`);
    }
  };
}

@logClass
class ApiService {fetchData() {return '原始数据';}
}

// 使用时会自动输出日志
const service = new ApiService();

设计模式不是免费的，需要权衡：