移動端踩坑合集

前段時間在小密圈和你們分享個人感覺，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確定已被註冊過了。