JavaScript不刷新实现浏览器的前进后退功能(2)

var prevHash = window.location.hash;
var callback = function(){...}
window.setInterval(function() {
    if (window.location.hash != prevHash) {
        prevHash = window.location.hash;
        callback(prevHash);
    }
}, 100);

当然这样写非常非常挫，如果不考虑点击页面带有id的a标签来改变hash的情况，可以利用设计模式来优雅的实现监听url。比如经典的观察者模式，专门用一个类来实现改变hash的功能，然后所有要监听url变化的类(观察者)去订阅这个(被观察者)类。

复制代码 代码如下:

//改变url的类
function UrlChanger() {
    var _this = this;
    this.observers = [];
    //添加观察者
    this.addObserver = function(obj) {...}
    //删除观察者
    this.deleteObserver = function(obj) {...}
    //通知观察者
    this._notifyObservers = function() {
        var length = _this.observers.length;
        console.log(length)
        for(var i = 0; i < length; i++) {
            _this.observers[i].update();
        }
    }
    //改变url
    this.changeUrl = function(hash) {
        window.location.hash = hash;
    _this._notifyObservers();
    }
}
//监听类
function oneOfObservers() {
    var _this = this;
    this.update = function() {...}
}
//实现
var o1 = new UrlChanger();
var o2 = new oneOfObservers();
o1.addObserver(o2);
o1.changeUrl('fun/arg1/arg2/');
//o2 has do sth...

您可能感兴趣的文章: