用HTML5CSS3实现媲美原生应用的交互体验_尤雨溪

1 尤雨溪 微博 @尤小右 用HTML5/CSS3实现 媲美原生应用的交互体验 2 整体架构 CSS3 Transform & Transition 多点触控API 滑块Puzzle Demo 3 摆脱“这是一个网页”的设计思维 4 UI框架 jQuery Mobile Sencha Touch jQTouch ... 5 基于服务器端的MVC框架 (Ruby on Rails, Django, CodeIgniter, Yii...) vs. 基于客户端的框架 (Backbone.js, Ember.js, Spine.js...) 用MVC理念开发javascript前端应用 6 后台只是API 界面的生成转移到终端 7 根据应用的重量级 选择适合的架构 8 Backbone.js router models views templates 9 前端模版语言 John Resig’s Mirco Template ejs - embedded javascript {{ Mustache }} Handlebars Jade Haml 10 模块化 YUI3 Require.js Sea.js 自定义编译脚本 11 //定义一个模块 one.js define( [“libs/underscore”, “libs/backbone”], function (_, Backbone) { ... return { //此模块的API }; } ); //在主文件里调用此模块 require( [“one”], function (one) { ... } ); Require.js简单例子 12 或者你也可以什么都不用。 13 CSS3 Transform & Transition 14 CSS3 Transform & Transition transform: function rotate(ndeg) rotateX(ndeg) rotateY(ndeg) rotateZ(ndeg) translate(xpx, ypx) translateX(xpx) translateY(ypx) translate3d(xpx, ypx, zpx) scale(n) scaleX(n) scaleY(n) skew(n) skewX(n) skewY(n) matrix(a, c, b, d, tx, ty) 15 CSS3 Transform & Transition transform-origin 50% 0 50% 100% 16 CSS3 Transform & Transition transition: property duration timing-function delay 例子： transition: all 1s linear; /* 用all属性的时候要谨慎 */ transition: color .3s ease-in-out; transition: transform 0s cubic-bezier(0, 0, 0.2, 1); 17 CSS3 Transform & Transition transition easing function linear ease ease-in ease-out ease-in-out cubic-bezier(x1, y1, x2, y2) 18 CSS3 Transform & Transition cubic-bezier(x1, y1, x2, y2) 19 CSS3 Transform & Transition .drag { transition: transform 0s cubic-bezier(0, 0, 0.2, 1); } 20 CSS3 Transform & Transition 强制硬件加速 translate3d(x, y, z) 或者任何只适用于3D的属性，比如 -webkit-perspective -webkit-backface-visibility 21 HTML5 MultiTouch API 22 HTML5 MultiTouch API 3种基本事件 touchstart touchmove touchend mousedown mousemove mouseup * click事件是通用的 23 HTML5 MultiTouch API 事件对象 $(document.body).on(„touchstart‟, function (e) { console.log(e.touches[0].pageX); }); e.touches => 一个包含touch对象的数组 e.touches.length => 当前触摸点的数量 e.touches[0] => 第一个触摸点 24 HTML5 MultiTouch API 事件对象 e.touches e.targetTouches e.changedTouches 更多兼容性细节 http://www.html5rocks.com/en/mobile/touch/ 25 Puzzle Demo http://puzzle.youyuxi.com https://github.com/yyx990803/Puzzle-Demo 26 Zepto.js 作者: Thomas Fuchs (script.aculo.us作者， Prototype.js团队核心成员) 针对移动端轻量化的jQuery 27 LESS 给CSS加上嵌套，变量，运算和Mixin 让你写出更模块化，更易维护的CSS 支撑Twitter Bootstrap的核心技术 28 Puzzle Demo $(document).ready(function () { PUZZLE.init(document.body); }); 29 Puzzle Demo var PUZZLE = (function ($, window, undefined) { //在此闭包中干活 ... //对外暴露API return { init: function (container) { //初始化代码 } }; })(Zepto, window); 30 Puzzle Demo //要用到的一些变量 var animating = false, tileSize = 72, animationSpeed = 150, setTimeout = window.setTimeout; 31 Puzzle Demo //一个简单的容纳HTML模版的对象 //一个模版其实就是一个返回HTML字符串的函数var templates = { board: ..., tile: function (id) { return „...‟;}, shuffleButton: ... }; 32 Puzzle Demo //Utility function //返回一个可以用在$().css()里面的CSS对象var cssTransform = function (x, y) { var translation = 'translate(' + x + 'px,' + y + 'px)'; return { '-webkit-transform': translation, '- moz-transform': translation, '-ms-transform': translation, '-o-transform': translation, 'transform': translation }; }; 33 Puzzle Demo //滑块对象var Tile = function (id, board) { this.id = id; this.board = board; this.render();}; Tile.prototype = { render: function () { ... }, update: function (position) { ... }, getMovableDirection: function () { ... }, getNeighbor: function (direction) { ... } }; 34 Puzzle Demo //滑块对象的render()方法render: function () { this.el = $(templates.tile(this.id)); } 35 Puzzle Demo //滑块对象的update()方法update: function (position) {this.position = position; this.x = (position % 4) * tileSize; this.y = ~~(position / 4) * tileSize; this.el .data('position', position) .css(cssTransform(this.x, this.y));} 36 Puzzle Demo //底板对象var Board = function () { this.buildTiles(); this.shuffle(); this.render(); this.update();}; Board.prototype = { buildTiles: ..., shuffle: ..., render: ..., initEvents: ..., update: ..., ... }; 37 Puzzle Demo //在底板对象上委托事件处理initEvents: function () { var board = this, touch = {};board.el.delegate('.tile', 'touchstart mousedown', function (e) { ... }) .delegate('.tile', 'touchmove mousemove', function (e) { ... }) .delegate('.tile', 'touchend mouseup', function (e) { ... }); } http://developer.baidu.com