const history = {
 length, // 屬性，history中記錄的state的數量
 action, // 屬性，當前導航的action類型
 location, // 屬性，location對象，封裝了pathname、search和hash等屬性
 push, // 方法，導航到新的路由，并記錄在history中
 replace, // 方法，替換掉當前記錄在history中的路由信息
 go, // 方法，前進或后退n個記錄
 goBack, // 方法，后退
 goForward, // 方法，前進
 canGo, // 方法，是否能前進或后退n個記錄
 block, // 方法，跳轉前讓用戶確定是否要跳轉
 listen // 方法，訂閱history變更事件
 };

const history = {
 length, // 屬性，history中記錄的state的數量
 state, // 屬性，pushState和replaceState時傳入的對象
 back, // 方法，后退
 forward, // 方法，前進
 go, // 方法，前進或后退n個記錄
 pushState, // 方法，導航到新的路由，并記錄在history中
 replaceState // 方法，替換掉當前記錄在history中的路由信息
}

// 訂閱history變更事件
window.onpopstate = function (event) {
 ...
}

// 構造hashHistory對象
const createHashHistory = (props = {}) => {
 ...
 const globalHistory = window.history; // 引用HTML5 history對象
 ...
 // transitionManager負責控制是否進行跳轉，以及跳轉后要通知到的訂閱者，后面會詳細討論
 const transitionManager = createTransitionManager();
 ...
 // 注冊history變更回調的訂閱者
 const listen = listener => {
 const unlisten = transitionManager.appendListener(listener);
 checkDOMListeners(1);

 return () => {
 checkDOMListeners(-1);
 unlisten();
 };
 };
 
 // 監聽hashchange事件
 const checkDOMListeners = delta => {
 listenerCount += delta;

 if (listenerCount === 1) {
 window.addEventListener(HashChangeEvent, handleHashChange);
 } else if (listenerCount === 0) {
 window.removeEventListener(HashChangeEvent, handleHashChange);
 }
 };
 
 // hashchange事件回調
 const handleHashChange = () => {
 ...
 // 構造內部使用的location對象，包含pathname、search和hash等屬性
 const location = getDOMLocation(); 
 ...
 handlePop(location);
 };
 
 // 處理hash變更邏輯
 const handlePop = location => {
 ...
 const action = "POP";
 // 給用戶展示確認跳轉的信息（如果有的話），確認后通知訂閱者。如果用戶取消跳轉，則回退到之前狀態
 transitionManager.confirmTransitionTo(location, action, getUserConfirmation, ok => {
 if (ok) {
 setState({action, location}); // 確認后通知訂閱者
 } else {
 revertPop(location); // 取消則回退到之前狀態
 }
 });
 };
 
 // 更新action，location和length屬性，并通知訂閱者
 const setState = nextState => {
 Object.assign(history, nextState);

 history.length = globalHistory.length;

 transitionManager.notifyListeners(history.location, history.action);
 };
 ...
}