移动端踩坑合集

前段时间在小密圈和你们分享个人感觉，H5代替客户端进行移动端开发，是大趋势。将来较长一段时间，是混合应用的天下。然而H5写移动页面，那绝对是一步一个坑的节奏啊，作好各设备的兼容将是各前端er的重要使命。今天给你们送上一个合集，是我最近开发中遇到的一些坑，做个记录，也给你们一些经验。

1.

babel-polyfill老实加上。如今不少项目都用ES6在写了，ES6在移动端的兼容也天生较好。有些同窗嫌弃polyfill文件太大（压缩后也将近100KB）就不引了，反正用到的方法也很少。

然而最近发现项目在魅族手机上报错，查看缘由发现是没有Array.includes方法，而该项目也正是我说的没引babel-polyfill的状况。因此，为了保险起见，仍是老实引入吧。固然也能够按需引入对应方法，这样的话成本又高了，你无法预见项目未来还会用哪一个方法。

2.

同事反馈，ios上某个页面，输入框里一输东西就闪退。我当时诧异，一个输入框怎么有本事把应用给搞崩。

经排查，缘由使人大跌眼镜。场景是这样的：在点击input标签的时候，根据一些逻辑来判断是否应该给加readonly属性。在手机上，点击动做可能有延迟，在逻辑判断生效以前，键盘已经弹出来了，而后input才被设为readonly。此时若是用键盘输入东西，系统就直接闪退了！没错，是闪退了。由于你在往一个readonly的输入框里写东西。

固然这里也是逻辑的问题，一个input框，应该在其被点击以前，就把readonly属性肯定好的。

3.

forEach去循环NodeList不靠谱。querySelectorAll返回的是NodeList类型，而forEach是Array上面的方法。大部分浏览器有作兼容，用forEach去循环NodeList这样的类数组，也是能干活的。

然而也不是百分百，发如今vivo手机上就不行，直接报错。因此还得老实用for循环去取。有人说能够先把类数组转成数组呀，但我以为为了循环而转，反而产生额外的开销。

4.

fixed定位在iOS的不彻底支持。你们知道iOS原先是不支持fixed定位的，在后来的系统版本中作了支持。

可是在最近的测试中发现，当fixed元素的内容不少，既DOM节点嵌套很是多的时候，fixed元素在一顿乱滑的操做下，居然被滑走了！可见在最新的iOS10下，fixed的支持也是不完美的啊。

因此我通常用absolute定位+局部div滚动来实现固定定位。

5.

click能点透，也能上冒。click事件点透的现象，作移动端开发的同窗应该知道，前几年网上也不少分析文章。其实核心问题就是，在事件派发的过程当中，当前点击元素忽然消失，致使事件被“嫁接”在了别的元素上。

最近遇到的一个坑是，当一个元素绑定了touchstart事件，若是点击的过程当中，页面忽然弹出一个层，那么click事件也会发生在这个层上面，感受像上冒了同样。

6.

这个问题，是为了解决5而引出的。我尝试给touchstart事件加了preventDefault，结果整个页面滚不动了。缘由是把默认的scroll动做给禁止了。看来是不能随意给touchstart事件加preventDefault的。

7.

vue在iOS上的性能缺陷？项目总体用了vue，发现某些特定的操做，在iOS上有明显的延迟。我不敢确诊是vue的问题，只是就表象来作总结。

存储在store中的数据，在组件中进行watch，发现更新会缓慢。

频繁修改数据的绑定，好比audio的progress事件，页面进行style绑定的时候，当系统屡次键盘弹出后，实时更新会失效，我不得不手工操做DOM。

给事件用了修饰符，好比.stop/.prevent，监听函数的执行有明显延迟。

8.

按home键切入后台后的状况。iOS和安卓都要注意，可能须要处理的东西有：延迟延时是否仍是执行、音频是否能继续播放、Promise链是否在继续执行。

如页面有以上操做，须要注意一下，在按home键进入后台，再返回的时候页面是否还正常。

相应的处理办法，有Page Visibility API，可是要考虑兼容。最好是让壳来提供API，这样比较稳妥。

9.

vue组件的销毁。vue组件有$destroy方法，通常不用，可是若是要用到，注意它只是销毁Vue实例。在store中存储的相关状态，须要手动去重置。页面上的HTML节点，须要手工去删除。

10.

vuex自动注册问题。这个跟移动端关系不大，也是遇到的，一并说吧。

vuex会自动检测是否有全局的Vue变量，有的话会自动注册。若是你在代码中再次use，则会报错。我尝试想办法检测vue是否已注册了vuex，可是没找到方法。最后只得这样来判断：if(window.Vue && window.Vuex)。这样代表vuex确定已被注册过了。