增强pushState与replaceState

这段代码什么意思? (摘自一篇single-spa文章)

js 复制代码
window.history.pushState = patchedUpdateState(window.history.pushState)
window.history.replaceState = patchedUpdateState(window.history.replaceState)

function patchedUpdateState(updateState) {
    return function (...args) {
        const urlBefore = window.location.href;
        const result = Reflect.apply(updateState, this, args)
        const urlAfter = window.location.href
        if (urlBefore !== urlAfter) {
            doSomething()
        }
        return result
    }
}

整体来看,就是将window.history里的pushState或者replaceState方法作为参数updateState传入定义的patchedUpdateState方法,当调用patchedUpdateState方法时,返回了一个匿名函数,保存在了对应的位置。

拆开来看:

1.pushState与replaceState,

以pushState为例,先看下它的函数签名pushState(state, unused, url)

参数state,该参数将会被存储在history的state属性上,要求是个16M大小以内的object即可。 参数unused,默认传空字符串即可。

参数url,该url要求与当前url同源,调用pushState后浏览器并不会加载此url,但是url地址栏会改变。

它俩最大的区别是,pushState 会在浏览器历史记录中创建一个新的一条,而 replaceState 只会替换当前状态,这样做的副作用是,使用 replaceState 方法将更改地址栏中的 URL,而不会创建新的历史记录条目。

说人话:就是如果你调用了N次pushState,当你点击浏览器返回按钮至最初的页面时,你同样需要点击N次,而replaceState只需要点击1次。

2.上面清楚了,ok,我想你应该又遇到了Reflect.apply,这是反射提供的静态方法,可以直接调用,和Function.prototype.apply()的使用略有不同,但是作用相同,意思是调用updateState方法,修改this指向(留个小疑问,这里的this指向是谁,知道的小伙伴可以敲在评论区),传入args参数。

至此,我想聪明的你已经清楚,通过反射的apply调用pushState或者replaceState方法,比较前后url,如果不同则去处理一些事情。最终将pushState或者replaceState方法的返回值return出去。

总结

虽然代码量并不多,但是完全弄清楚这段代码什么意思,你要了解内部一些API的作用是什么,参数是什么,返回是什么,使用场景是什么,甚至对比es6之前的方法有什么不同,延伸再延伸,这里只是抛砖引玉,你get了吗。

相关推荐
naice1 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6961 小时前
CSS-响应式布局
前端
三小河1 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法1 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku1 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀6961 小时前
2025-35st-w-日常开发总结
前端
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js