做前端真累：写给其他职能看的前端述职 (吐槽)

年终总结又到了，一年里什么都没做，都在和恶心的逻辑撕咬搏杀，如此也没有什么技术提升。拖延症无心应对年终总结。回想过往，想出了这篇东西。打工人总结 2 个字就是“心累”。那么前端累在哪里呢，让我们带着轻松愉快的心情，一起来回顾一下：

1 逻辑不正交。数据和样式布局必须在页面上通过耦合以实现。我不是单说 css ，而 js 你也负有责任。web 页面的排版布局的本质就是遵照依靠耦合关系，牵一发则动全身。(所以目前被广泛使用的布局排版套路都是很简单的，比如 flex 一把梭，套多一层元素绝对定位一把梭)。其次，css 的逻辑也不是基于正交的法则的，调节样式需要综合几个样式的知识和特性，调个居中需要磨半天。

2 整合数据流逻辑恶心。分别从 A 、B 、C 等各处接口大乱斗大杂烩取到数据，格式各异千奇百怪是常态，一顿数据格式处理，糅合。(有数据格式洁癖的不要做前端。)格式基本上都是后端定义，各个后端格式不一致或者格式不好用，都到前端这里整合。前端 app 代码里面数据流乱如麻，字段的有无也是乱如麻，页面效果还要保持洁净，能做前端的都是些什么神仙。数据到达的时间也是要有讲究做处理的，不然数据没法用。开发一些大型应用，整合数据、数据流恶心是难以避免的。

3 大型应用的联动功能。一个地方的数据变了，其他地方联动显示数据。虽然说花多点时间是绝对没有技术难度实现的，但是就是恶心费时间啊。我滴妈呀。多组件数据联动。带 checkbox 的树形图父子联动。带 checkbox 的多选的树形图联动，外加根据业务逻辑联动勾选，外加重写为懒加载的勾选联动，还有些这个表格项展开里面也需要联动的。乱如麻。麻了麻了。

4 难封装，自暴自弃，没什么领域积累。封装通常是程序员的基本素质嘛。而实际上前端很多东西是不如后端和数据库规规整整，想封装其实是封装不了的，甚至被封装反噬。这才是真正的“代码分布式”啊：代码到处分布。改一个需求不就搜索字段改半天了嘛。封装东西，需要处理的不单指是数据，而是数据样式的混合体。很多工作量是没有办法通过封装绕过去的。前端是最末端，业务逻辑没法封装啊，都被外界打破封装的可能性，没封装的话自己搜代码一个个改呗。

5 页面逻辑难以文档描述，对项目可维护度造成威胁。看前端“吹了这么久页面集成单元测试，而没有几家是实际做成的”，就知道了，这种东西耗费大量人力物力，收益很浅。页面逻辑难以文档描述，接手一个代码，理解起来特别困难，页面逻辑放飞自我。单元测试，可欲不可求。心中敬仰的永远是不可逾越的屎山。

6 业界没什么进步和积累沉淀。不断重复历史，没意思。某些厂拿出所谓的“积累沉淀”出来开源，笑死，都是自用的来强硬开源，不推广怎么有 kpi 呢，心知肚明轮子只够用那两三年，抓住时间机会晋升，实用性的确是呵呵。更新换代一次又重复一次历史。

7 兼容性问题。略。够你玩半天了。其实这也是大头。

8 多端多能。各个客户端开发职能归于前端范畴，还要保持各端样式一致性。各大公司开发自己的样式组件库，vue2 来一套，vue3 来一套，react 来一套，别提多恶心了，但是无可避免。这不得组个大团队？不断重复历史，没意思，请问一大群人搞这一两年有啥进步吗。多端开发其实每个都够一个人十年研究吃一壶的，很不幸过 5 年你这个端会不会被时代抛弃都是未知定论。这也导致了没什么领域积累：当你开发一个东西解决某个业务问题，人家开发框架的窜得比你还勤快，赶紧适配人家的框架吧，star 数正在往下掉了。

前端能吃到的甜头：

语法新特性是一马当先快速推广的。有编译器在，语法飞速更新换代。

启动代码应用编译调试起来，是相对比运行起来较快的。

git 代码协作相对于其他职能还是比较和谐的。

和前端妹纸四手联弹，指点江山，不错不错。

kop1989

2021-12-29 09:30:03 +08:00

我个人倒是有觉悟：和交互相关的开发工作（前端、移动端、桌面端等等）一定会繁琐且复杂。

后端是面向数据编程，唯一的核心目标就是将数据处理成想要的呈现形式。数据是一定的，不会因为环境等原因导致不可预知的差异（已知差异可以通过逻辑转换）

而前端面临的是千奇百怪的呈现设备与使用环境。

1 、UI 交互逻辑与数据操作逻辑耦合度高。（楼主的 1 、2 、3 、4 、5 ）

2 、开发负担了过重的 UI 设计、呈现工作（楼主的 4 、5 、7 ）（这各问题目前正在改善，比如大厂往往会开发团队反向输出给 UI 团队设计工具，用于自动化生成 UI 相关代码，但开发人力紧张的中小企业暂时还没有这种能力。）

3 、前端的实现方式一直在根据当前的互联网形态与公司形态巨变。（楼主的 6 ）

4 、前端开发的生产资料占有率相对低，所以企业不愿意投入过度的人力成本。

以上的问题就会导致前端相关工作内容变化快、逻辑难梳理、耦合度高。