javascript - js如何取得返回功能的控制权

Question

缓动函数速查表
像这个单页应用，能对浏览器的前进后退作出反应\n
请问如何实现这种效果？\n
有人理解我的意思吗

Answer 1

一般来说单页应用是通过改变hash来控制的，比如你发的这个页面，你每点击一次hash都会改变对不对。
这个时候通过hash来路由，比如hash=='app1',当页面页面就会变成app1的内容。页面再通过监听hash的变化来控制应该变化到那个app。

window.onhashchange = function(){
    var hash = location.hash;
    if(hash == '#app1'){
        //xxx;
    }else if(hash == '#app2'){
        //ooo
    }
    //....
}

监听hash变化的onhashchange有浏览器兼容问题，如下图：

可以用下面代码兼容：

(function() {
    if ('onhashchange' in window) {
        if (window.addEventListener) {
            window.addHashChange = function(func, before) {
                window.addEventListener('hashchange', func, before);
            };
            window.removeHashChange = function(func) {
                window.removeEventListener('hashchange', func);
            };
            return;
        } else if (window.attachEvent) {
            window.addHashChange = function(func) {
                window.attachEvent('onhashchange', func);
            };
            window.removeHashChange = function(func) {
                window.detachEvent('onhashchange', func);
            };
            return;
        }
    }
    var hashChangeFuncs = [];
    var oldHref = location.href;
    window.addHashChange = function(func, before) {
        if (typeof func === 'function')
            hashChangeFuncs[before?'unshift':'push'](func);
    };
    window.removeHashChange = function(func) {
        for (var i=hashChangeFuncs.length-1; i>=0; i--)
            if (hashChangeFuncs[i] === func)
                hashChangeFuncs.splice(i, 1);
    };
    setInterval(function() {
        var newHref = location.href;
        if (oldHref !== newHref) {
            var _oldHref = oldHref;
            oldHref = newHref;
            for (var i=0; i<hashChangeFuncs.length; i++) {
                hashChangeFuncs[i].call(window, {
                    'type': 'hashchange',
                    'newURL': newHref,
                    'oldURL': _oldHref
                });
            }
        }
    }, 100);
})();
// Usage, infinitely many times:
addHashChange(function(e){alert(e.newURL||location.href);});

Answer 2

这不是做反应啊 这就是单页面应用的做法而已
为了防止浏览器不兼容 用#标签来表示跳转的功能（这里我写的不专业，请查阅相关资料）
http://easings.net/zh-cn#easeInExpo
你难道没看到他的url还在变化么
然后在他的外层有个样式
.page-animation .page-slider, .page-animation .easing.linear {

-webkit-transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);

}
这样打开页面时候就有了转场动画效果了

Answer 3

用hash不错

Answer 4

几个单页面框架也是用的hash来控制