移動端web解決方案

範疇

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

     是否是以爲和PC端差很少？錯了！每款同一版本ios的內置瀏覽器同樣。但每款同一版本android的不一樣品牌手機內置瀏覽器有不少細節上的差異(每一個手機運營商稱其爲優化系統)。況且每款瀏覽器還有不一樣版本。因此移動端web的坑遠多於PC端。這是它有N多輔助庫的緣由。

     優勢是，它對CSS3，H5的支持遠勝PC端（由於PC端的主力IE在拖後腿）

 

解決方案

　　

 

淺析

　　原生加載

　　　　<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，則向上。

 

        注意

　　　　 移動端別直接用iscroll5，它太大了。只適合閹割版 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。

　　　　　 能夠看我對其源碼的分析。　

　　　　

      響應式、meta設置

　　　　

 　　　　  請看這裏