本文已参与「新人创作礼」活动，一起开启掘金创作之路。
本文写于2019年7月，笔者在一次组内的code review后，发现很多人的页面结构规划很有问题，从而导致了很多怎么也改不好的bug。在开始coding之前，需要先提前设计你的代码，不要一上来就吭哧吭哧的搬砖头。 提前设计你的代码
前言
我们总是吐槽修改以前的代码如何之坑，本次就聊一聊如何通过 提前设计 来增加代码的可维护性，提高开发效率
Why —— 为什么要这么做
刚开始做开发时，往往一拿到任务就着手开发，并没有做充分的分析，一心只想赶进度，往往会犯以下错误：
- 随意取变量名
- 不封装直接把代码逻辑写在主区域内
- 拼命拷贝代码
- 所有代码写在一起，导致复杂功能的页面过长
- html部分结构混乱，后续增加新内容无从下手
- 标签嵌套奇怪，很难整体去修改某模块的样式（从表面上看在一个块里，其实全是散装，很容易导致元素间相互干扰影响）
- class名称抽象，根本无法从class名看出其含义
- 布局混乱，外层容器宽度修改了，内部全要修改
......在此省略n多烂代码特征
How —— 怎么做
根据多年挖坑、踩坑、填坑、救火的经验，按照以下方式去提前设计规划代码，有助于预防和及时自救，避免再次挖了个大坑把自己埋了，把队友坑了。
- 充分了解需求和背景，知道要做什么，避免产品设计和需求不一致导致的天坑（第一版的答疑改了无数遍，最后产品、开发、测试理解的需求都不一致。产品找到开发说怎么开发的不一样，开发拿出原型和UI让他看怎么不一样，产品答和他想的不一样...公司内真实事情）
- 确定终端类型，不同终端的开发要求不一样，需要提前了解清楚
- 确定最终要开发几个页面，是否有一个页面在不同业务场景下复用的情况
- 这些页面中有没有类似的地方，是否可复用
- 计划复用的模块用什么方式更好，路由导航？公共组件？公共方法？为什么选用这个方式
- 确认有没有需要新引用的三方插件
- 建好本次开发内容可能用到的所有文件，起好文件名，填好路由表（只搭通用的基础部分，具体内容先不写）
- 写出html部分标签结构，对应模块根据业务或功能定好class名称，样式部分同样依据定好的class搭好结构
- 现有的UI框架或已开发好的组件有能直接拿来用的，优先用
- 页面布局要用什么方式？static? float? flex? position? inline-*? table? 为什么用这个
- 对应位置挨个填坑吧，填完坑就开发完毕~
最后来梳理下整个规划流程
graph TD
A(拿到设计图) --> B[整体看一遍,了解要开发什么]
B --> C[确定终端与尺寸适配要求]
C --> D[确定要分几个页面来开发,对应建好相关文件,修改vue.config]
D --> E[找出可复用部分与复用方式]
E --> F[规划页面路由,确定文件目录结构]
F --> G[确定文件内容结构,定义class名]
G --> H[根据定好的class搭建样式结构]
H --> I[逐个填充内容]
I --> J(开发完毕)
