上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

一个列表页面,初级中级高级前端之间的鸿沟就显出来了

[复制链接]
  • TA的每日心情
    无聊
    2025-4-11 10:54
  • 签到天数: 51 天

    [LV.5]常住居民I

    88

    主题

    38

    回帖

    282

    积分

    高级工程师

    积分
    282
    发表于 2025-4-15 10:44:38 | 显示全部楼层 | 阅读模式

    你是不是也写过 20+ 个中后台列表页,却总觉得跳不出 CRUD?你以为你是高级了,其实你只是熟练了。

    你可能写过几十个中后台列表页,从最早用 v-model 到后来自定义 hooks,再到封装组件、状态缓存、schema 驱动。

    但同样是一个列表页:

    • 初级在堆功能;
    • 中级在理结构;
    • 高级在构建规则。

    我们就以这个最常见的中后台场景:搜索 + 分页 + 表格 + 编辑跳转,来看看三个阶段的认知差异到底在哪。

    写完 vs 写清楚 vs 写系统。


    等级开发目标

    等级 开发目标
    初级 页面能用,接口通,功能不报错
    中级 页面结构清晰、组件职责明确、状态复用
    高级 页面只是 DSL 映射结果,字段配置驱动生成,具备平台能力

    搜索区域的处理

    等级 做法
    初级 el-form + v-model + 手写查询逻辑
    中级 封装 SearchForm.vue,支持 props 字段配置
    高级 使用字段配置 schema,支持字段渲染、联动、权限控制、字典动态加载
    • 初级看起来能用,实则字段散落、表单逻辑零散;
    • 中级可复用,但配置灵活性不足;
    • 高级直接写 schema 字段声明,字段中心统一维护,整个搜索区域自动生成。

    表格区域的组织

    等级 做法
    初级 表格写死在页面中,columns 手动维护
    中级 封装 DataTable 组件,支持 columns + slots
    高级 表格由字段配置自动渲染,支持国际化、权限、字典映射、格式化

    高级阶段的表格是“字段中心驱动下的视图映射”,而不是手写 UI 组件。


    页面跳转行为

    等级 做法
    初级 router.push + 返回后状态丢失
    中级 缓存搜索条件和分页,支持跳转回填
    高级 路由状态与组件状态解耦,编辑行为可抽象为弹窗、滑窗,不依赖跳转

    体验上,初级只能靠刷新;中级保留了状态;高级压根不跳页,抽象为状态变更。


    字段结构理解

    等级 做法
    初级 页面写死 status === 1 ? '启用' : '禁用'
    中级 使用全局字典表:getDictLabel('STATUS', val)
    高级 字段中心统一配置字段含义、展示方式、权限与控件类型,一份声明全平台复用

    高级不写字段映射,而是写字段定义。字段即规则,规则即视图。


    工程感理解

    你以为工程感是“项目结构清晰”,其实高级工程感是:

    • 样式有标准;
    • 状态有模式;
    • 路由有策略;
    • 权限有方案;
    • 字段有配置中心。

    一切都能预期,一切都能对齐。


    行为认知:你以为你在“配合”,其实你在“等安排”

    你说“接口还没好我就做不了页面”。你说“等产品图出了我再看组件拆不拆”

    但高级前端早就开始:

    • Mock 数据、虚拟字段结构;
    • 自定义 useXXX 模块推动业务流转;
    • 甚至反推接口结构,引导后端设计。

    配合和推进,只有一线之隔。


    低水平重复劳动:你写了很多,但没真正沉淀

    你遇到过哪些“看似很忙,实则在原地转圈”的开发场景?

    最典型的,就是以下这三类“中后台系统里的低水平重复劳动”

    ❶ 每页都重复写 table columns 和格式化逻辑

    • 每页重复定义 columns;
    • 状态字段每次都手写 status === 1 ? '启用' : '停用'
    • 日期字段每页都在 render 中 format;
    • 操作列、index 列、字典值写满重复逻辑。

    📉 问题:代码冗余,字段维护困难,一改动就全局找引用。

    提升方式

    • 抽象字段结构配置(如 fieldSchema);
    • 字段渲染、字典映射、权限统一管理;
    • 一份字段配置驱动表格、表单、详情页。

    ❷ 每个列表页都重复写搜索逻辑和状态变量

    • 每页都写 searchForm: {}search()reset()
    • query 参数、分页、loading 状态变量混杂;
    • 页面跳转回来状态丢失,刷新逻辑重复拼接。

    📉 问题:页面逻辑分散、复用性差,体验割裂。

    提升方式

    • 自定义 hook 如 useSmartListPage() 统一管理列表页状态;
    • 统一封装查询、分页、loading、缓存逻辑;
    • 形成“搜索+表格+跳转+回填”标准列表模式。

    ❸ 反复堆砌跳转编辑流程,缺乏行为抽象

    • 每次跳转写 this.$router.push({ path, query })
    • 返回页面刷新列表,无上下文保留;
    • 编辑页都是复制粘贴模板,字段改名。

    📉 问题:编辑与跳转强耦合,逻辑割裂,流程不清。

    提升方式

    • “查看 / 编辑 / 创建”抽象为页面模式;
    • 支持弹窗、滑窗模式管理,跳转可选;
    • 解耦跳转与行为,页面由状态驱动。

    组件理解:你以为你在写组件,其实你在制造混乱

    组件抽象不清、slot 滥用、props 大杂烩、逻辑耦合 UI,写完一个别人不敢接的黑盒。

    中级组件关注复用,高级组件关注职责边界和组合方式,具备“可预测性、可替换性、可拓展性”


    页面能力 ≠ 项目交付能力

    你能写页面,但你未必能独立交付项目。缺的可能是:

    • 多模块协同能力;
    • 权限 / 字段 / 配置抽象力;
    • 异常兜底与流程控制设计。

    从写完一个页面,到撑起一个系统,中间差的是“体系构建力”。


    结语:页面 ≠ 技术,堆功能 ≠ 成长

    初级在交付页面,中级在建设结构,高级在定义规则。

    真正的高级前端,已经不写“页面”了,而是在定义“页面该怎么写”。

    转自:喝拿铁的桔子
    顺便给大家分享一下,民族企业大厂,前后端测试捞人,待遇给的还不错,感兴趣的可以来试试!

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表