微信商城重构体验

date: 2018-10-31

• 为什么要重构

这个算是我独立完成的第一个前端项目，最开始使用的时react技术栈，大概是2年前，所以react的版本有点老旧了，项目的基础框架是自己搭建的没有使用cli工具生成，可以概括点来说有以下的几宗罪：

1. react版本老旧，前端发展过快；

2. 没有使用redux这样的前端数据管理框架，滥用全局变量，再原有基础上重构困难；

3. 全局的状态管理使用的事件监听的模式；

4. 代码结构混乱，如果后面的人接手会比较困难；

5. 当时还没有npm.lock,有些包会自动升级；

6. SPA的路由会对微信的支付功能造成一些影响；

7. 调试不方便；

8. 该项目体量小，且未来还会持续运营，会在现有功能上做一些扩展。

基于以上的原因，我决定乘这次系统扩展的机会彻底重构该项目，预计半个月的时间，这次重构玩，正好可以交付测试进行测试，避免因重构导致上线异常。

• 选择何种开发模式

经过3年的web开发，发现了后台管理系统可能更适合采用SPA的开发模式进行开发，而对于商城这样的系统，或与采用jsp,或是其它的模板引擎进行开发更好，当然作为新时代的前端使用jsp并不是意味着我们要回到jquery的时代，在dom的操作上我们可以完全使用vue替代jquery，没有了dom操作我们可以少些很多代码，最后我选择的开发模式是jsp+vue，jsp负责路由，而vue负责页面的渲染。

• 重构的步骤

• 确定项目结构：

zhelishitupain

1. 确定页面基础构成，javascript 代码写在jsp当中，每个页面对应一个css样式，

2. 页面通用的前端插件，主要有vue.js、axios.js、moment.js、cookie.js、vant.js，

3. 样式部分是基本可以从老项目当中进行重用的，重要的是重构页面逻辑，完善注释，

4. 整理后端接口。

5. 重构中遇到的问题及解决方案

6. 写惯了ES6的前端要注意，微信电脑端对于ES6的支持不是很好，let、const这样的关键字还没有支持，所以建议使用ES5的语法进行开发，要注意一些vue在ES5下的写法是有所不同的。

7. 免费的CDN不一定比本地静态资源的加载速度快，所以我使用了本地静态资源，速度快了很多，当然能自建CDN的公司另说。

8. 使用jsp+vue的开发模式会导致一个问题，如果用户的网速比较慢，会将vue的模板显示出来，看起来就像是乱码一样，怎么办，我的做法是通过，在html中添加一个遮挡div,vue mounted钩子函数出发后，移除次遮挡的div,效果还不错。

9. 微信商城的调试不是很方便，后端的调试可以开启eclipse的远程调试，或是使用frp这样的内网穿透工具；对于前端的调试则可以使用eruda,可以在url中添加resetful的参数来控制是否启用调试模式。

10. 微信浏览器的安卓端及IOS端的浏览器渲染效果是不一致的，开发完成后需要在这2中平台上多测试测试，更令人崩溃的是小程序在开发工具、iOS、Android上的显示效果都有区别，更要小心。

11. 安卓上的js运行效果与Android上的运行效果有点不一样，安卓似乎运行的更为缓慢，一些赋值在iOS上很快就完成了，但是在Android上时常会出现一些延时。

12. 感受

愿我走过的地方繁花盛开 ，永无荒芜。