识别浏览器的前进与后退
在部分场景下,开发者可能需要得知视图的进入方式,捕获浏览器的前进和后退动作,以此补充、完善业务逻辑。虽然浏览器并没有对应的事件可以监听,但 View.js 可以通过追踪浏览信息,并对其进行先后顺序比较,间 接将其反向推演出来。
每次发生视图跳转时,View.js 都会记录如下关键信息并将其反映在
history.state
上:- 1.浏览流水
- 2.浏览的视图的ID及命名空间
- 3.携带的视图选项
例如:

浏览元数据
其中,
viewId
和 viewNamespace
标记了浏览的视图,sn
浏览流水则标记了浏览发生的时间(时间戳的36进制 + 2位序列号),options
则记录了关联的视图选项。当视图发生跳转切换时,View.js 便使用上述浏览信息不断更新历史堆栈,如下图所示:

浏览堆栈
当用户通过浏览器执行前 进或后退浏览操作时,浏览器便会触发
history
的 popstate
事件,并将先前追踪并压入的浏览状态通过事件实例反馈给 View.js。接着,View.js 将通过事件得到的浏览状态与当前状态进行比较,推演出视图的切换方式:
view.js源码
var stateChangeListener = function(e){
//...
var type;
if(ViewState.isConstructorOf(e.state)){
var popedNewState = e.state;
//...
/**
* View.SWITCHTYPE_HISTORYBACK 代表后退
* View.SWITCHTYPE_HISTORYFORWARD 代表前进
*/
if(View.currentState != null)
type = popedNewState.sn < View.currentState.sn? View.SWITCHTYPE_HISTORYBACK: View.SWITCHTYPE_HISTORYFORWARD;
}
//...
};
window.addEventListener(historyPushPopSupported? "popstate": "hashchange", stateChangeListener);
对于 View.js 推演出来的跳转方式,开发者可以通过添加事件监听的方式获得。支持的事件包括::
- 1.视图实例的
leave
事件 - 2.视图实例的
ready
事件 - 3.视图实例的
beforeenter
事件 - 4.视图实例的
enter
事件 - 5.视图实例的
afterenter
事件 - 6.
View
的beforechange
事件 - 7.
View
的change
事件 - 8.
View
的afterchange
事件
例如:
init.js
/**
* on 方法用于添加事件监听器
* 'change' 事件代表活动视图发生了变更
*/
View.on("change", function(e){
var switchType = e.data.type;
switch(){
/* “压入堆栈” 式跳转 */
case View.SWITCHTYPE_VIEWNAV:
doSth1();
break;
/* “替换栈顶” 式跳转 */
case View.SWITCHTYPE_VIEWCHANGE:
doSth2();
break;
/* 浏览器后退 */
case View.SWITCHTYPE_HISTORYBACK:
doSth3();
break;
/* 浏览器前进 */
case View.SWITCHTYPE_HISTORYFORWARD:
doSth4();
break;
}
});
对于上文中描述的多个事件的发生顺序及业务含义,我们将在后面的篇章中详细介绍。
Last modified 3yr ago