mobilebone.js

mobile移动web APP单页切换骨架

为何需要?

  1. Phonegap等类似跨移动开发平台,其静态页面都是index.html, 单页面,因此,需要跟原生一样的过场体验。
  2. Hybird app开发,原生APP内嵌web APP, 为了两者体验一致,不至于交互太唐突,也需要无刷新过场效果。
  3. 就算是纯粹的移动web APP, 使用无刷新模式也不失为一种不错的选型策略。

如何使用?

<link rel="stylesheet" href="mobilebone.css">
<script src="mobilebone.js"></script>
body
  page
  page
  page

优势?

mobilebone.js只做了一件事情,切换。所以,JS文件很小,gzip后3~4K, 而且很灵活,几乎没有任何UI的限制,适用于各个项目各个场景。

mobilebone.js深入

基本触发机制

与jQuery Mobile类似的机制,引入mobilebone.js, 即对页面所有a标签做了委托。根据href值做智能判断直接过场,Ajax请求过场,还是无作为(javascript:*或外链)。data-ajax="false"会还原链接为传统跳转。

默认是click绑定,但如果你引用类似Zepto的touch模块,则mobilebone走touch事件。

Mobilebone.captureLink = false全局设置,会让页面所有链接普通化,除非有data-ajax=true.

对页面所有formsubmit也做了委托,默认所有的表单都是ajax提交,并根据返回内容实现过场效果。规则与a元素ajax提交类似。

mobilebone.js深入

过场原理

与jQuery Mobile一样的机制,in/out/reverse类名切换触发:

"page slide in" / "page slide out" → "page slide out" / "page slide in"

其中slide是动画的类型,默认值。你可以自定义,或者使用animate.css(jQuery Mobile中CSS分离), 含更多过场效果。

路由管理机制

使用HTML5 history API. 使用url hash记录, 格式同样借鉴J&M, #&, 后面跟随每个页面对应的标志量(页面id或ajax地址)。

每当页面刷新、前进或后退(popstate), Mobilebone会根据hash对应标志量直接显示或重新请求对应页面。

mobilebone.js深入

页面缓存机制

默认即存在的page默认都缓存;ajax请求页面默认缓存,data-reload="true"时候请求页面不会缓存。

页面事件管理

可全局或单独页面设置各类回调事件,目前有:callback, fallback, onpagefirstinto, animationstart, animationend, preventdefault.

全局定义如:Mobilebone.callback = function() {};

局部定义data-callback="function_key". 可以使用data-root指定暴露的全局对象,例如:data-root="$"

Mobilebone.mergeCallback可以控制全局和局部回调是覆盖还是合并(默认)。

mobilebone.js深入

Ajax参数以及事件管理

与jQuery, Zepto $.ajax()一致,例如data-success, data-error, data-timeout等,也可以使用data-params以查询字符串形式设置多个参数。

form表单也是如此。

如果datatype"json",Mobilebone会拿Mobilebone.jsonHandle(response)的返回值作为新页面载入。如果是默认字符串类型,则直接载入response(有处理,获取title, page元素等).

其他细节

title管理机制,方向管理机制data-rel="abck/auto",菊花可定制(整页或某元素内),或者模块化加载等。

var Mobilebone = require('mobilebone');
Mobilebone.init();

Q&A

by zhangxinxu 2014-10