打造輕量化手機網站(實作版)

1. Jul 30, 2015 by Rei

2.  SPA是一種概念，而不是一種做法。
 在不換頁的前提下變更網頁內容，都可以稱之為SPA

4.  Model <dir>
 Pages <dir>
 Template <dir>
 All-pages.js
 All-templates.js

5.  #model-view

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有個雷

15.  將已經讀取過的Url儲存成陣列

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
 使用版本號控制更新