识别浏览器的前进与后退

概述

在部分场景下,开发者可能需要得知视图的进入方式,捕获浏览器的前进和后退动作,以此补充、完善业务逻辑。虽然浏览器并没有对应的事件可以监听,但 View.js 可以通过追踪浏览信息,并对其进行先后顺序比较,间接将其反向推演出来。

浏览追踪

每次发生视图跳转时,View.js 都会记录如下关键信息并将其反映在 history.state 上:
  1. 1.
    浏览流水
  2. 2.
    浏览的视图的ID及命名空间
  3. 3.
    携带的视图选项
例如:
浏览元数据
其中,viewIdviewNamespace 标记了浏览的视图,sn 浏览流水则标记了浏览发生的时间(时间戳的36进制 + 2位序列号),options 则记录了关联的视图选项。
当视图发生跳转切换时,View.js 便使用上述浏览信息不断更新历史堆栈,如下图所示:
浏览堆栈

顺序比较

当用户通过浏览器执行前进或后退浏览操作时,浏览器便会触发 historypopstate 事件,并将先前追踪并压入的浏览状态通过事件实例反馈给 View.js。
接着,View.js 将通过事件得到的浏览状态与当前状态进行比较,推演出视图的切换方式:
view.js源码
1
var stateChangeListener = function(e){
2
//...
3
var type;
4
if(ViewState.isConstructorOf(e.state)){
5
var popedNewState = e.state;
6
//...
7
8
/**
9
* View.SWITCHTYPE_HISTORYBACK 代表后退
10
* View.SWITCHTYPE_HISTORYFORWARD 代表前进
11
*/
12
if(View.currentState != null)
13
type = popedNewState.sn < View.currentState.sn? View.SWITCHTYPE_HISTORYBACK: View.SWITCHTYPE_HISTORYFORWARD;
14
15
}
16
//...
17
};
18
19
window.addEventListener(historyPushPopSupported? "popstate": "hashchange", stateChangeListener);
Copied!

动作捕获

对于 View.js 推演出来的跳转方式,开发者可以通过添加事件监听的方式获得。支持的事件包括::
  1. 1.
    视图实例的 leave 事件
  2. 2.
    视图实例的 ready 事件
  3. 3.
    视图实例的 beforeenter 事件
  4. 4.
    视图实例的 enter 事件
  5. 5.
    视图实例的 afterenter 事件
  6. 6.
    Viewbeforechange 事件
  7. 7.
    Viewchange 事件
  8. 8.
    Viewafterchange 事件
例如:
init.js
1
2
/**
3
* on 方法用于添加事件监听器
4
* 'change' 事件代表活动视图发生了变更
5
*/
6
View.on("change", function(e){
7
var switchType = e.data.type;
8
9
switch(){
10
/* “压入堆栈” 式跳转 */
11
case View.SWITCHTYPE_VIEWNAV:
12
doSth1();
13
break;
14
15
/* “替换栈顶” 式跳转 */
16
case View.SWITCHTYPE_VIEWCHANGE:
17
doSth2();
18
break;
19
20
/* 浏览器后退 */
21
case View.SWITCHTYPE_HISTORYBACK:
22
doSth3();
23
break;
24
25
/* 浏览器前进 */
26
case View.SWITCHTYPE_HISTORYFORWARD:
27
doSth4();
28
break;
29
}
30
});
Copied!
对于上文中描述的多个事件的发生顺序及业务含义,我们将在后面的篇章中详细介绍。
Last modified 2yr ago