JavaScript如何实现history路由变化监听

阳光穿透心脏的1/2处 2022-10-01 07:45 441阅读 0赞

## 前言 ##

大家都知道，通过浏览器的地址栏来改变切换页面，前端实现主要有两种方式：

①通过hash改变，利用window.onhashchange 监听。

②通过history的改变，进行js操作加载页面，然而history并不像hash那样简单，因为history的改变，除了浏览器的几个前进后退（使用 history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转。）等操作会主动触发popstate 事件，pushState，replaceState 并不会触发popstate事件，本篇文章主要解决history监听的问题，下面来看下具体实现

## 思路 ##

我们首先完成一个订阅-发布模式，然后重写history.pushState, history.replaceState,并添加消息通知，这样一来只要history的无法实现监听函数就被我们加上了事件通知，只不过这里用的不是浏览器原生事件，而是通过我们创建的event-bus 来实现通知，然后触发事件订阅函数的执行。 废话不多说，下面我们来做具体操作。

## 订阅-发布模式示例 ##

class Dep {                  // 订阅池
        constructor(name){
            this.id = new Date() //这里简单的运用时间戳做订阅池的ID
            this.subs = []       //该事件下被订阅对象的集合
        }
        defined(){              // 添加订阅者
            Dep.watch.add(this);
        }
        notify() {              //通知订阅者有变化
            this.subs.forEach((e, i) => {
                if(typeof e.update === 'function'){
                    try {
                       e.update.apply(e)  //触发订阅者更新函数
                    } catch(err){
                        console.warr(err)
                    }
                }
            })
        }
        
    }
    Dep.watch = null;
    
    class Watch {
        constructor(name, fn){
            this.name = name;       //订阅消息的名称
            this.id = new Date();   //这里简单的运用时间戳做订阅者的ID
            this.callBack = fn;     //订阅消息发送改变时->订阅者执行的回调函数     
        }
        add(dep) {                  //将订阅者放入dep订阅池
           dep.subs.push(this);
        }
        update() {                  //将订阅者更新方法
            var cb = this.callBack; //赋值为了不改变函数内调用的this
            cb(this.name);          
        }
    }
    复制代码

## 重写history方法，并添加window.addHistoryListener事件机制。 ##

下面我们只需要对history的方法进行重写，并添加event-bus即可，代码如下：

## 测试History事件监听 ##

上面我们给window添加了一个addHistoryListener事件监听，类似于 addEventListener的方法，然后我们有做了history的pushState， replaceState的改写，接下来我们测试一下。

window.addHistoryListener('history',function(){
        console.log('窗口的history改变了');
    })
    window.addHistoryListener('history',function(){
        console.log('窗口的history改变了-我也听到了');
    })
    history.pushState({
        first:'first'}, "page2", "/first")
    复制代码

观察上面结果打印；我们发现window的 history改变，我们成功的添加了事件监听！当然这里还是有缺陷的，就是少了事件的移除，有兴趣的同学可以把接下来的移除也书写一下，熟悉熟悉。

转载于:https://juejin.im/post/5c7e2d966fb9a049bb7d131b