项目中一些问题总结

1. 浏览器缓存问题

> 每次项目迭代后，总会因为缓存问题，倒是用户无法获取最新的功能，有时甚至会出现一些 BUG。
**解决方法**
使用 `gulp-rev` 每次构建添加版本号 如：
![](http://images2017.cnblogs.com/blog/1042777/201709/1042777-20170901140215515-1967106314.png)

2. 前端图片旋转、压缩上传

> 由于现在手机的性能越来越强大，特别是摄像头的功能越来越丰富，导致拍摄好的照片有时候会达到几十兆的地步，由于网络的不稳定性。上传时候严重影响用户体验。
**解决方法**
图片旋转： Orientation 属性
如果是手机拍照上传的图片，就会有这个属性。代表拍照的时候，手机旋转的角度
图片压缩：
* 首先对图片等比缩放（现在的手机像素这么高，拍出来的照片宽高都有几千像素）。这样渲染到 `canvas` 的时候，性能就会好点。
* canvas.toDataURL("image/jpeg", 1);  第一个参数为图片格式，默认为 image/png。第二个参数为压缩质量，在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 10 的区间内选择图片的质量。

移动端的下拉刷新

> 目前，市面上很多流行的下拉刷新，比如 isScroll 等，还有一些非常棒的国产 JROLL 。但是这些插件都又很严重的性能问题（没办法，代码的庞大，页面逻辑的复杂。造成了使用这些插件出现了严重的性能问题）。
**解决办法**
模拟手机端百度,的下拉刷新。自己封装了一个下拉刷新功能。
原因： 只有当下拉刷新的时候 才会出动刷新函数，使用 CSS3 来进行页面动画。其他的（比如上拉滑动页面的时候）都是使用的 自带的 scroll Bar 因此 。性能问题极大的提升。
![](http://images2017.cnblogs.com/blog/1042777/201709/1042777-20170901141744108-1486232287.png)

移动端单页面应用 后退后 第三方模态框不消失的问题

> 由于是但也应用。而第三方的模态插件一般都动态生成，插入在body 中 。倒置回退的时候如果没有调用 cancel 函数 就不会自动关闭
**解决办法**
使用 html5 pushState() 方法，添加一个锚点，然后监听 changeState 事件，在事件中 关闭模态