游戏网站如何做,拓元建设网站,房屋建筑图纸设计说明,淄博做网站哪家好history源码 history 在 v5 之前使用单独的包#xff0c; v6 之后再 router 包中单独实现。
history源码
Action 路由切换的动作类型#xff0c;包含三种类型#xff1a;
POPREPLACEPUSH
Action 枚举#xff1a;
export enum Action {Pop POP,Push v6 之后再 router 包中单独实现。
history源码
Action 路由切换的动作类型包含三种类型
POPREPLACEPUSH
Action 枚举
export enum Action {Pop POP,Push PUSH,Replace REPLACE,
}关于三种动作类型意思可以进入Actions了解。
createLocation(current, to , state, key) 创建一个含有唯一值key的location对象。
当前方法是一个公共方法在createBrowserHistory/createHashHistory/createMemoryHistory中都使用其创建location对象。
如果你需要更深层次了解请进入createLocation。
getUrlBasedHistory(getLocation, createHref, validateLocation, options) createBrowserHistory/createHashHistory函数都基于getUrlBasedHistory执行getUrlBasedHistory后会返回一个history对象。
History库 history库文件暴露出createMemoryHistory、createBrowserHistory、createHashHistory三个方法每种方法作用不一样。 createMemoryHistory用于非 dom 环境react-native 和测试环境 createBrowserHistory/createHashHistory用于浏览器环境createBrowserHistory对应于history路由模式而createHashHistory应用于hash模式路由两者方法的底层都是利用了HTML5 history API方法实现即监听popstate事件及replaceState、pushState无刷新更改location URL
createBrowserHistory/createHashHistory函数都基于getUrlBasedHistory 提供不同的
getLocationcreateHrefvalidateLocationoptions
属性实现不同的 history 对象
执行步骤 history对象属性和方法 action 当前location对象变化的动作类型关于三种动作类型意思可以进入Actions了解。 location 返回当前的location对象。 底层getLocation createLocation() 具体内容可访问createLocation。 listen(fn: Listener) 在createBrowserHistory函数此刻以此举例中会有一个listener变量来接收传入的监听回调函数fn。 注意一个history中有且仅有一个活跃的listen监听函数否则会抛出一个异常。 如果你想要继续传入一个监听回调事件你可以先执行history.listen(fn)的返回值作用清除监听事件再传入fn。 监听location变化的函数传入一个回调函数fn并将代表location变化的一个update对象传入回调函数中。 内部逻辑 1 创建一个popstate监听事件回调函数handlePop 2 将listener fn; 3返回一个函数作用执行这个函数可以取消当前的listener; 源码 listen(fn: Listener) {if (listener) {throw new Error(A history only accepts one active listener);}window.addEventListener(PopStateEventType, handlePop);listener fn;return () {window.removeEventListener(PopStateEventType, handlePop);listener null;};
},Listener interface export interface Listener {(update: Update): void;}Update interface export interface Update {action: Action; // 动作类型location: Location; // 新的location对象delta: number | null; // 目的location对象也可以理解为新的location对象与之前的location在history栈中之间的增量}createHref(to) 创建地址 createBrowserHistory 如果to是一个string返回to否则createPath(to)如果想了解createPath请访问createPath。 内部调用: createBrowserHref(window, to) function createBrowserHref(window: Window, to: To) {return typeof to string ? to : createPath(to);
}createHashHistory 如果to是一个string返回to否则createPath(to)如果想了解createPath请访问createPath。 内部调用: createBrowserHref(window, to) function createHashHref(window: Window, to: To) {let base window.document.querySelector(base);let href ;if (base base.getAttribute(href)) {let url window.location.href;let hashIndex url.indexOf(#);href hashIndex -1 ? url : url.slice(0, hashIndex);}return href # (typeof to string ? to : createPath(to));
}go(n) 指定跳转地址调用和HTML5 history api的go方法一样 如果想了解原生的history请访问history。 push 添加一个新的历史记录 function push(to: To, state?: any) {// 1. 更改动作类型actionaction Action.Push;// 2. 创建一个新的location对象let location createLocation(history.location, to, state);if (validateLocation) validateLocation(location, to);// 3. 当前索引idxindex getIndex() 1;// 4. state状态对象{ idx: indexusr: state, key: 唯一的key值 }let historyState getHistoryState(location, index);let url history.createHref(location);// try...catch because iOS limits us to 100 pushState calls :/try {globalHistory.pushState(historyState, , url);} catch (error) {if (error instanceof DOMException error.name DataCloneError) {throw error;}window.location.assign(url);}if (v5Compat listener) {// 执行location变化的监听回调事件listener--调用history.listen中传入的事件listener({ action, location: history.location, delta: 1 });}
}replace 替换当前的历史记录 function replace(to: To, state?: any) {// 1. 更改动作类型actionaction Action.Replace;// 2. 创建location对象let location createLocation(history.location, to, state);if (validateLocation) validateLocation(location, to);// 3. 返回state状态对象中的idx否则返回nullindex getIndex();// 生成一个新对象包含usr、key、idx:let historyState getHistoryState(location, index);// 创建新的URL pathlet url history.createHref(location);// history API中的replaceState替换当前的历史记录globalHistory.replaceState(historyState, , url);if (v5Compat listener) {listener({ action, location: history.location, delta: 0 });}
}更多内容欢迎访问https://www.wangyuegyq.top
