关于登陆注册需求的复盘

年前公司登陆注册的需求,预估一个月的工期,结果在过程中项目变得不可控,最后完成用了几乎三个月,为了不辜负这段时间的加班,故复盘一下项目完成的过程。

关于需求评审

先简单回顾一下需求,注册 / 登陆 都有三个通道 : 账号/密码 ,手机号,三方 (包括微信扫码和,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来代替轮询的实现。