前端代码重构

前端代码重构首先要对原有的项目做大概的梳理，既然是重构，当然是不能改变之前的需求交互，那么就需要根据产品的完整需求或者是软件使用说明以及现有的功能进行完善。

以运营端为例：

一、 路由是各项的基础，也是项目能成功运行的最重要的一环，同时也是最耗费时间最容易出错的一部分，所以建议先从路由入手整理，建议步骤如下：

1.1、 首先，将路由修改为按需加载，避免资源的不必要加载；

1.2、 因为多方面历史因素，路由页面和control混搭在一起的现实问题，为了在第一步骤降低重构的代价，可以将除路由外的所有的方法，全部封装成一个control文件，在全局外部引用；

1.3、 对相应的路由添加适当的注释说明，增加代码的可读性。

---

二、 统一页面结构：

1.1、 运营端使用了PUG的前端模板引擎，但是有几个历史遗留的html页面，将页面结构统一，保证代码的可复制性以及扩展性；

1.2、 给模板各个模块功能加入适当的注释说明，增加代码的可读性。

---

三、 对第一步骤中的除路由外的所有方法进行拆分：

1.1、 提取公共方法；

1.2、 按照B端、C端、顾问端分布拆分，涉及到的control、css都需要重构；

1.3、 由于涉及到的足以影响全局，若有充足的时间最为保险的方法就是统一重构；但是若是时间受限那比较保险的方法就是按端拆分，逐步重构，

1.4、 具体的调试方法，即重构好某一端，然后注释掉第一步骤中的除路由外的所有方法的control，以保障重构一端不受下步重构计划的影响。

---

四、 在重构的时候要注意以下前端规范：前端规范

---

五、 性能优化注意点：

---

1.1、 数据读取：

        1.1.1、 尽量使用局部变量（目前都较为规范）；

        1.1.2、 对象成员的嵌套深度与读取时间成正比，嵌套过深要进行优化（此处依赖于后端以及产品设计的交互）。

1.2、 算法和流程：

        1.2.1、对象成员的嵌套深度与读取时间成正比，嵌套过深要进行优化（此   处依赖于后端以及产品设计的交互）；

        1.2.2、当条件较少时 使用if-else更易读，而当条件较多时if-else性能负   担比switch大，易读性也没switch好；

        1.2.3、对于if- else 概率越大的条件越靠前判断；

        1.2.4、更改标准已不推荐的标签，如

、改为由css控制。

---

六、 重构时CSS注意点：

1.1、需要注意预编译语言可以定义变量（比如常用的颜色、字体、字号等）、嵌套 写法、可以继承其他类的属性、计算、内置函数等。

---

七、 重构运营端时，为了避免后面的重复项工作，需要注意两点：

1.1、 产品需要重新确认一些相同的功能性的东西是否需要统一（包括图标、交互、分页等等）

1.2、 不同版本的迭代，注释上可以做相应的完善，即某个功能的变更是哪个版本的需求以及变更的时间，若有特殊说明也可以在注释中备份。