問題背景
今天面試的時候,被問到這么個問題。在html5的history情況下,pushstate和replacestate是無法觸發pushstate的事件的,那么他是怎么做到正確的監聽呢?我當時給懵住了,對哦,這怎么監聽的到嗎?
於是今晚在旅館,啊,沒電腦啊,只能手機打開google搜索了,好像沒搜到,於是我自己去github扒源碼了。啊,沒帶電腦看代碼好吃力啊,吐槽下┐(‘~`;)┌
源碼解析在此
- 首先,你用router就得用history.push啊replace啊等來操作歷史記錄,依次看下面兩個圖高亮處你就懂了:
首先,第一副圖中,push方法內部會去調用setState方法,而第二幅圖setState方法中又去調用了notifyxxxxx方法,到了第三幅圖,notifyxxx方法內部會遍歷一個listeners數組來調用。再來到第四幅圖,每次history listen方法都會調用那個append方法往第三幅圖中的listeners數組中push一個listerner。
所以,原理其實很簡單啊,就是一個最最最簡單的observer模式啊。哎喲我去-_-||