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

一.路由

场景是，webview单页面，url不会变化。

两个标识，页面自己的路由标识，当前路由状态。

进入到某页面，当前路由状态更新为某页面标识。

有一张路由表，监听回退事件。

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

 

路由标识名字建议，grandfather-father-son这种命名方式。

 

二.过场动画 

因为，通过translate的页面覆盖，是以DOM结构顺序为标准（而不是以z-index），后面的DOM覆盖前面的DOM。

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

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

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

 

三.一些小技巧(20141024)

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

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

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

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