Mobilebone.js 使用教程 - 中文版

开始

Mobilebone.js 是什么？

Mobilebone 是一个可以让传统 Web 网页有类似于 Native APP 交互体验的 UI 框架。

例如下面这个视频（点击播放）所示的单页应用，虽然是个 H5 页面，但是体验效果如同原生 APP。

是的，Mobilebone.js 虽然体积很小（min < 18K, Gzip ≈ 6K），但是本质上还是一个框架，正如其名称所示，移动端开发的骨架。

通过对比流行的 Vue.js 可以让大家更好地了解 Mobilebone.js。

Vue 框架的核心是负责视图层的构建，支持多页应用，也支持单页应用，其中单页应用的路由功能需要借助第三方的插件，例如 Vue Router 插件。此时，Vue 框架是核心，Vue Router 属于插件，Vue Router 的使用需要遵循 Vue 框架的规则。

Mobilebone 框架的核心则是路由与转场，可以让多页应用无缝转变为单页应用。Mobilebone 不参与视图层的构建，如果希望当前应用拥有数据驱动的视图渲染能力，需要引用其他插件，例如 Vue.js。此时，Mobilebone 框架是核心，Vue.js 属于插件，Vue.js 的使用需要遵循 Mobilebone 框架的规则。

设计原则

Mobilebone 的作者是一个道家思想主义者，讲求追本溯源、无为而治，无论是生活、做人或者是程序开发，都遵循这样的哲学思想。比方说早些年的 ieBetter.js，或者是不少人熟知的 LuLu UI 等，有则锦上添花，无则江山依旧。

这里的 Mobilebone.js 也是如此，保留传统 web 开发所有特性，不侵入业务代码，也就是如果没有 Mobilebone.js，我们的项目依然是可以运作的，只是形式上是传统的页面跳转。

比方说您现在看到的这个文档页面左侧的任意的导航链接，您使用鼠标右键→新窗口打开，会发现是一个体验和功能完全正常的文档页面（对 SEO 非常友好），但是如果您鼠标单击，会发现整个文档页是个单页（对用户非常友好），这就是 Mobilebone，可以让正常的传统网页在不需要修改任何代码的情况下，聚合成一个单页应用。

请注意，上面这句话虽然是实话，但是夸大了 Mobilebone 的作用。事实是这样的，Mobilebone 有能力让多页面再不动一兵一卒的情况下变成单页，但是，并不是说随便写几个页面都可以合成一个单页应用，需要开发者理解 Mobilebone 作用原理的前提下，调整对应页面的某些细节，才能让当前页面既能直接浏览，也能作为一个模块在显示在单页中。

以及，虽然 Mobilebone 有能力让传统 Web 网页变成单页应用，但是，在 Mobilebone 的推荐指南中，如果您的项目并不是那种偏展示型，对 SEO 要求非常高的项目， 更推荐采用 JSON 数据 + 视图渲染 的这种实现方式，开发策略上类似于 Vue/React 等框架的单页应用，因为用户体验会更好。

起步

Mobilebone.js 的上手成本极低，您只需要了解 HTML 和 CSS 的基础知识就可以创建 Mobilebone 单页应用。

安装

先从最基本的静态效果说起。

如果是静态页面，只需要把每一页的内容放在一个一个的“page”中，在 Mobilebone 中，这个“page”是包含类名 'page' 的 <div>元素，例如（点击“运行按钮”可以查看效果）：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="./dist/mobilebone.css">
	<title>示例</title>
</head>
<body>
<div id="page1" class="page out">
	<p>　页面1，<a href="#page2">下一页</a></p>
</div>
<div id="page2" class="page out">
	<p>　页面2，<a href="#page1">上一页</a></p>
</div>
<script src="./dist/mobilebone.min.js"></script>
</body>
</html>

转场效果的实现很简单，只需要把链接元素的 href 属性值指向对应的 'page' 元素的 id 属性值即可。

例如：

<a href="#page2">下一页</a>

此时，点击“下一页”，页面就会平滑过渡到 id 值为 'page2' 的页面上。

同时，URL地址栏中的Hash值会变成#&page2，这是 Mobilebone 做的路由处理，此时用户刷新页面依旧显示 'page2' 页面。

Mobilebone 框架的所有能力都是以上面最简单的静态应用为核心进行扩展的。

例如，href 值使用正常的URL地址，则会请求该 URL 地址对应的页面并呈现出来。

<a href="/detail?id=112">请求详情页</a>

插件

Mobilebone 支持引入插件帮助我们更高效地开发，或者实现特殊的场景需求。

目前官方提供了以下一些插件内容：

mobilebone.ppt.js

可以让web页面表现如幻灯片演示，尺寸自适应。

此插件目前还欠缺配套的可视化制作工具，日后会完善。

mobilebone.render.js

模板渲染，正在开发中……

mobilebone.storage.js

本地存储能力，正在开发中……

优势

Mobilebone.js 只专注于一件事情，转场。所以JS文件很小，gzip后仅4~5K。

原生HTML构造，侵入少，上手快，本身几乎没有UI的限制，适用于各个项目各个场景。

原生JavaScript无依赖，可以和Vue，jQuery等知名JS项目无缝使用。

好，现在对 Mobilebone 应该有了初步的认识了，接下来了解下 Mobilebone 更多的特性。

发现错误？想参与编辑？在 GitHub 上编辑此页！