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

Raw Blame History Permalink



mobilebone.js


mobile移动web APP单页切换骨架


为何需要？

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


如何使用？

 <link rel="stylesheet" href="mobilebone.css">
 <script src="mobilebone.js"></script>
    <body>
    <div id="pageHome" class="page out">
        <div class="content"></div>
    </div>
    <div id="page1" class="page out">
        <div class="content"></div>
    </div>
    <div id="page2" class="page out">
        <div class="content"></div>
    </div>
    <div id="page3" class="page out">
         <div class="content"></div>
    </div>
    </body>


单页switch切换主体不能是body元素（只有唯一一个），所以只能降级到下级标签，这里的class为page的几个DIV就担当了body的角色。
一般而言，要在page元素内部再嵌套一个content元素，主要为了实现滚动。
然后，什么也不用做，页面就能进入无刷新切换模式！


优势？

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含更多过场效果。
源码如下：

 pageInto.style.display = "block";
 pageInto.classList.remove("out");
 pageInto.classList.add("in");
 pageInto.classList[back? "add": "remove"]("reverse");


基本切换

所谓基本切换，指的是无请求，无延迟的即时切换(页面已经都存在，只是控制一下显示、隐藏和位置)
在DOM层面，只有一种情况会触发基本切换，href值为锚链的a元素。例如：

 <a href="#pageId">


当我tap/click这个a元素的时候，Mobilebone会自动寻找id为pageId的页面，如果此页面存在，则发生切换动画；如果没有该页面元素，没有任何反应，死链。

相反的过场方向
动画的方向不可能都是从右往左的，例如，返回，通过添加data-rel="back"就可以了，例如：

 <a href="#pageHome" data-rel="back">返回</a>


有时候，我们无法确定动画的方向。使用"auto"即可，如下：

 <a href="#pageHome" data-rel="auto">前进还是后退？</a>


Mobilebone会自动判别页面在舞台上的位置，智能识别运动方向。浏览器的历史记录前进与后退也是采用的"auto"判别机制。


Ajax切换

页面太多时不能直接全部一次性加载进来，这时就需要Ajax切换了。
Ajax加载并切换的实现很简单，你不需要做任何操作，就跟传统的web页面一样就好，使用href指向要加载的页面地址，例如：

 <a href="ajax.html">


当tap/click这个a元素的时候，Mobilebone会以Ajax的形式请求ajax.html这个页面，返回的数据会封装成page页面，并以指定的过场动画载入

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

 <a href="ajax.html" data-timeout="30000">
 <a href="ajax.html" data-timeout="30000" data-params="datatype=json&timeout=20000&success=fun_success">


出现冲突时，data-*优先级大于data-params。

form表单也是如此。
如果datatype为"json"，Mobilebone会拿Mobilebone.jsonHandle(response)的返回值作为新页面载入。
例如：

 Mobilebone.jsonHandle = function(json) {
    var page = document.createElement("div");
    page.className = "page out";
    page.setAttribute("data-title", json.title);
    page.innerHTML = json.html;
    return page;
};


如果是默认字符串类型，则直接载入response(有处理，获取title, page元素等).

Ajax回调
跟jQuery的Ajax请求一样，分别是success, error, 与complete
例如：

 <a href="ajax.html" data-success="xxx_ajax_success">


可以选择是否使用Ajax切换

Mobilebone默认会对同域的地址做Ajax请求无刷新切换。但是，万一人家就是希望要传统跳转呢？
可以使用data-ajax属性解决：

 <a href="ajax.html" data-ajax="false">


Mobilebone自带域名判断技能，如果跨域，默认会认为是刷新链接。如果人家依然希望跨域情况下使用Ajax切换（如跨子域而已），如a.qq.com下的页面请求b.qq.com。

 <a href="ajax.html" data-ajax="true">


路由管理机制

使用HTML5 history API(PushState和replaceState). 使用url hash记录, 格式同样借鉴J&M, #&, 后面跟随每个页面对应的标志量（页面id或ajax地址）。
每当页面刷新、前进或后退(popstate), Mobilebone会根据hash对应标志量直接显示或重新请求对应页面。


页面缓存机制

存在的page默认都缓存；ajax请求过的页面默认缓存，data-reload="true"时候请求页面不会缓存。
使用场景：有些页面的数据需要实时更新，不能被缓存。

 <a href="ajax.html" data-reload>


页面事件管理

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


模块化加载

mobilebone.js可以符合AMD, CMD规范的加载器加载。例如seajs, 或requirejs

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


其他细节

有title管理机制，方向管理机制data-rel="abck/auto"，
旋转等待菊花可定制（整页或某元素内），


附录

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