2019/4/1
通過記錄url的變化來記錄ajax的變化（ajax的標(biāo)簽化），從而實現(xiàn)前端路由。
前端路由存在缺陷：使用瀏覽器的前進坯癣，后退鍵時會重新發(fā)送請求，來獲取數(shù)據(jù)乖菱，沒有合理地利用緩存坡锡。
- 前端路由實現(xiàn)
1.1
基于location.hash實現(xiàn)
location.hash的值就是URL中#后面的內(nèi)容
如：
https://www.baidu.com#user
location.hash = user;
1.2 hash的特性
- URL中hash值只是客戶端的一種狀態(tài)，也就是說當(dāng)向服務(wù)器端發(fā)出請求時窒所，hash部分不會被發(fā)送鹉勒。
- hash值的改變，都會在瀏覽器的訪問歷史中增加一個記錄吵取。因此我們能通過瀏覽器的回退禽额、前進按鈕控制hash的切換。
- 使用hashchange事件來監(jiān)聽hash的變化。
1.3 觸發(fā)hash值改變的方法
1.3.1 使用a標(biāo)簽
<a href="#user"></a>
1.3.2使用loaction.hash進行賦值
loaction.hash = "#user"
- 使用hashchange事件來監(jiān)聽hash的變化。
２.1 基于History API
history.pushState()和history.repalceState()
都會操作瀏覽器的歷史記錄脯倒，而不會引起頁面的刷新实辑，不同在于pushState會增加一條新的歷史記錄，而replaceState則會替換當(dāng)前的歷史記錄藻丢。
２.2參數(shù)問題
- 狀態(tài)對象（state object） — 一個JavaScript對象剪撬，與用pushState()方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)。無論何時用戶導(dǎo)航到新創(chuàng)建的狀態(tài)悠反，popstate事件都會被觸發(fā)残黑，并且事件對象的state屬性都包含歷史記錄條目的狀態(tài)對象的拷貝。
- 標(biāo)題（title） — FireFox瀏覽器目前會忽略該參數(shù)斋否，考慮到未來可能會對該方法進行修改梨水，傳一個空字符串會比較安全∫鸪簦或者疫诽，你也可以傳入一個簡短的標(biāo)題，標(biāo)明將要進入的狀態(tài)旦委。
- 地址（URL） — 新的歷史記錄條目的地址奇徒。瀏覽器不會在調(diào)用pushState()方法后加載該地址，但之后缨硝，可能會試圖加載逼龟，例如用戶重啟瀏覽器。新的URL不一定是絕對路徑追葡；如果是相對路徑，它將以當(dāng)前URL為基準(zhǔn)奕短；傳入的URL與當(dāng)前URL應(yīng)該是同源的宜肉，否則，pushState()會拋出異常翎碑。該參數(shù)是可選的谬返；不指定的話則為文檔當(dāng)前URL。
ps:暫時性理解日杈，后續(xù)深入理解后再更新．預(yù)計三天內(nèi)
- 地址（URL） — 新的歷史記錄條目的地址奇徒。瀏覽器不會在調(diào)用pushState()方法后加載該地址，但之后缨硝，可能會試圖加載逼龟，例如用戶重啟瀏覽器。新的URL不一定是絕對路徑追葡；如果是相對路徑，它將以當(dāng)前URL為基準(zhǔn)奕短；傳入的URL與當(dāng)前URL應(yīng)該是同源的宜肉，否則，pushState()會拋出異常翎碑。該參數(shù)是可選的谬返；不指定的話則為文檔當(dāng)前URL。
