手機觸屏版頁面開發總結

標籤：

在最初進行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:"[email protected]"};   
     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 差不多，就不做細細解說了！  

手機觸屏版頁面開發總結