痛点直击： 明明只是「点击 Button → Panel 打印日志」这么简单的需求，却引入了自研的 Observer 类、全局单例、订阅/取消订阅逻辑…，代码量暴增三倍，新人根本看不懂数据流向。后续想加个埋点还得在三个文件里改动。

典型「过度设计」现场还原

// observer.js
class Observer {
constructor {
this.subscribers =;怎么说呢，}
subscribe {
this.subscribers.push;}
unsubscribe {
this.subscribers = this.subscribers.filter;}
notify {
this.subscribers.forEach);}
}
// 全局状态中心
export const globalClickObserver = new Observer;

// Button.jsx


import React from "react";import { globalClickObserver } from "./observer";

export default function Button {
const handleClick = => {
console.log;话说回来，globalClickObserver.notify;}，return ;}
// Panel.jsx


export default function Panel {
useEffect => {
const subscriber = => {
if {
console.log;}
}，globalClickObserver.subscribe;return => globalClickObserver.unsubscribe;},)，

return 

I'm Panel
}


我把他叫过来问：「为什么不直接用 mitt 这种轻量 Event Bus？或者干脆上 Zustand？」

说到他挠挠头。「我觉得用设计模式，性更好，也显得更高级😂。」

痛点直击： 「显得高级」成了选型理由，**可维护性、团队认知负荷、上手成本**全被抛在脑后。这正是很多前端团队正在经历的「造轮子上瘾」综合症。



再看主要观点。现代前端里「90% 的经典设计模式」都是过度设计

在我开喷之前，先澄清：我反对的不是「高内聚低耦合」「单一职责」这些设计思想。我反对的是——把20 年前为 Java/C++ 汇总的、重面向对象的大招**生搬硬套**到 React/Vue/Svelte 的声明式、组件化、Hooks 化范式里。

我们为什么会掉进「设计模式陷阱」？

1. 应试惯性：八股文背多了写代码先想「我能套哪个模式？」

痛点直击： 「面试必问单例/工厂/观察者」，为了拿 Offer 不得不死磕定义与变体。久而久之形成肌肉记忆——**遇到问题先查字典找模式名**，而不是先想「最简单怎么写」。

2. 虚荣心作祟：「不说几个模式名。显不出我资深啊🤷‍♂️」

痛点直击： 技术分享、Code Review 时刻意堆砌术语，**把「可读性」献祭给「装逼感」**；新人接手时既要懂业务又要补 GOF 二十四般武艺，**上手周期从天变周**。


水土不服 Top3：被滥用得最惨的三大模式

① Singleton —— ES6 Module 天生就是单例！别再手写 getInstance 啦！❌️❌️❌️❌️❌️❌️❌️❌️❌️❌️❌️❌️❌️❌️❌️ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ ⚠ 🛑 🛑 🛑 🛑 🛑 🛑 🛑 🛑 🛑 🛑 🛑 🛑 🛑 ✋ ✋ ✋ ✋ ✋ ✋ ✋ ✋ ✋ ✋ ✋ ✋ ✋ ☢ ☢ ☢ ☢ ☢ ☢ ☢ ☢ ☢ ☢ ☢ ☢ ☣☣☣☣☣☣☣☣☣☣☣☣☣☣☣☣.
// a.js
class MyService { /* ... */ }
// 模块缓存机制天然保证单例
export const myServiceInstance = new MyService;// b.js / c.js / d.js ...
import { myServiceInstance } from './a.js';// 拿到的永远是同一个实例
// b.js和c.js里的myServiceInstance，是同一个东西
// b.js和c.js里拿到的是同一个实例 ———— 零成本、零样板代码。// b.js和c.js里拿到的是同一个实例 ———— 零成本。javascript
javascript
javascript
javascript
javascript
javascript
javascript
javascript
js // a.ts export const svc = new Service;// b.ts import { svc } from './a';不过，// c.ts import { svc } from './a';不过，// 三处引用 === true
至于**结论**。为了实现单例而去手写 `Singleton` 基类、**双重检查锁**、`Object.freeze`…，在现代前端属于 ****。
怎么说呢，


② Factory Pattern —— Component 就是 最好的工厂
**经典写法**：`createWidget` → `switch` → `return new ConcreteClass`。**React/Vue 的原生替代品**：**组件 + props**。不过，jsx
// 不需要 createButtonFactory
function Button {
if return ;if return ;return ;怎么说呢，}
// 用法：

Go


零 new零 switch 分发类天然支持合儿童。怎么说呢，

痛点直击工厂函数还得维护映射表、导出类型定义；组件写法 TS 自动推导 props重构时改名即连锁报错，DX碾压。



③ Observer Pattern —— 框架自带响应式比你手写强两条街
**经典写法**：`subscribers + subscribe/unsubscribe/notify`。说到**现实**，React `useState/useEffect`、`useContext`、`useReducer`；Vue `ref/watch/computed`、**它们本身就是经过千锤百炼的终极观察者实现**。


自研 Observer
框架内置响应式




需手动管理订阅生命周期
生命周期自动绑定


派发更新靠 forEach 跑循环
调度器批处理 + 异步微任务调整


跨组件传播靠全局单例污染
Context / Provide-Inject 作用域隔离


新增派生状态需再包一层 notify
computed/useMemo 自动追踪依赖



**痛点直击**：自研 Observer 最怕**「僵尸订阅」**导致内存泄漏、**派发顺序不可控**触发无限渲染、**TypeScript 推断失效**。框架帮你兜底了这些坑，**你却非要自己踩雷**。


剩下 10%真香 的。「思想> 模板」
我不反对所有模式，**反对「为了套模板而套模板」**。以下两个场景，**保留主要思想**、扔掉繁文缛节，**才是前端正解**。


Pub/Sub—— 跨域解耦通信の轻量之选
当两个完全无关组件需通信，**且不想为此引入 Zustand/Redux/Pinia** 时**极简 Event Bus**完美胜任。javascript
// pubsub.ts —— 不足50行零依赖
class PubSub {
events = {} as Record;说起来，
subscribe {
.push;return => this.unsubscribe;老实说，// 一行返回 off 函数！}
unsubscribe {
this.events?.filter，}
publish {
this.events?.forEach)，}


}
export const bus = new PubSub;


零 Class 搞继承零装饰器TS 全推导。

痛点直击比起 Redux 「为了一颗葡萄籽吞下整串葡萄」，Event Bus 在「非主要链路」「低频跨域通信」「微前端沙箱桥接」三大场景下 ROI 极高。



Strategy—— 把 if/else/switch 塞进 Map 对象

再看主要思想，把算法族封装成可互换函数消除圈复杂度爆炸。

javascript
const discountStrategy = {
normal : p => p。vip : p => p * .8,svip : p => p * .6,};

function calcPrice {
// strategy?.，?price // 一行搞定
return discountStrategy;}



无 Class无接口定义纯函数 Map。

新增白金会员？往对象加一行，OCP 原则落地圈复杂度常年 ≤2。

痛点直击业务规则频繁变更时,策略表驱动比继承链灵活百倍且方便做 A/B Test 动态下发。



作为 Reviewer 的心里话

当我在 PR 见到有人拿 Factory Pattern 包裹三个差异仅在 className 的按钮…，

我不会夸他 「架构能力强」。

说到我只会问，


plaintext这三个按钮共享逻辑吗？没有 → 拆三个组件或幺Props区分。plaintext如果只是样不同 → Tailwind clsx,不用任何Pattern。plaintext真的有共享行为吗？提取 Custom Hook 比 Factory 清爽十倍。话说回来，plaintext


`plaintext

`plaintext现代框架早已内建了一套自洽范式：

Component ≡ Factory  Hook ≡ Decorator / Strategy  Reactivity ≡ Ultimate Observer.
你要交付的是 «简单、清晰、好维护» 的产出物。不是 «能贴上 GOF 模式标签» 的艺术品。

在前端,**后者往往比前者关键得多🤷‍♂︎