移動端web解決方案

標籤：

範疇

　　移動端web瀏覽器。至少需要適配的，UC,QQ,各手機內建瀏覽器，chrome，safari。

     是不是覺得和PC端差不多？錯了！每款同一版本ios的內建瀏覽器一樣。但每款同一版本android的不同品牌手機內建瀏覽器有很多細節上的差別(每個手機電訊廠商稱其為最佳化系統)。何況每款瀏覽器還有不同版本。所以移動端web的坑遠多於PC端。這是它有N多輔助庫的原因。

     優點是，它對CSS3，H5的支援遠勝PC端。

 

解決方案

　　

 

淺析

　　原生載入

　　　　<script>標籤羅列，放body結束標籤前

     模組化載入

　　　　requireJS/seaJS.   前者為AMD.後者CMD.

　　　  其實兩者差不多。都用來做依賴管理。你看順眼就用哪個吧。兩者異同看這裡。

          注意，如果要打包，勿用別名。

    路由

　　　　用途

　　　　　　 不重新整理改變URL；通過URL渲染對應內容。

           實現原理  　　　　　　 HTML4 hash方法  　　#aaa ---> 改變hash ---> 監聽hashchange ---> 頁面前進後退時觸發 ---> 渲染頁面      　　　　 HTML5 state方法 　　 pushState 改變URL(一般也是加hash) ---> 監聽popstate事件 ---> 頁面前進後退時觸發 ---> 渲染頁面      　　　　不支援hashchange事件怎麼辦？ setTimeout/setInterval 10ms掃描hash的變化。                H5 state 老手機不支援怎麼辦？優雅降級為 H4 hash寫法。 相容不好怎麼不好？同樣只能用定時掃描。 　　　　Backbone的路由也是基於此原理實現。由History、Router兩對象構成。       fastclick.js　　　　原因　　　　　　click事件有300ms延遲。touchstart/touchend在滾動時會觸發。（老版zepto/jquery.mobile 的tap事件也會透視）。　　　　分析           　　為什麼click事件有300ms延遲呢？　   在B元素上有半透明紅色遮蓋層A，黃色B元素內有可點選連結C。點擊A，touchstart等執行，A消失。300ms後，執行B click事件。           實現原理　　　　　　延遲問題：登出原生的click事件。在touchstart，touchend事件後，通過座標判斷是否為類click事件，拋出自訂的類click事件。                 透視問題：通過e.preventDefault()阻止瀏覽器的預設處理           注意　　　　　　meta設定了user-scalable=no或者 touch-action css屬性(僅IE10支援)，click就不會有延遲。fastclick也會對此判斷。           用法　　　　　　

window.addEventListener( "load", function() {    FastClick.attach( document.body );}, false );

 

　　hammer.js　

　　手勢事件。 原因是原生  getsture事件 gesturestart、gesturemove、gestureend。 相容問題非常嚴重。

       iscroll5.js　　　原因　　　　滾動不流暢(IOS已做了最佳化，如-webkit-overflow-scrolling: touch;);沒有捲軸；在fixed和捲軸結合出現的詭異問題。　　　  用法　　　　

　　　　　　　　　　　　   var iScroll = new IScroll(dom, {scrollX: true,//使用橫向捲軸scrollY: false,//不使用縱向捲軸click: false,//不允許點擊preventDefaultException: { tagName:/^(a|input)$/ }//讓a input標籤可點擊});//在400ms內滾動到指定元素el 往左位移10像素iScroll.scrollToElement(el,400,10)  //讓捲動區域內容在指定的時間內滾動到x/y的位置 scrollTo(x, y, time, relative) iScroll.scrollTo(0,100,400);    //100ms內向下滾動400px。如果relative設為true，則向上。

 

        注意　　　　移動端適合 iscroll-lite.js。（壓縮後5K左右）它僅支援基本的滾動。如滾動到某元素。需要處理滾動事件，還需要添加onScroll事件進去。       　　 animate.css　　　　原理　　　　　　css3過渡、動畫　　　　用法　　　　　　添加它提供的class 樣式。自己再添加class/id去調整樣式           舉例　　　　　　　　 enquire.js　　　　原理　　　　　　利用了原生的matchMedia()方法，處理JS的響應式布局 　　　　用法           

            //螢幕小於500px時            enquire.register("screen and (max-width:750px)", [            //match匹配，unmatch不匹配                { match : function() { console.log("handler 1 matched"); } },                { match : function() { console.log("handler 2 matched"); } }            ]);

 

　　　　　　       zepto　　　　　DOM庫，推薦它的原因是它比jquery.mobile小。基本採用HTML5，CSS3原因。　　　　　注意：它的自訂事件僅支援DOM。原因是它是建立類事件Event，再dispatchEvent。　　　　　可以看我對其源碼的分析。　　　　　      　　　　　　

         

　　

　　

　　

移動端web解決方案