单页面开发遇到的一些问题
-
Upload
zhi-zhong -
Category
Technology
-
view
226 -
download
4
Transcript of 单页面开发遇到的一些问题
![Page 1: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/1.jpg)
单页面开发遇到的一些问题
钟志
无线事业部
2014-05-25
——SPA在去哪儿Pad Touch上的实践
![Page 2: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/2.jpg)
xunlei sina baidu qunar
钟志
• 热爱前端和新技术
• 爱好摄影和美食
• 去哪儿无线前端工程师
![Page 3: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/3.jpg)
目录
1 Padtouch概况
2 遇到的一些问题
3 相关资源
4 Q & A
目录
![Page 4: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/4.jpg)
1
Padtouch概述
![Page 5: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/5.jpg)
SPA流程图
Browser webserver CDN API
data
data data
data
html
js/css
![Page 6: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/6.jpg)
SPA和客户端类似
SPA
Native App
Desktop App
REST APIs
Middleware
Lib(s)
Data Store(s)
HTML
JSON
JSON
JSON
RPC or Websocket
![Page 7: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/7.jpg)
Padtouch前端结构 co
re
jQuery underscore requirejs
jQuery UI Backbone.js Require-text
Gruntjs
Webserver
Co
mp
on
en
ts
本地化 组件化
模块化 自动化
一体化 页面化
livereload
jshint
autoprefixer
uglify
cssmin
htmlmin
less
urlrewrite
imagemin
imageembed
mocha
r.js
Pad Web App M
od
ule
s
…
jquery.ui.qunar.citypicker
jquery.ui.qunar.datepicker
jquery.ui.qunar.message
jquery.ui.qunar.dialog background
$.addPressClass
$.location utils
$.cookie
$.spin
flight common hotel user
![Page 8: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/8.jpg)
2
遇到的一些问题
![Page 9: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/9.jpg)
路由 让每个视图有了自己的门牌号码
![Page 10: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/10.jpg)
Backbone提供的路由
![Page 11: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/11.jpg)
改良版本
![Page 12: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/12.jpg)
支持QueryString的版本
http://pad.qunar.com/#flight/list/depCity=北京&arrCity=上海&goDate=2014-06-01
![Page 13: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/13.jpg)
各视图之间无依赖
自由传递参数
![Page 14: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/14.jpg)
使用requiretext载入模板文件
Requiretext是require的一个插件,它能将模板文件当做一个字符串引入到js中
https://github.com/requirejs/text
![Page 15: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/15.jpg)
开发时的模板
![Page 16: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/16.jpg)
在JS中使用模板
![Page 17: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/17.jpg)
打包后的模板
![Page 18: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/18.jpg)
让前端模板支持跨域部署
http://pad.qunar.com/api/flight
http://qunarzz.com/xxx.js
![Page 19: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/19.jpg)
• css • image • font • js • template
减少网络请求,提升网页性能
打包
![Page 20: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/20.jpg)
打包配置
![Page 21: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/21.jpg)
Gruntfile.js中的配置
![Page 22: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/22.jpg)
main.js
flight.js
hotel.js
train.js
user.js
按业务加载不同的js包
![Page 23: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/23.jpg)
• 模拟测试数据
接口数据模拟
基于connect middleware的本地网页服务器
![Page 24: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/24.jpg)
数据模拟流程图
输入网址
匹配URL
connect
Require本地文件 代理到其他地址 不代理
![Page 25: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/25.jpg)
urlrewrite.js
![Page 26: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/26.jpg)
模拟数据格式1
![Page 27: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/27.jpg)
模拟数据格式2
可编程,可接收参数
![Page 28: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/28.jpg)
![Page 29: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/29.jpg)
3
相关资源
• http://nodejs.org/ • http://gruntjs.com/ • http://yeoman.io/ • http://bower.io/ • http://underscorejs.org/ • http://backbonejs.org/ • http://requirejs.org/ • https://github.com/requirejs/text • http://jenkins-ci.org/
![Page 30: 单页面开发遇到的一些问题](https://reader036.fdocument.pub/reader036/viewer/2022062418/5560b5f5d8b42a033c8b4a18/html5/thumbnails/30.jpg)
4
Q & A