前端的本质是数据。
复杂度
程序的功能边界是人的欲望边界。欲望的增长得很快。程序员理解力增长有限。因此,程序最后往往是难以维护的。
功能都可以分解为:数据,数据的呈现,数据的操作。
用户期望的是,快速的达成目标。这目标总是和数据相关的,一般是 查看数据 或 操作数据。
操作数据相对比较容易,就是改数据值。对应的无非是一个表单,或者鼠标键盘之类输入设备的输入(玩游戏场景)。
查看数据做的体验好,往往很复杂。体验好指的是:用户能不费力的看到期望的数据。复杂原因:
- 获取数据的复杂度。期望的数据可能来自不同实体,会调用若干次接口。
- 展示方式的复杂度。为了突出数据的某些方面,要设计合适的展示方式。
- 减少响应时间(性能)的复杂度。需要做接口缓存,预渲染,渲染的缓存,滚动加载,虚拟列表等。
降低复杂度
- 减少程序的功能。
数据层面的复杂度: 数据数量多,对象属性多,对象的层次深。
逻辑的复杂度: 涉及的数据多,圈复杂度高,调用链长。
修改的复杂度:被多处复用,改动时,
不同目标之间的平衡: 代码的可维护性, 性能。 深度深。
更有深度的思考前端。数据视角看。 呈现列表数据: 表格,看板, 筛选 分组,聚类 高亮/突出展示内容 维度:时间维度,从属关系,并列关系
一些高频的,有深度的内容(会遇到什么问题,目前是怎么解决的):
- 底层
- 高频的数据操作方法。边界及难的地方。
- 应用层
- 框架 API 。 React 的 hooks 。
- 状态管理
- 接口调用
- SSR