移动前端单页面制作的一些思考

一.路由

场景是&＃xff0c;webview单页面&＃xff0c;url不会变化。

两个标识&＃xff0c;页面自己的路由标识&＃xff0c;当前路由状态。

进入到某页面&＃xff0c;当前路由状态更新为某页面标识。

有一张路由表&＃xff0c;监听回退事件。

一旦回退&＃xff0c;依据路由表和当前路由状态&＃xff0c;找到页面&＃xff0c;触发该页面的回退事件。

路由标识名字建议&＃xff0c;grandfather-father-son这种命名方式。

二.过场动画 

因为&＃xff0c;通过translate的页面覆盖&＃xff0c;是以DOM结构顺序为标准&＃xff08;而不是以z-index&＃xff09;&＃xff0c;后面的DOM覆盖前面的DOM。

所以&＃xff0c;你从页面a切换到页面b的时候&＃xff0c;得把b的dom移到a的后面。 

dom位置变化后&＃xff0c;紧接着加上位移动画的class&＃xff0c;是不会产生动画。请用setTimeout延迟。

总结顺序&＃xff0c;更新当前路由状态->移除之前过场动画->调整dom位置->延迟执行过场动画。

三.一些小技巧(20141024)

1.点透或触摸延迟300ms&＃xff0c;如果你的业务只有点点点&＃xff0c;用fastclick&＃xff1b;有左滑右滑之类&＃xff0c;用成熟的触摸库来tap。

用fastclick&＃xff0c;将难以保持触摸元素时的css样式的变化&＃xff0c;比如:active&＃xff0c;:hover。

2.禁止屏幕滚动&＃xff0c;除了那个&＃xff0c;还有设置body高度为一屏高。

3.html模板&＃xff0c;可以ajax txt方式请求html代码&＃xff0c;自己写model&＃xff0c;view model&＃xff0c;control来实现类MVVM的易维护代码。