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

相关推荐
工业甲酰苯胺3 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课6 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js