1. 单页面开发遇到
的一些问题
钟志
无线事业部
2014-05-25
——SPA在去哪儿Pad Touch上的实践

2. xunlei sina baidu qunar
钟志
• 热爱前端和新技术
• 爱好摄影和美食
• 去哪儿无线前端工程师

3. 目
录
1 Padtouch概况
2 遇到的一些问题
3 相关资源
4 Q & A
目
录

4. 1
Padtouch概
述

5. SPA流程图
Browser webserver CDN API
data
data
data
data
html
js/css

6. SPA和客户端类似
SPA
Native App
Desktop App
REST APIs
Middleware
Lib(s)
Data Store(s)
HTML
JSON
JSON
JSON
RPC or
Websocket

7. Padtouch前端结构
core
jQuery underscore requirejs
jQuery UI Backbone.js Require-text
Gruntjs
Webserver
Components
本地化组件化
模块化 自动化
一体化页面化
livereload
jshint
autoprefixer
uglify
cssmin
htmlmin
less
urlrewrite
imagemin
imageembed
mocha
r.js
Pad Web App
Modules
…
jquery.ui.qunar.citypicker
jquery.ui.qunar.datepicker
jquery.ui.qunar.message
jquery.ui.qunar.dialog background
$.addPressClass
$.location utils
$.cookie
$.spin
flightcommon hotel user

8. 2
遇到的一些问
题

9. 路由
让每个视图有了自己的门牌号码

10. Backbone提供的路由

11. 改良版本

12. 支持QueryString的版本
http://pad.qunar.com/#flight/li
st/depCity=北京&arrCity=上海
&goDate=2014-06-01

13. 各视图之间无依赖
自由传递参数

14. 使用requiretext载入模板文件
Requiretext是require的一个插件，它能将模板文件当做
一个字符串引入到js中
https://github.com/requirejs/text

15. 开发时的模板

16. 在JS中使用模板

17. 打包后的模板

18. 让前端模板支持跨域部署
http://pad.qunar.com/api/flight
http://qunarzz.com/xxx.js

19. • css
• image
• font
• js
• template
减少网络请求，提升网页性能
打包

20. 打包配置

21. Gruntfile.js中的配置

22. main.js
flight.js
hotel.js
train.js
user.js
按业务加载不同的js包

23. • 模拟测试数据
接口数据模拟
基于connect middleware的本地网页服务器

24. 数据模拟流程图
输入网址
匹配
URL
connect
Require本地文件 代理到其他地址 不代理

25. urlrewrite.js

26. 模拟数据格式1

27. 模拟数据格式2
可编程，可接收参数

29. 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/

30. 4
Q & A