龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

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

时间:2014-11-09 12:02来源:网络整理 作者:网络 点击:
分享到:
复制代码 代码如下: var prevHash = window.location.hash; var callback = function(){...} window.setInterval(function() { if (window.location.hash != prevHash) { prevHash = window.location.hash;

复制代码 代码如下:

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...

精彩图集

赞助商链接