手機觸屏版頁面開發總結

在最初進行JS 框架的選型， 選擇的是jQuery + jquery.mobile。

框架選型問題： 

   【1】大小問題， jQuery 是 277KB ，jquery.mobile 是 451KB ，當用戶處於弱網絡時，這個大小對於手機端的加載來說，徹底是一場災難。
  【2】拋開 jquery.mobile 的大小不說， 對於移動端的開發而言， jquery.mobile並沒有出色的優點可言。在使用的過程當中jquery.mobile  會給頁面的DOM元素附加居多無用的CSS樣式名， 大大減低了DOM佈局的不穩定性。

框架選型解決辦法： 
 
【1】zepto.js 是一款專爲 移動端而生的JS 框架，壓縮前大小爲 54.6KB   壓縮後以後只有 9.7KB 大大增長了JS的下載速度。
【2】 zepto.js 的使用和 JQ 幾乎如出一轍， 大大減少了學習成本， 只要用過JQ 的， 直接用就行了，且他不會給頁面的 dom元素附加垃圾樣式。


tap事件點透：

點擊事件儘可能減小使用  click ， 而改用 tap， 緣由在於 click 點擊會出現 300ms左右的延時。
可是在使用 tap 做爲點擊事件的時候， 當你點擊的元素定位方式爲 固定定位 或者是 絕對定位時， 會出現點透的狀況。


如上圖， 灰色爲半透明遮罩層， 用來作會彈出框的背景，遮住APP頁面，點擊 A 時，遮罩層消失， 點擊 B 時 ， 進入 【100%本息保障】 欄目的詳情頁面， 若是此時 會在 A 上綁定 tap 事件。 當你點A 的時候你會發現一個神奇的現象， 遮罩層會消失， 可是消失後頁面會進入到 【100%本息保障】 欄目的詳情頁面 。 是由於 tap 事件被點透了。

tap事件點透解決辦法：
e.preventDefault(); // 阻止「默認行爲」
是否是以爲很簡單？簡單沒關係，最主要的是完美的解決了tap的點透問題 ，這個有點相似 原生JS 中的阻止事件冒泡， 關於事件冒泡， 在此不作解釋和記錄。 



zepto.js 中的animate問題：
在移動端，常常會處理一些動畫效果， 比方頁面的圖片焦點輪播效果， 彈出框的漸隱效果， zepto.js 中提供了一個處理動畫的函數，animate， 在處理PC端的動畫時，此函數很是優雅， 可是在處理速度不如PC的移動端來講， animate 函數就有點愛莫能助了， 在處理動畫時， 勉強能夠完成， 可是在一些性能較差的手機上， 動畫效果並不明顯， 甚至會明顯看到動畫很卡。


zepto.js 中的animate問題處理辦法：
touchslider.js 是一款專門處理移動端頁面 圖片焦點輪播效果的JS插件， 這款插件很是小，只有幾KB大， 代碼量也不大， 那天下午讀過插件源碼， 其實邏輯並不複雜， 主要是 JS + CSS3 來處理動畫的， 用JS 對動畫進行初始化處理， 而動畫的執行則交給CSS3， 你們都知道， CSS3中的  animation 和 transition 有興趣的則能夠本身私下去了解。


webapp頁面數據緩存問題：
在製做頁面的過程當中，頁面的離線緩存卡了我很長一段時間，中間各類嘗試，各類糾結，其中的心酸且聽老衲細細道來。
html5提供了多種頁面的離線緩存解決辦法。

第一種：application cache
application  是一種較簡單的數據緩存方式， 可將你要進行緩存的文件寫入到 name.manifest  配置文件中。可是研究了一段時間發現此方案不可行，緣由在於，只能對寫入了配置項的內容進行緩存，且當使用手機360等軟件清理手機緩存時， 緩存的數據會被清理掉。

第二種：localstorage 和 sessionstorage
因而想到了第二種解決方案，localstorage 和  sessionstorage ， 這兩種方式均可以將網絡數據存儲在本地， 前者保存的數據在瀏覽器關閉後， 依然存在手機中， 即便是你卸載掉此應用，如若不是你手動刪除數據，數據將永久存在手機中。 然後者保存的數據會隨着瀏覽器的關閉而被清理掉， 因此選擇了使用 localstorage 。 可是僅僅有數據， 必需要有頁面框架讓其渲染。 就像是水同樣， 若是沒有杯子盛水，水永遠不可能成爲杯子的形狀，如今數據有了，可是須要一個容器來裝載它。 而當手機沒有移動網絡是， 咱們沒法從網絡上獲取頁面，即便是有數據， 也無用， 因而用了一個不太好的方法， 將靜態頁面放到 webapp包中，這樣的好處在於無須去網絡下載CSS ， JS 等內容， 數據的加載直接用 ajax 就行了！
到這裏， 問題貌似獲得瞭解決， 且慢， 又遇到問題了， 我如何判斷手機是否有網絡？ 固然， web端能夠經過 ajax 向服務器發送一個請求是否失敗， 若是失敗則證實無網絡， 這個辦法看似可行， 可是， 當用戶處於弱網絡時， ajax  請求必然會很慢， 有很是大的可能會請求失敗， 雖然只是弱網絡仍是有網絡的。那怎麼呢？ 可讓 安卓 和 IOS 來進行網絡判斷 ， 而後將網絡參數 token 帶在 url 地址後面， 如: http://www.baidu.com?token=0 當傳入的 token=0時， 爲無網絡 ； token=1 時爲有網絡。 IOS 一切正常， 看似問題解決了同樣， 可是， 騷年， 沒關係， 在安卓4.0下測試， 沒法獲取到參數， 這是由於， 安卓 4.0 系統不支持將參數帶在 url 後面，纔剛剛看到曙光，在發現此問題後， 又陷入迷茫， 不過沒關係， 男人嘛？ 就應該激流勇進， 迎難而上。 因而找 安卓開發溝通，找解決辦法， 在一番痛苦的查找後，發現能夠經過 安卓 調用 webapp端 JS 來完成傳參，測試成功。因而大功告成，

localstorage 的寫入方式
     var json_data = {id:12,name:"yang",email:"aaa@aaa.com"};   
     storage.setItem("json_data",JSON.stringify(json_data));

localstorage 的讀取方式
    var json_data = JSON.parse(storage.getItem("json_data")) ;

注：localstorage 只能保存 5M左右大小的數據，1M = 1024KB  1KB= 1024字節， 按一個漢子兩個字節來算， 大概能夠存儲2621440個漢字，若是是英文字母或者是數字的話能夠存儲5242880 個， 這個大小徹底夠用。

第三種： webSQL
看名字就知道， webSQL 就是一個web端的數據庫，IE9~IE9+、chrome、Firefox、 Opera、Safari。webSQL和 localstorage區別在於， webSQL能夠創建多張數據表， 每一張表至關因而一個localstorage ，很明顯在存儲的數據大小上遠遠要大於 localstorage ，可是複雜程度也是遠遠高於 localstorage 的，webSQL的使用和 localstorage 差很少，就不作細細解說了！