打造轻量化手机网站(实作版)
- 1. Jul 30, 2015 by Rei
- 4. ? Model <dir> ? Pages <dir> ? Template <dir> ? All-pages.js ? All-templates.js
- 6. ? 用於共通的部分。
- 7. ? 原則上只做2件事 1. 儲存資料 存在不可侵入的 function 中 用變數存就好了 2. 回傳資料 同步直接 return 非同步使用 callback function
- 8. ? 原則上只做1件事 給它一個 Object，回傳整包 Html
- 9. ? 使用不可侵入 function 方式寫。 ? 套版、改字、特效、頁面共通內容、綁事件等哩哩摳摳都 在這。 ? 根據 router 觸發的 page 事件決定該做的事。 ? 減少使用 if model 去為不同頁面做條件，改用 model 回 傳不同內容的方式做條件。
- 11. ? jQuery Mobile ? Backbone.js ? AngularJS angular-route.js 我絕對不會說我唾棄用套件的人
- 12. ? 改寫網址(pushState) ? 根據網址決定要做什麼事 ? 記錄 Url History ? 從網址截取 QueryString, Hash 或自定參數 ? 根據 hash 在 content 中尋找或建立適當容器 ? 於適當時機點觸發事件
- 13. ? pushState 只有一行 Code history.pushState({state object}, title, url);
- 14. ? popState 是一個事件，每次history變更時會被觸發 $(window).on(‘popstate’, function() { // 觸發 pushState 後要做的事 }); ? iOS有個雷
- 16. 根據不同家會有不同參數傳遞法 Ex: ? 跟後端通用的 QueryString http://url?a=1&b=2 ? 當作標記的 Hash http://url#hash ? HashQS http://url#hash?a=1&b=2 ? 資料夾層級方式的參數 http://url#/main/taipei/area
- 17. ? Pageinit ? Pageshow ? Pagehide
- 18. 1. 點選連結 2. 送出pushState 3. 觸發popState 4. 截取 hash，判斷 model 與 view 的名稱 5. 將網址存入 Url History 6. 根據 model 跟 view，找出或建立容器 7. 對前一頁觸發 pagehide，並隱藏 8. 顯示一個 loading 9. 根據 model 跟 view，檢查相對應的 css 與 js 是否已讀取 10. 讀取完成後存入 localStorage，下次直接從這裡存取 11. 觸發 pageinit 與 pageshow 12. 套版
- 20. ? 這是概念不是做法 ? 目的為在GoogleSpeed拿高分減輕第一頻讀取量。 ? 做法上… 1. 以前使用剝殼法 2. 我們改用 native ajax 3. Css append 進入 <style> 4. Js 使用 eval() 執行 ※需注意順序問題
- 22. ? 把 CSS 跟 JS 用 ajax 撈回來，丟進 localStorage ? 先檢查 localStorage 中是否有內容，若沒有就 run ajax ? 使用版本號控制更新