年前公司登陆注册的需求，预估一个月的工期，结果在过程中项目变得不可控，最后完成用了几乎三个月，为了不辜负这段时间的加班，故复盘一下项目完成的过程。
关于需求评审
先简单回顾一下需求，注册 / 登陆 都有三个通道 ： 账号/密码 ，手机号，三方 （包括微信扫码和，QQ授权，微博授权），通过一系列的规则和引导，最终走到 登陆/注册 成功页面 ， 再跳转到来源网页。
需要完成的包括 PC 端，移动端 以及 微信端
其中移动端和微信端的区别很小，只有能否微信扫码登录的区别。
看起来简单明了的需求，貌似很多逻辑都能复用，所以 PC 端 估半个月，移动端估一周，剩下的用来IE适配和解决问题。
关于技术选型
因为涉及到微信扫码登录，后端提议接口使用轮询的方式，我不断去轮询状态的接口从而获取状态，比如微信登陆的流程，需要微信扫码 > 获取手机号 > 引导关注公众号 > 创建 / 绑定 网站账号 的流程，那么大致对应着后端给我的 4 个字段，而我由字段的存在与否来判断进入哪个路由。
遇到了哪些问题，及解决方案
老代码
老代码用屎山来形容毫不为过，页面由各种html 内连 css / js 和php 语句拼凑而成，一个页面四五千行的代码，甚至还和其它项目的css 产生着耦合 （引用其公共css )，php 的include 层层嵌套，在深层中还存在着JS的逻辑（我唯一保留的一点三方登陆的老代码在后面引入了难以排查的bug）
解决办法是对前端进行了重构，一开始为了把多个页面的逻辑写进一个PHP文件中，监听浏览器的hash值改变路由，后面发现每个路由都存在自己的初始化逻辑，于是又加上了简单的生命周期。 后面又发现有复用组件的需求，干脆上了 vue框架，script 标签引入。
代码复用
因为老项目路径的一些原因，import 是无法使用的，只好使用include 来代替。
需要复用的变量全部做成全局，用 symbol 或者 单例 防止变量污染。
vue 的模板写在一个html文件，逻辑部分用 x-template 的 script 标签 include 引入 vue的模板代码。
样式表
使用 node-sass 监听 scss 文件的改变编译scss，生成对应的 css
兼容性
项目需要兼容到IE10 ，babel-browser 和 pollyfill 是一定要有的。实时编译会一定程度影响性能，暂时还没有想到解决办法。
然后样式需要使用 post-css 进行兼容，直接用 vscode 的prefixer插件了。
轮询
每个页面都需要进行接口的轮询，如果每个路由都维护自己的定时器，会存在很多的重复代码，也有内存泄漏的风险。
所以增加了一个轮询的单例类来维护轮询的逻辑，利用路由守卫在created的时候启动定时器并传入一些需要的参数与回调，在destory之后进行销毁。
这样的好处是防止了忘记手动销毁而导致多个定时器的同时存在，并且方便了对接口的返回值做统一的处理。
反思以及优化
总体来说，前端踩的坑就是在不使用任何打包工具的情况下强行使用了 es6 + vue + sass，解决了一些问题，但同时也引入了不少问题
代码维护： 比起之前css样式表的杂乱无章，sass 确实清晰了不少，但同样也带来了问题，因为没有任何的声明文件，其他人在接手我的代码后是不知道需要用node-sass 进行编译的。
用户体验： vue-router 的路由跳转由于是局部刷新吗，相比传统的a标签跳转刷新体验会好一些。但是由于轮询存在几秒的间隔，一些接口的返回会很慢。 而大部分用户注册肯定是不希望遇到卡顿的。
关于性能： babel 的生产环境编译会影响性能，不过可以在版本稳定了之后在生产环境使用babel编译完成的代码。轮询如果用户一直不进行操作也会占用服务器资源，可以使用websoket 和 普通的ajax来代替轮询的实现。