mobilebone 移动Web APP单页切换骨架.md 4.1 KB

Raw Blame History Permalink



mobilebone.js


mobile移动web APP单页切换骨架


为何需要？

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


如何使用？


    <body>
    <div id="pageHome" class="page out"></div>
    <div id="page1" class="page out"></div>
    <div id="page2" class="page out"></div>
    <div id="page3" class="page out"></div>
    </body>


优势？

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


兼容性？

应用了部分HTML特性，原生JS，不依赖任何其他JS框架，不支持Android 2.3及其以下版本，不支持IE6-IE9. 如果这些搓浏览器引入mobilebone.js, 不会报错，不影响正常使用。


深入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提交类似。


深入过场原理

与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对应标志量直接显示或重新请求对应页面。


页面缓存机制

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


页面事件管理

可全局或单独页面设置各类回调事件，目前有：callback, fallback, onpagefirstinto, animationstart, animationend, preventdefault.
全局定义如：Mobilebone.callback = function() {};
局部定义data-callback="function_key". 可以使用data-root指定暴露的全局对象，例如：data-root="$"
Mobilebone.mergeCallback可以控制全局和局部回调是覆盖还是合并(默认)。


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();


附录

Git地址：https://github.com/zhangxinxu/mobilebone

博客地址：http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core

测试代码：http://rawgit.com/zhangxinxu/mobilebone/master/test/index.html