[[434828]]

由于公司最近有個(gè)需求是想讓我們的get請(qǐng)求的參數(shù)都直接顯示在瀏覽器url上，這樣我們就可以直接通過(guò)復(fù)制url來(lái)顯示對(duì)應(yīng)的界面數(shù)據(jù)了。

背景介紹

由于我們常用的http請(qǐng)求一般是基于XHR對(duì)象的實(shí)現(xiàn)或者fetch實(shí)現(xiàn)，這種請(qǐng)求操作并不會(huì)觸發(fā)瀏覽器url的變化，這樣雖然也能正常請(qǐng)求數(shù)據(jù)并渲染到頁(yè)面，但是如果用戶在當(dāng)前頁(yè)面操作了某個(gè)get請(qǐng)求并得到了某條數(shù)據(jù)，想通過(guò)鏈接將當(dāng)前看到的界面分享給其他人時(shí)，那么此時(shí)瀏覽器url并不會(huì)變化，通過(guò)鏈接只能訪問(wèn)到初始化的數(shù)據(jù)界面，此時(shí)并不能達(dá)到理想的效果。如下圖所示：

(單純使用ajax或者fetch實(shí)現(xiàn)get請(qǐng)求時(shí))

當(dāng)我們?cè)谠擁?yè)面將列表切換到第二頁(yè)時(shí)，瀏覽器url并沒(méi)有變化，所以將鏈接復(fù)制給其他人打開(kāi)并不會(huì)將列表結(jié)果切換到第二頁(yè)，而是重新初始化。

實(shí)現(xiàn)過(guò)程

通過(guò)以上的背景和問(wèn)題，我們可以想想可以怎么實(shí)現(xiàn)呢?我的第一個(gè)反應(yīng)就是使用location API來(lái)實(shí)現(xiàn)，我們可以使用location.search來(lái)讀寫瀏覽器query參數(shù)：

location.search = '?page=2'; 

這段代碼雖然可以改變?yōu)g覽器url，如下圖所示：

但會(huì)出現(xiàn)一個(gè)性能問(wèn)題，就是當(dāng)我們執(zhí)行了以上代碼后，整個(gè)瀏覽器都會(huì)刷新，導(dǎo)致我們不想刷新的部分也刷新了，那我們有辦法可以讓它局部刷新嗎?答案是必須有。

這里就要引出我們本文的重點(diǎn)：history API。

history API

Window.history是一個(gè)只讀屬性，用來(lái)獲取History 對(duì)象的引用，History 對(duì)象提供了操作瀏覽器會(huì)話歷史(瀏覽器地址欄中訪問(wèn)的頁(yè)面，以及當(dāng)前頁(yè)面中通過(guò)框架加載的頁(yè)面)的接口。HTML5引入了 history.pushState() 和 history.replaceState() 方法，它們分別可以添加和修改歷史記錄條目。

使用 history.pushState() 可以改變r(jià)eferrer，它在用戶發(fā)送 XMLHttpRequest 請(qǐng)求時(shí)在HTTP頭部使用，改變state后創(chuàng)建的 XMLHttpRequest 對(duì)象的referrer都會(huì)被改變。因?yàn)閞eferrer是標(biāo)識(shí)創(chuàng)建 XMLHttpRequest 對(duì)象時(shí) this 所代表的window對(duì)象中document的URL。

那么我們就可以使用pushState來(lái)實(shí)現(xiàn)我們的更新瀏覽器url功能了。

pushState() 方法

pushState() 需要三個(gè)參數(shù): 一個(gè)狀態(tài)對(duì)象, 一個(gè)標(biāo)題 (目前已忽略), 和 (可選的) 一個(gè)URL：

• 狀態(tài)對(duì)象 — 狀態(tài)對(duì)象state是一個(gè)JavaScript對(duì)象，通過(guò)pushState () 創(chuàng)建新的歷史記錄條目。無(wú)論什么時(shí)候用戶導(dǎo)航到新的狀態(tài)，popstate事件就會(huì)被觸發(fā)，且該事件的state屬性包含該歷史記錄條目狀態(tài)對(duì)象的副
• 標(biāo)題 — Firefox 目前忽略這個(gè)參數(shù)，但未來(lái)可能會(huì)用到。在此處傳一個(gè)空字符串應(yīng)該可以安全的防范未來(lái)這個(gè)方法的更改?；蛘?，你可以為跳轉(zhuǎn)的state傳遞一個(gè)短標(biāo)
• URL — 該參數(shù)定義了新的歷史URL記錄。注意，調(diào)用 pushState() 后瀏覽器并不會(huì)立即加載這個(gè)URL，但可能會(huì)在稍后某些情況下加載這個(gè)URL，比如在用戶重新打開(kāi)瀏覽器時(shí)。新URL不必須為絕對(duì)路徑。如果新URL是相對(duì)路徑，那么它將被作為相對(duì)于當(dāng)前URL處理。新URL必須與當(dāng)前URL同源，否則 pushState() 會(huì)拋出一個(gè)異常。該參數(shù)是可選的，缺省為當(dāng)前UR

實(shí)現(xiàn)

/** 
 * 設(shè)置瀏覽器url 
 *  params：queryObj（參數(shù)對(duì)象） 
*/ 
function setBrowserUrl(queryObj){ 
    // stringify是queryString的一個(gè)api，具體可以查看node官網(wǎng)，也可以自己實(shí)現(xiàn) 
    var url = `${location.pathname}?${stringify(queryObj)}` 
    history.pushState({url: url}, '', url) 
} 

這樣我們就可以在請(qǐng)求的同時(shí)，調(diào)用setBrowserUrl方法來(lái)改變?yōu)g覽器url了。接下來(lái)我們就可以監(jiān)聽(tīng)瀏覽器url的變化，如果瀏覽器url有需要的請(qǐng)求參數(shù)，那么我們就根據(jù)請(qǐng)求參數(shù)來(lái)請(qǐng)求數(shù)據(jù)，沒(méi)有就初始化頁(yè)面，這樣當(dāng)我們查看某條記錄或者某個(gè)小秘密時(shí)，想把該數(shù)據(jù)保存下來(lái)并分享給被人，是不是就可以實(shí)現(xiàn)了呢?

總結(jié)

基于H5 history可以實(shí)現(xiàn)很多優(yōu)雅使用的工具，比如路由，緩存控件等等。

本文轉(zhuǎn)載自微信公眾號(hào)「趣談前端」