整理一下近半年较为重要的工作成果以及较为明显的个人成长
- 宽策略智投地图组件的开发
难重点：利用正则表达式来匹配transform translate3D属性
在这之前的开发中，一般通过替换margin属性来处理dom元素的位置。在这次开发中，由于translate3D会开启硬件加速，在性能上会远远优于margin属性。但是遇到的问题是难以读取当前的x，y偏移量。通过正则表达式 /translate3d((-?\d+)px,\s(-?\d+)px,\s(\d+)px)/, "$1")可以方便的获取当前的x，y偏移量。
- Vue Keep Alive 的实践
难重点：Vue组件生命周期（activated、created）的区别与用法
在常用的列表页 一级页面中，用户常常会切换来切换去，为了避免组件在切换的过程中被销毁而导致的性能损耗，需要做好界面的Keep Alive。为了针对不同的界面所应对不同的情况。需要进行合理的设计。
比如详情页，需要每次activated时进行数据获取
而列表页，则只需在created时进行数据获取
- Local Storage 的运用
难重点：通过给每个storage添加时间戳来确保缓存的准确性
为了减少HTTP的请求，降低服务器的压力，做好本地缓存尤为重要。为此需要给每条Storage添加一条时间戳。
业务中，需要根据不同的场景来决定不同的过期时间
一般常用业务可设置短一些 比如3分钟 10分钟等
边缘业务则可以设置长一点 比如一天 十天等
较为敏感的可以从服务器获取过期时间
- 离线状态以及网络连接超时的处理
难重点：主要围绕Local Storage和网络状态API的业务处理
移动端的网络状况较为复杂。一般通过设置Axios的超时时间以及获取设备的网络状态来区分不同的处理方式
*缓存是否过期：缓存过期时间根据是否离线来决定，离线状态缓存过期时间长（5~10天）在线状态缓存过期时间短.png
网友评论