标签:生成 tran 变化 stat war hash 跳转 对象 ops
history是一个独立的第三方js库,可以用来兼容不同的浏览器、不同环境下对历史记录的管理。具体可以分为以下几类:
三种实现方法,都是创建了一个history对象,这里主要讲下前2个:
const history = {
length: globalHistory.length,
action: "props",
location: initalLocation,
createHref,
push, // 改变location
replace,
go,
goBack,
goForward,
block,
listen //监听路由变化
}
BrowserHistory: pushState replactState
HashHistroy: location.hash location.replace
function push() {
createKey(); // 创建location的key,用于唯一标识该location,是随机生成的
if (BrowserHistory) {
globalHistory.pushState({ key, state }, null, href);
} else if (HashHistory) {
window.location.hash = path;
}
// 上报listener,更新state
}
function replace() {
createKey();
if (BrowserHistory) {
globalHistory.replaceState( { key, state }, null, href);
} else if (HashHistory) {
window.location.replace(window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + "#" path);
}
// 上报listener,更新state
}
BrowserHistory: popstate
HashHistory: hashchange
function pop() {
if (BrowserHistory) {
window.addEventListener("popstate", routerChange);
} else if (HashHistory) {
window.addEventListener("hashChange", routerChange);
}
}
function routerChange() {
const location = getDOMLocation(); //获取location
transitionManger.confirmTransitionTo(location, callback = () => { // 路由切换
transitionManager.notifyListeners(); // 上报listener
})
}
未完待更新。。。
标签:生成 tran 变化 stat war hash 跳转 对象 ops
原文地址:https://www.cnblogs.com/fe-linjin/p/10505880.html