# 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`.

对页面所有`form`的`submit`也做了委托，默认所有的表单都是`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