出处：掘金
原作者：金泽宸
架构师的价值，不是“代码写得好”，而是“系统活得久”
不想当架构的前端，可能也是好前端
你可能是团队的核心开发者，也可能是独自打怪的全栈工程师，或许你已经负责多个项目，但你是否真的在“做架构”？前端架构师的价值，并不是只说理念，而是能把系统做“更可维护、可复用、可演进”。这一篇文章，我们从实战出发，讲清楚前端架构师该做什么，不该做什么，以及你如何成为那个“决定系统方向的人”
| 普通高级前端 | 前端架构师 |
|---|---|
| 负责一个模块 | 负责多个系统/产品 |
| 写好业务代码 | 设计模块边界、基础能力 |
| 关注功能完成 | 关注性能、扩展、长期演进 |
| 修 bug、提效 | 规范制定、团队赋能 |
前端架构师核心职责三点：
场景：你需要一个通用弹窗
普通开发者思路（写死在业务里）：
<!-- 页面A -->
<template>
<div>
<button @click="show = true">删除用户</button>
<Modal v-if="show" title="确认删除">
<p>是否确认删除该用户？</p>
<template #footer>
<button @click="confirmDelete">确认</button>
</template>
</Modal>
</div>
</template>
弊端：
架构师思路（封装为弹窗服务）：
step 1. 创建 useDialog composable
// useDialog.ts
import { h, render } from 'vue'
export function useDialog() {
return function openDialog({ title, content, onConfirm }) {
const container = document.createElement('div')
document.body.appendChild(container)
const vnode = h(MyDialog, {
title,
content,
onConfirm,
onClose: () => {
render(null, container)
document.body.removeChild(container)
},
})
render(vnode, container)
}
}
step 2. 业务中调用方式
const openDialog = useDialog()
openDialog({
title: '确认删除',
content: '是否确认删除该用户？',
onConfirm: async () => {
await deleteUserAPI()
toast.success('删除成功')
},
})
优点：
架构师不是做“重复工具”，而是提炼模式，统一方法。例如：
| 问题 | 架构师解法 |
|---|---|
| 页面跳转参数多 | 封装 useQueryState |
| 多项目样式不一致 | 设计 UI 组件库 + 样式规范 |
| 权限分散配置 | 统一权限中台设计 |
| 表单配置重复 | 实现配置式表单系统 |
示例场景：数据可视化系统
需求：开发 10 个不同模块的图表页面，包含不同权限、表单筛选、导出、图表展示等
作为架构师你需要考虑：
于是你可能输出：
useChartConfig()：图表配置钩子<DynamicForm />：动态表单渲染器<PageContainer />：通用布局 + 权限判断 + 面包屑 + 面板容器permissionUtils.ts：判断是否展示某按钮