路由

Mobilebone 是基于 HTML5 history API 实现的路由控制。

原理

Mobilebone 的路由遵循和浏览器原生的 URL 历史记录一样的原理,只是传统的 URL 历史记录变化往往伴随着页面的刷新或跳转,而 Mobilebone 框架下的 URL 历史变化页面是无刷新的。

例如,页面中有一个链接元素:

<a href="router.html" class="nav-a" data-mask>路由</a>

在原生状态下,点击上面的链接,页面会跳转到 router.html 这个页面,同时 URL 会增加 router.html 的历史记录;而在 Mobilebone 框架下,点击上面的链接,页面也会跳转到 router.html 这个页面,但是跳转过程是无刷新的,同时 URL 也会增加一条标示 router.html 的历史记录。

其底层实现原理如下:

  1. 阻止 <a> 元素的默认行为(不会跳转);
  2. 请求 <a> 元素 href 属性指向的页面的内容并显示;
  3. 增加一条历史记录,通过执行下面的代码:
    history.pushState(null, document.title, '#&router.html');

由于采用浏览器一致的 URL 历史记录,因此,用户点击浏览器原生的后退按钮,或者执行 history.go(-1),会自动回到上一个页面的 URL 地址,此时 Mobilebone 可以检测到这种变化(会触发 popstate 事件),然后显示对应的页面内容。

Mobilebone 中的路由跳转基本上就围绕上面两种场景展开,新场景新增历史记录,回到过去则回到之前的历史记录。

语法

Mobilebone 采用 hash 识别路由信息。其语法格式为:

#&[<custom-ident> | <url>]

例如,当前页面的 URL 地址为:

/docs/guide/#&router.html

其中,#&router.html 就是 Mobilebone 路由信息,表示当前页面显示的是 router.html 页面的内容,当用户刷新页面的时候,Mobilebone 会基于 #&router.html 重新请求 router.html 页面的内容。

路由信息还可以是 div.page 元素上的 id 属性值,例如:

<a href="#nextPage">下一个页面</a>

如果页面中有 idnextPage 的元素,则点击上面链接,URL 地址的 hash 信息就会变成 #&nextPage

其他:#&后面的 & 符号的作用是防止 URL 锚定,因为类似包含 #nextPage 的 URL 地址会触发 idnextPage 的元素的滚动定位(如果 display 不是 none ),会影响过场效果的执行。

设置

以上就是 Mobilebone 框架中所有的路由设置的方法。

方向

Mobilebone 中的过场是有方向性的,默认是左右过场,右进左退。

当从 A 页面过渡到 B 页面的时候,B页面是从右侧进入,还是从左侧回退,Mobilebone 有一套自己的计算规则。

  1. 各个过场DOM元素在文档流中的前后位置,B 页面在 A 页面的前面,则过场方法是反方向;
  2. 来源页面是否和当前目标页面一致,如果一致,Mobilebone 会执行 history.back() 进行返回;
  3. 临时记录中是否有目标页面元素,如果存在,则过场方法是反方向;

以上这套规则能够保证大多数场景下,页面间的过场方向是自然的,是符合预期的,用户是无需关心细节的。

但是实际应用场景千变万化,以上这套规则并不是万能的,例如,Mobilebone 自己内部的历史记录是临时的,页面刷新之后(此操作通常不会发生,但无法避免),记录就会丢弃,此时方向的判断可能就和用户的预期发生冲突。

所以,如果点击某个链接或者按钮一定是反方向的,则建议使用 data-rel="back" 进行明确的方向设置。例如:

<a href="#pageBack" data-rel="back">返回到pageBack页面</a>

或者是纯粹的返回上一条历史记录:

<a href="javascript:" data-rel="back">返回到上一页</a>

另外,Mobilebone 还支持设置强制过场方向是正方向,语法是 data-rel="go"


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