单页面开发遇到的一些问题

钟志

无线事业部

2014-05-25

——SPA在去哪儿Pad Touch上的实践

xunlei sina baidu qunar

钟志

• 热爱前端和新技术

• 爱好摄影和美食

• 去哪儿无线前端工程师

目录

1 Padtouch概况

2 遇到的一些问题

3 相关资源

4 Q & A

目录

1

Padtouch概述

SPA流程图

Browser webserver CDN API

data

data data

data

html

js/css

SPA和客户端类似

SPA

Native App

Desktop App

REST APIs

Middleware

Lib(s)

Data Store(s)

HTML

JSON

JSON

JSON

RPC or Websocket

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

2

遇到的一些问题

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

Backbone提供的路由

改良版本

支持QueryString的版本

http://pad.qunar.com/#flight/list/depCity=北京&arrCity=上海&goDate=2014-06-01

各视图之间无依赖

自由传递参数

使用requiretext载入模板文件

Requiretext是require的一个插件，它能将模板文件当做一个字符串引入到js中

https://github.com/requirejs/text

开发时的模板

在JS中使用模板

打包后的模板

让前端模板支持跨域部署

http://pad.qunar.com/api/flight

http://qunarzz.com/xxx.js

• css • image • font • js • template

减少网络请求，提升网页性能

打包

打包配置

Gruntfile.js中的配置

main.js

flight.js

hotel.js

train.js

user.js

按业务加载不同的js包

• 模拟测试数据

接口数据模拟

基于connect middleware的本地网页服务器

数据模拟流程图

输入网址

匹配URL

connect

Require本地文件 代理到其他地址 不代理

urlrewrite.js

模拟数据格式1

模拟数据格式2

可编程，可接收参数

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/

4

Q & A