Comment on page
识别浏览器的前进与后退

概述
在部分场景下，开发者可能需要得知视图的进入方式，捕获浏览器的前进和后退动作，以此补充、完善业务逻辑。虽然浏览器并没有对应的事件可以监听，但 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 4yr ago