详解JavaScript实现监听路由变化

目录

• history
• pushState()方法
• pushState()使用场景
• replaceState() 方法
• popstate事件
• pushState和replaceState如何监听呢？
• 获取当前状态
• 对比
• 总结

前端实现路由变化主要有两种方式，这两种方式最大特点就是实现URL切换无刷新功能

1. 通过hash改变，利用window.onhashchange 监听。
2. 通过history的改变，进行js操作加载页面，然而history并不像hash那样简单，因为history的改变，除了浏览器的几个前进后退（使用 history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转。）等操作会主动触发popstate 事件，pushState，replaceState 并不会触发popstate事件。

history

主要来了解一下History

pushState()方法

需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容：

状态对象(state object) — 状态对象state是一个JavaScript对象，通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态，popstate事件就会被触发，且该事件的state属性包含该历史记录条目状态对象的副本。 状态对象可以是能被序列化的任何东西。原因在于Firefox将状态对象保存在用户的磁盘上，以便在用户重启浏览器时使用，我们规定了状态对象在序列化表示后有640k的大小限制。如果你给 pushState() 方法传了一个序列化后大于640k的状态对象，该方法会抛出异常。如果你需要更大的空间，建议使用 sessionStorage 以及 localStorage.

标题(title) — Firefox 目前忽略这个参数，但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者，你可以为跳转的state传递一个短标题。

URL — 该参数定义了新的历史URL记录。注意，调用pushState() 后浏览器并不会立即加载这个URL，但可能会在稍后某些情况下加载这个URL（不会加载该资源，但我们可以通过监听它的改变，来改变视图，这就成为单页面的路由实现的一个方式，实现页面无刷新），比如在用户重新打开浏览器时。新URL不必须为绝对路径。如果新URL是相对路径，那么它将被作为相对于当前URL处理。新URL必须与当前URL同源(同源策略），否则 pushState()会抛出一个异常。该参数是可选的，缺省为当前URL。

在某种意义上，调用 pushState() 与 设置 window.location = “#foo” 类似，二者都会在当前页面创建并激活新的历史记录。但 pushState()具有如下几条优点：

新的 URL可以是与当前URL同源的任意URL 。相反，只有在修改哈希时，设置 window.location 才能是同一个 document。
如果你不想改URL，就不用改。相反，设置 window.location = “#foo”;在当前哈希不是 #foo 时， 才能创建新的历史记录项。
你可以将任意数据和新的历史记录项相关联。而基于哈希的方式，要把所有相关数据编码为短字符串。
如果 标题 随后还会被浏览器所用到，那么这个数据是可以被使用的（哈希则不是）。

注意pushState() 绝对不会触发 hashchange 事件，即使新的URL与旧的URL仅哈希不同也是不会触发。

pushState()使用场景

history可实现无刷新修改URL或URL参数

window.history.replaceState('', '', `${window.location.origin}${window.location.pathname}type=a`);

replaceState() 方法

history.replaceState() 的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。
使

popstate事件

使用 window.onpopstate来监听返回事件

window.onpopstate = funcRef;

funcRef : (Event:{state:any})=>void

每当处于激活状态的历史记录发生改变时，popstate事件就会被触发，在对应的window的对象上触发（window.onpopstate)。如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

**注意：

1. 调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)，此外，a 标签的锚点也会触发该事件.
2. 当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.

pushState和replaceState如何监听呢？

我们可以自己通过订阅-发布模式进行实现：首先使用Dep和Watch，订阅和发布模式，其实是参考vue源码 dep和wantcher之间实现方式的简易版

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方法，并添加addHistoryListener方法

const addHistoryMethod= (function(){
 var historyDep = new Dep()// 创建订阅池
 return function (name){
  if(name==='historyChange'){
   var event = new Watch(name,fn);
   Dep.watch = evnet;
   historyDep.defind();//增加订阅者
   Dep.watch = null;
  }else if(name==='pushState'||name==='replaceState'){
   var method = history[name];
   return function(){
    method.apply(history,argumnets)
    historyDep.notify();
   }
  }
 }
})()
window.addHistoryListener = addHistoryMethod('historyChange')
history.pushState =  addHistoryMethod('pushState');
history.replaceState =  addHistoryMethod('replaceState');

封装成功，测试使用例子

window.addHistoryListener('history',function(){
 console.log('窗口history改变了')
})
window.addHistoryListerer('history',function(){
 console.log('窗口history改变，我也听到了')// 可绑定多个监听事件
 console.log(history.state)
})
history.pushState({foo：bar}, 'title', '/car')

获取当前状态

页面加载时，或许会有个非null的状态对象。这是有可能发生的，举个例子，假如页面（通过pushState() 或 replaceState() 方法）设置了状态对象而后用户重启了浏览器。那么当页面重新加载时，页面会接收一个onload事件，但没有popstate 事件。然而，假如你读取了history.state属性，你将会得到如同popstate 被触发时能得到的状态对象。

你可以读取当前历史记录项的状态对象state，而不必等待popstate 事件， 只需要这样使用history.state属性：

let currentState = history.state;

对比

总结

history是实现无刷新路由的一种方式，特别适合我们进行单页面的开发，保证系统稳定的体验性，但是history不监听pushState和replaceState的行为，只是监听go、back、forward行为。但我们可以使用订阅发布模式，使用Dep和Watch，对pushState和replaceState事件进行重新封装，调用后会自动触发notify方法，增加一个addHistoryListener的方法，用来增加监听回调（订阅者）。

到此这篇关于详解JavaScript实现监听路由变化的文章就介绍到这了,更多相关JavaScript监听路由变化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！