前端项目重构总结（4）-节点重构

我们的线上跑着大大小小40个节点，有的单一节点代码量达到3k+行，实在是乱的令人发指，重复的代码随处可见，肉眼所及之处看到很多ctrl+c/v过来的代码，这种代码既不敢删除，也不敢随意改动，生怕会影响到其他地方。真正应了那句：祖传代码，请勿随意改动！

技术架构：

AngularJs1.x + es2015 + webpack

Why?

肯定会有同学鄙视，Angular都发布6了，你们还在使用1，真是low。只能说很无奈，我们也想过使用更新的、更流行的技术。

React
节点部分全部为表单设计，所做的事情就是添加表单，验证合法性，提交给后端保存数据。但是我对于 React 的认识比较浅显，认为它不适合做这样大批量的表单业务场景，因此放弃。

Vue

这几年 Vue 火的真是一塌糊涂，我也想在项目中去尝试一下，但是选择 Vue 代表着所有的组件全部得自己编写，或者在市面上流行的 Vue 组件再包一层，符合我们的UI风格。

Angular

当然最终还是选择了Angular1.x来进行开发。原因有以下几点：

公司目前web端的系统都是Angular1.x来编写。
使用它可以很快拉来新的开发，大家对于技术栈比较熟悉，上手快。
目前公司提供的组件库是基于 Angular1.x而编写的，可直接使用，和其余模块UI完全一致。
重构时间问题。

编码风格

不想再罗列这些文字，直接看链接：https://github.com/kuitos/kuitos.github.io/issues/34

目录结构

src 
    nodes   // 节点集合
        xxx  // 单一节点
            index.js           // 入口文件
            body.url.html      // 模板文件
            footer.url.html    // 所有节点均以弹框形式展现，此为弹框底部模板
            index.scss         // css
            loader.js          // 与后端交互的 api 
            Controller.js      // 业务逻辑
            mock.js            // 模拟数据
    
    common  // 公共的一些服务之类，包含utils，interceptor,decorator等        
	components // 公共组件
	    styles // 基础的css文件
	        base.scss         // 基本css，其中覆盖组件库的一些特定样式
	        mixin.scss        // 带变量公共css
	        placeholder.scss  // 不带变量的公共css
	        variables.scss    // 项目中经常使用的字体、大小、颜色常量
	        
	config.js   // app初始化配置
	index.js    // app入口
build  // 打包配置
    config.js        // 配置打包输出
    webpack.base.js  // webpack基本配置
    webpack.dev.js   // webpack开发模式
    webpack.prod.js  // webpack生产环境
.editorconfig  // 编辑器设置
.gitlab-ci.yml  // gitlab ci 任务配置
package.json

代码Review

由于架构师同学的撤出，我们新加入了3个同学来帮忙进行重构。人多了，虽然项目中也设置了 eslint 校验，但是很多编码习惯是无法限制的，因此我也简单的制定了一个代码Review Check List，要求大家在提交代码之前做一下检查，避免一些不必要的时间浪费。毕竟组织这些人在一起进行 code review 还是比较花费时间的，因此大家需要一些统一的标准（check list 后面一篇文档单独贴出来）。

重构的工作量是巨大的，繁杂的，时间久了难免会让人产生厌倦的心里，作为我重构的主导者，所以我制定了一个分享的机制，每周五下午由一个同学进行分享，时间控制在半个小时到一个小时之间，可以讲一个很小的点，让大家讨论起来，每个人在这一个小时之内放松一下，也有所收获。目前看起来执行的还不错，希望能够继续保持下去！

困难

业务，还是对于业务的不熟悉，这是最大的问题。
api交互，接口的不合理性让人分分钟想骂街。

提高

之前有4名同学一起开发，现在还有3个，目前还剩下10个节点所有都要开发完成啦。
这次我们换了产品经理，她虽然也不熟悉，但是她会去学习，和听取建议啦。

时间

目前已经进行了3个月，正处于开发、测试、上线的过程中，尤其是等待测试的节点很多。等到彻底结束后再做总结。

结果

结果是未知的，自我感觉还是不错的，等待国庆结束后的第一波上线，接受用户的反馈结果。

2018-09-26