utils，原生js做history監聽

function
getqueryvariable
(variable)
//如果key相等，拿整個
}return
(false);
}

①通過hash改變，利用window.onhashchange 監聽。

②通過history的改變，進行js操作載入頁面，然而history並不像hash那樣簡單，因為history的改變，除了瀏覽器的幾個前進後退（使用 history.back(), history.forward()和 history.go() 方法來完成在使用者歷史記錄中向後和向前的跳轉。）等操作會主動觸發popstate 事件，pushstate，replacestate 並不會觸發popstate事件，本篇文章主要解決history監聽的問題，下面來看下具體實現

我們首先完成乙個訂閱-發布模式，然後重寫history.pushstate, history.replacestate,並新增訊息通知，這樣一來只要history的無法實現監聽函式就被我們加上了事件通知，只不過這裡用的不是瀏覽器原生事件，而是通過我們建立的event-bus 來實現通知，然後觸發事件訂閱函式的執行。廢話不多說，下面我們來做具體操作。

class
depdefined()
notify()
catch
(err)}}
)}}dep.watch =
null
;class
watch
add(dep)
update()
}

下面我們只需要對history的方法進行重寫，並新增event-bus即可，**如下：

var addhistorymethod =
(function()
}else
if(name ===
'pushstate'
|| name ===
'replacestate')}
}}()
) window.addhistorylistener =
addhistorymethod
('historychange');
history.pushstate =
addhistorymethod
('pushstate');
history.replacestate =
addhistorymethod
('replacestate'
);

上面我們給window新增了乙個addhistorylistener事件監聽，類似於 addeventlistener的方法，然後我們有做了history的pushstate， replacestate的改寫，接下來我們測試一下。

window.
addhistorylistener
('history'
,function()
)window.
addhistorylistener
('history'
,function()
)history.
pushstate(,
"page2"
,"/first"
)

觀察上面結果列印；我們發現window的 history改變，我們成功的新增了事件監聽！當然這裡還是有缺陷的，就是少了事件的移除，有興趣的同學可以把接下來的移除也書寫一下，熟悉熟悉。

utils，原生js做history監聽

原生js做列印功能的簡單實現

關於js 原生原生鏈

原生JS時鐘

utils，原生js做history監聽

原生js做列印功能的簡單實現

關於js 原生原生鏈

原生JS時鐘

相關推薦