工作整理

整理一下近半年较为重要的工作成果以及较为明显的个人成长

1. 宽策略智投地图组件的开发
   难重点：利用正则表达式来匹配transform translate3D属性

在这之前的开发中，一般通过替换margin属性来处理dom元素的位置。在这次开发中，由于translate3D会开启硬件加速，在性能上会远远优于margin属性。但是遇到的问题是难以读取当前的x，y偏移量。通过正则表达式 /translate3d((-?\d+)px,\s(-?\d+)px,\s(\d+)px)/, "$1")可以方便的获取当前的x，y偏移量。

2. Vue Keep Alive 的实践
   难重点：Vue组件生命周期（activated、created）的区别与用法

在常用的列表页 一级页面中，用户常常会切换来切换去，为了避免组件在切换的过程中被销毁而导致的性能损耗，需要做好界面的Keep Alive。为了针对不同的界面所应对不同的情况。需要进行合理的设计。
比如详情页，需要每次activated时进行数据获取
而列表页，则只需在created时进行数据获取

3. Local Storage 的运用
   难重点：通过给每个storage添加时间戳来确保缓存的准确性

为了减少HTTP的请求，降低服务器的压力，做好本地缓存尤为重要。为此需要给每条Storage添加一条时间戳。
业务中，需要根据不同的场景来决定不同的过期时间
一般常用业务可设置短一些 比如3分钟 10分钟等
边缘业务则可以设置长一点 比如一天 十天等
较为敏感的可以从服务器获取过期时间

4. 离线状态以及网络连接超时的处理
   难重点：主要围绕Local Storage和网络状态API的业务处理

移动端的网络状况较为复杂。一般通过设置Axios的超时时间以及获取设备的网络状态来区分不同的处理方式

*缓存是否过期：缓存过期时间根据是否离线来决定，离线状态缓存过期时间长（5~10天）在线状态缓存过期时间短.png