【前端工程化】前端工作中的业务规范有哪些

在企业级后台系统中，业务逻辑往往复杂、层级多、交互密集。为了保证系统的可维护性与团队协作效率，我们需要在开发过程中遵循统一的业务实现规范。

本规范主要围绕应用结构设计和用户交互控制展开，帮助团队在开发过程中形成一致的编码习惯和设计思路。

一、应用结构

1. 分层架构设计

UI 层（View）

负责页面展示和用户交互，由 Vue/React 组件构成；

页面组件存放在 views/*，对应具体路由；
通用组件存放在 components/*，如表格、按钮、表单控件等；

逻辑层（ViewModel / Controller）

处理数据转换、状态管理、业务流程；

使用 Pinia（Vue）或 Zustand（React）进行全局状态管理；
避免多个组件之间直接共享状态，通过统一的状态中心通信；

服务层（Service）

封装 API 请求、本地存储、缓存处理；

所有网络请求统一调用封装后的 service 方法；
支持拦截器统一处理错误、加载状态、权限问题；

模型层（Model）

定义接口类型、数据结构；

TypeScript 接口统一存放于 types/ 或 models/ 目录；

示例目录结构

css 复制代码

src/
├── views/
│   └── user/
│       ├── UserList.vue
│       └── UserDetail.vue
├── components/
│   └── common/
│       ├── DataGrid.vue
│       └── SearchBar.vue
├── services/
│   └── user.service.ts
├── types/
│   └── user.model.ts
├── store/
│   └── user.store.ts
└── router/
    └── user.routes.ts

2. 模块化开发模式

按功能模块划分代码，如 userModule、orderModule；
每个模块包含独立的组件、服务、路由、样式等资源；
支持按需加载，提升首屏加载速度；
公共模块抽取为 shared 目录，便于复用；

3. 路由配置策略

路由与菜单绑定，支持动态加载；
使用嵌套路由组织父子页面关系；
路由守卫用于权限验证、登录跳转；
路由路径命名清晰，如 /user/list、/order/detail/:id；

4. 状态管理策略

使用 Pinia（Vue）或 Zustand（React）进行状态管理；
明确状态变更流程（如 Action -> Mutation -> State）；
避免多个组件之间直接共享状态，通过统一的状态中心通信；
对敏感状态（如用户信息、权限）做持久化处理；

5. 生命周期使用建议

在组件/页面中合理使用生命周期钩子函数；
- Vue：onMounted、onBeforeUnmount
- React：useEffect
避免在生命周期中执行过多副作用，建议封装为可复用的服务方法；
清理副作用（如定时器、事件监听）在组件销毁前完成；

二、用户交互

1. 表单交互规范

所有表单字段应有明确的 label 和 placeholder；
必填项使用红色星号标记；
表单提交前进行校验，错误提示定位到对应字段；
异步校验（如用户名是否已存在）应给出 loading 提示；
表单提交成功后给予明确反馈（如 Toast 提示、跳转页面）；

2. 按钮行为规范

主操作按钮突出显示（如蓝色背景）；
辅助操作按钮采用次级样式（如灰色边框按钮）；
禁用状态下按钮不可点击，并给出视觉反馈；
提交类按钮在请求期间显示 loading 状态，防止重复提交；

3. 错误与提示机制

页面异常统一展示"空状态"或"错误页"（如 404、网络异常）；
后端接口错误码统一处理，避免裸露原始错误信息；
用户操作失败时，提示应具备指导性（如"请检查网络后重试"）；
成功提示使用绿色图标 + 简短文案，如"保存成功"；

4. 加载与过渡体验

首屏内容优先渲染，非关键资源延迟加载；
数据请求期间展示骨架屏或 Loading 动画；
页面切换使用平滑动画，增强用户体验；
大型操作（如文件上传、复杂计算）应提供进度条；

5. 权限与引导机制

根据用户角色动态控制菜单和按钮的可见性；
初次使用功能时提供引导提示（如 Tooltip、弹窗）；
敏感操作（如删除、清空）应二次确认，避免误操作；
所有权限受限的操作加灰处理，并提示无权限原因；

6. 数据交互规范

分页、排序、筛选等交互统一设计；
所有分页组件支持自定义每页数量；
表格列支持排序、筛选、固定列等功能；
所有异步数据操作提供 loading 状态反馈；

7. 日志与埋点机制

所有关键操作添加埋点，如按钮点击、页面进入、接口失败；
日志记录统一格式，如 click、submit；
上线前移除调试日志输出；
所有埋点上报统一封装，便于后期接入分析平台；