增强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了吗。

相关推荐
童先生2 小时前
Nginx + Vue/React 前端 + API:防止路径混淆漏洞与跨域问题实战分享
前端·vue.js·nginx
黑夜照亮前行的路3 小时前
JavaScript 性能优化实战技术指南
javascript·性能优化
Stringzhua4 小时前
Vue数据的变更操作与表单数据的收集【6】
前端·javascript·vue.js
万少4 小时前
可可图片编辑 HarmonyOS 上架应用分享
前端·harmonyos
你的人类朋友5 小时前
git常见操作整理(持续更新)
前端·git·后端
无羡仙5 小时前
Webpack 核心实战:从零搭建支持热更新与 Babel 转译的现代前端环境
前端·webpack·前端框架
乐~~~5 小时前
el-date-picker type=daterange 日期范围限制
javascript·vue.js·elementui
你的人类朋友5 小时前
git中的Fast-Forward是什么?
前端·git·后端
初遇你时动了情5 小时前
uniapp vue3 ts自定义底部 tabbar菜单
前端·javascript·uni-app
JarvanMo6 小时前
天塌了?Flutter工程总监跑去苹果了?
前端