什么是“设计臭味”？话说回来，

它就像煤气泄漏的味道。本身不大概率会炸，但只要有一点火星，整个程序就会原地升天。

作为前端架构师或主要开发者，如果你在 Code Review 时闻到了以下这 种味道请务必警惕。

. 僵化性 ：牵一发而动全身

症状： 你想复用一个通用的 Header 组件。结果发现它里面硬编码了 useRouter 的跳转逻辑，甚至还直接 import 了 Redux/Pinia 的 store。你想在另一个项目用它，没门。除非你把那边的路由和状态管理全套搬过来。

前端实战翻译： 这就是典型的高耦合。其实，组件不再是一个独立的乐高积木，而是一块焊死在主板上的芯片。

反面教材 ：

// 这是一个充满僵化味道的组件const UserProfile = => { // 致命伤1：直接依赖具体的全局状态 const user = useSelector;// 致命伤2：直接依赖具体的路由实现 const history = useHistory;const handleLogout = => { // 业务逻辑耦合在UI里 api.logout.n => history.push);} return 

{user.name} 退出
};怎么说呢，

教程：

• 控制反转 ：组件只管展示。逻辑错了多给了使用者 块钱。

  前端实战翻译： 通常源于隐式依赖 全局变量污染 或者CSS 样式穿透 。

  /* 这种写法在全局样式里简直是灾难 */.title { font-size : px;color : red，}/* 或者在组件里滥用!important */.btn { background : blue!important，/* 你的同事想覆盖这个样式时必须写得比你更恶心 */}

  • CSS Modules / Scoped CSS / Tailwind 坚决消灭全局样式冲突。
  • 纯函数 ：工具类函数坚决不能有副作用。输入相同，输出必须相同，
  • 依赖显式化 别在组件里偷偷摸摸读 window.xxx 或者 localStorage 把它们封装成 Hooks 或服务。按理说，

  . 顽固性 ：无法拆分的连体婴

  症状： 你写了一个非常炫酷的 DataGrid 表格。支持排序、筛选、分页，隔壁组看到了说：“哇，这个好，我也要用。” 你自信满满地把代码发给他。五分钟后他跑来说：“哥，我只要个表格UI。你为什么把 Axios 拦截器、ElementUI 的弹窗组件、甚至你们公司的埋点 SDK 都打包进来了？”

  前端实战翻译： 这是 内聚性低 的表现。业务逻辑和基础设施、UI 逻辑混在一起，导致根本无法拆分复用。

  反面教材这方面， JavaScript

  // 一个原本想做通用组件的 hook。却混入了业务function useTableData {
  const = useState;useEffect => {
  // 错误：这里耦合了特定的 HTTP 库和业务上的 token
  逻辑
  axios.get } })
  .n);// 错误：硬编码了数据结构 res.data.list
  },);return data，}
  

  。

  ---