date: 2018-10-31
- 为什么要重构
这个算是我独立完成的第一个前端项目，最开始使用的时react技术栈，大概是2年前，所以react的版本有点老旧了，项目的基础框架是自己搭建的没有使用cli工具生成，可以概括点来说有以下的几宗罪：
- react版本老旧，前端发展过快；
- 没有使用redux这样的前端数据管理框架，滥用全局变量，再原有基础上重构困难；
- 全局的状态管理使用的事件监听的模式；
- 代码结构混乱，如果后面的人接手会比较困难；
- 当时还没有npm.lock,有些包会自动升级；
- SPA的路由会对微信的支付功能造成一些影响；
- 调试不方便；
- 该项目体量小，且未来还会持续运营，会在现有功能上做一些扩展。
基于以上的原因，我决定乘这次系统扩展的机会彻底重构该项目，预计半个月的时间，这次重构玩，正好可以交付测试进行测试，避免因重构导致上线异常。
- 选择何种开发模式
经过3年的web开发，发现了后台管理系统可能更适合采用SPA的开发模式进行开发，而对于商城这样的系统，或与采用jsp,或是其它的模板引擎进行开发更好，当然作为新时代的前端使用jsp并不是意味着我们要回到jquery的时代，在dom的操作上我们可以完全使用vue替代jquery，没有了dom操作我们可以少些很多代码，最后我选择的开发模式是jsp+vue，jsp负责路由，而vue负责页面的渲染。
- 重构的步骤
- 确定项目结构：
- 确定页面基础构成，javascript 代码写在jsp当中，每个页面对应一个css样式，
- 页面通用的前端插件，主要有vue.js、axios.js、moment.js、cookie.js、vant.js，
- 样式部分是基本可以从老项目当中进行重用的，重要的是重构页面逻辑，完善注释，
- 整理后端接口。
- 重构中遇到的问题及解决方案
- 写惯了ES6的前端要注意，微信电脑端对于ES6的支持不是很好，let、const这样的关键字还没有支持，所以建议使用ES5的语法进行开发，要注意一些vue在ES5下的写法是有所不同的。
- 免费的CDN不一定比本地静态资源的加载速度快，所以我使用了本地静态资源，速度快了很多，当然能自建CDN的公司另说。
- 使用jsp+vue的开发模式会导致一个问题，如果用户的网速比较慢，会将vue的模板显示出来，看起来就像是乱码一样，怎么办，我的做法是通过，在html中添加一个遮挡div,vue mounted钩子函数出发后，移除次遮挡的div,效果还不错。
- 微信商城的调试不是很方便，后端的调试可以开启eclipse的远程调试，或是使用frp这样的内网穿透工具；对于前端的调试则可以使用eruda,可以在url中添加resetful的参数来控制是否启用调试模式。
- 微信浏览器的安卓端及IOS端的浏览器渲染效果是不一致的，开发完成后需要在这2中平台上多测试测试，更令人崩溃的是小程序在开发工具、iOS、Android上的显示效果都有区别，更要小心。
- 安卓上的js运行效果与Android上的运行效果有点不一样，安卓似乎运行的更为缓慢，一些赋值在iOS上很快就完成了，但是在Android上时常会出现一些延时。
- 感受
愿我走过的地方繁花盛开 ，永无荒芜。