Soumettre la recherche
Mettre en ligne
打造輕量化手機網站(實作版)
•
Télécharger en tant que PPTX, PDF
•
16 j'aime
•
1,235 vues
Rei Ayanami
Suivre
打造輕量化手機網站(實作版)
Lire moins
Lire la suite
Mobile
Signaler
Partager
Signaler
Partager
1 sur 23
Télécharger maintenant
Recommandé
Angular js 入門介紹
Angular js 入門介紹
wantingj
Study4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionic
Kyle Shen
Angular2 Form
Angular2 Form
Rainmaker Ho
打造輕量化手機網站
打造輕量化手機網站
Rei Ayanami
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_design
Jackson Tian
reflow & repaint
reflow & repaint
Randy Jin
Javascript template & react js 初探
Javascript template & react js 初探
wantingj
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
Recommandé
Angular js 入門介紹
Angular js 入門介紹
wantingj
Study4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionic
Kyle Shen
Angular2 Form
Angular2 Form
Rainmaker Ho
打造輕量化手機網站
打造輕量化手機網站
Rei Ayanami
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_design
Jackson Tian
reflow & repaint
reflow & repaint
Randy Jin
Javascript template & react js 初探
Javascript template & react js 初探
wantingj
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Wade Huang
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
yiditushe
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
appollo0312
更好的文件组织
更好的文件组织
Kejun Zhang
前端MVC之backbone
前端MVC之backbone
Jerry Xie
伪静态
伪静态
huanghua581
React js入門
React js入門
昶宇 賴
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
Backbone js and requirejs
Backbone js and requirejs
Chi-wen Sun
淘宝网前端开发面试题
淘宝网前端开发面试题
Lumend
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
Joseph Chiang
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结
yangdj
Contenu connexe
Similaire à 打造輕量化手機網站(實作版)
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Wade Huang
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
yiditushe
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
appollo0312
更好的文件组织
更好的文件组织
Kejun Zhang
前端MVC之backbone
前端MVC之backbone
Jerry Xie
伪静态
伪静态
huanghua581
React js入門
React js入門
昶宇 賴
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
Backbone js and requirejs
Backbone js and requirejs
Chi-wen Sun
淘宝网前端开发面试题
淘宝网前端开发面试题
Lumend
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
Joseph Chiang
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结
yangdj
Similaire à 打造輕量化手機網站(實作版)
(13)
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
更好的文件组织
更好的文件组织
前端MVC之backbone
前端MVC之backbone
伪静态
伪静态
React js入門
React js入門
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Backbone js and requirejs
Backbone js and requirejs
淘宝网前端开发面试题
淘宝网前端开发面试题
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结
打造輕量化手機網站(實作版)
1.
Jul 30, 2015
by Rei
2.
SPA是一種概念,而不是一種做法。 在不換頁的前提下變更網頁內容,都可以稱之為SPA
3.
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 回 傳不同內容的方式做條件。
10.
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. 套版
19.
20.
這是概念不是做法 目的為在GoogleSpeed拿高分減輕第一頻讀取量。
做法上… 1. 以前使用剝殼法 2. 我們改用 native ajax 3. Css append 進入 <style> 4. Js 使用 eval() 執行 ※需注意順序問題
21.
22.
把 CSS
跟 JS 用 ajax 撈回來,丟進 localStorage 先檢查 localStorage 中是否有內容,若沒有就 run ajax 使用版本號控制更新
Télécharger maintenant