資訊專欄INFORMATION COLUMN
摘要：路由的概念起源于網(wǎng)絡(luò)工程，例如我們?nèi)粘Ｖ械穆酚善?，所謂前端路由的概念簡單歸納就是前端可以自己根據(jù)不同地址來展示不同的內(nèi)容在出現(xiàn)之前，都是使用后端路由來控制頁面的渲染，服務(wù)器在接收到不同的地址后，服務(wù)器通過解析去拼接不同的，然后返回給前端進(jìn)行
路由的概念起源于網(wǎng)絡(luò)工程，例如我們?nèi)粘Ｖ械穆酚善鳎^前端路由的概念簡單歸納就是前端可以自己根據(jù)不同url地址來展示不同的內(nèi)容
在Ajax出現(xiàn)之前，都是使用后端路由來控制頁面的渲染，服務(wù)器在接收到不同的url地址后，服務(wù)器通過解析url去拼接不同的html，然后返回給前端進(jìn)行渲染，所以這也是后端路由的一個弊端，每一次的切換都是需要刷新整個頁面，同時如果是大量的頁面每一個頁面都需要做一段邏輯處理也造成了后端實(shí)在不堪重負(fù)
前端路由的出現(xiàn)很好的解決了這個問題，前端路由不需要刷新整個頁面，也就不會出現(xiàn)每一次切換都會出現(xiàn)閃爍，也沒有網(wǎng)絡(luò)延遲，大大提升了用戶體驗(yàn)，減輕了服務(wù)器的壓力，但是同時也存在問題是前端的安全性問題
目前前端路由的實(shí)現(xiàn)主要采用兩個方法
hash
history
hashhash就是我們通常說的錨點(diǎn)，一般用于內(nèi)容的快速定位，但是hash值有一個特點(diǎn)，就是會改變url，但是不會觸發(fā)瀏覽器的刷新，利用這個特點(diǎn)，我們配合可以檢測到hash值變化的hashchange事件就能比較容易實(shí)現(xiàn)前端路由
window.addEventListener("hashchange",function () {
console.log("錨點(diǎn)值改變了");
//發(fā)送ajax請求，局部刷新頁面，加載模塊等操作
})
history
history是window對象的一部分，包含用戶在瀏覽器中訪問過的歷史記錄
屬性
length：該屬性會返回瀏覽器中歷史記錄的數(shù)量
state：返回一個歷史記錄中頂部記錄的狀態(tài)值
scrollRestoration：允許瀏覽器自定義設(shè)置默認(rèn)的滾動行為，該屬性有兩個值，auto和manual
這里關(guān)于scrollRestoration屬性我們多說一點(diǎn)，在JavaScript中有一個叫做scrollTo的方法，該方法可以指定滑動位置，例如可以用來控制我們每一次聊天內(nèi)容都固定在窗口的底部
test.scrollTo(0,test.scrollHeight)但是有時候并不會生效，這個有可能就是scrollRestoration的原因，因?yàn)闉g覽器是默認(rèn)保持滾動位置的，也就是說瀏覽器設(shè)置history的默認(rèn)值是auto，我們需要將其設(shè)置為manual
history.scrollRestoration="manual"這個是時候就可以正常的按照我們的需求每一次固定到窗口底部了
如果有兼容性問題采用如下寫法
setTimeout(() => { window.scrollTo(0, document.body.scrollHeight) })
方法
back：返回上一條歷史記錄
forward：前往下一條歷史記錄
go：前往指定的歷史記錄，history.go(1)相當(dāng)于history.forward()，history.go(-1)相當(dāng)于history.back()
同時在js中也存在一個popstate的方法可以監(jiān)測到瀏覽器的前進(jìn)/后退，同時在該方法中可以獲取到歷史記錄的狀態(tài)對象
window.addEventListener("popstate",function (e) {
console.log(e.state)
})
在HTML5中新增加了兩個方法pushState，replaceState
這兩個方法都是在不觸發(fā)瀏覽器的刷新機(jī)制下改變?yōu)g覽器的url，不同之處在于pushState相當(dāng)于在瀏覽器歷史記錄棧中添加了一條我們自定義的歷史記錄，而replaceState相當(dāng)于用我們自己設(shè)置的歷史記錄替換掉了瀏覽器當(dāng)前的歷史記錄棧中的第一條，所以pushState會改變history的length長度，而replaceState則不會
這兩個方法都接收三個參數(shù)
state，一個指定網(wǎng)址相關(guān)的狀態(tài)對象
title，指定新頁面的標(biāo)題，但是目前被大部分瀏覽器忽略
url，指定新的網(wǎng)址，但是必須是和當(dāng)前網(wǎng)址是同源的
這兩個方法都是不能被popstate監(jiān)測到的，但是在執(zhí)行兩個方法的時候是能夠觸發(fā)history.state的從而我們可以拿到我們每一次增加/替換歷史記錄時的state，可以通過觀察者模式來實(shí)現(xiàn)對history狀態(tài)的監(jiān)聽
let page=1
ahead.addEventListener("click",function () {
page++;
window.history.pushState({page : page}, "test", "#test");
console.log(window.history.state);
//通過state值可以加載不同模塊/發(fā)送數(shù)據(jù)請求，局部刷新頁面
})
window.addEventListener("popstate",function (e) {
console.log(e.state)
//在用戶點(diǎn)擊后退、前進(jìn)時會被postate監(jiān)測到，同時也會獲取到state
})
?
?
?
?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101859.html
摘要：是一款基于的服務(wù)端渲染框架，跟的異曲同工。該配置項(xiàng)用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。 Vue因其簡單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，受到很多前端開發(fā)人員的青睞。國內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開發(fā)，我們正在使用的簡書，便是基于Vue來構(gòu)建的。 我們知道，SPA前端渲染存在兩大痛點(diǎn)：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關(guān)信息，使...
摘要：是一款基于的服務(wù)端渲染框架，跟的異曲同工。該配置項(xiàng)用于定義應(yīng)用客戶端和服務(wù)端的環(huán)境變量。 Vue因其簡單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，受到很多前端開發(fā)人員的青睞。國內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開發(fā)，我們正在使用的簡書，便是基于Vue來構(gòu)建的。 我們知道，SPA前端渲染存在兩大痛點(diǎn)：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關(guān)信息，使...
摘要：搭建一個應(yīng)用，少不了一個主文件，不少人根據(jù)各自喜好來定義名字，像?？偨Y(jié)一個完整的由個部分組成，大家只要把主文件當(dāng)成白雪公主，把個組成部分當(dāng)作七個小矮人就行了，哈哈，這個記法真天才。 前言 Node妹子的問世，著實(shí)讓我們前端攻城獅興奮了一把，尤其本屌聽說Javascript可以寫服務(wù)端后，興奮的像是看到了二次元蘿莉的胖子...(●?●)。呃哼...YY先到這里，原諒本屌是個二次元蘿莉控。...
閱讀 646·2021-09-22 10:02
閱讀 6410·2021-09-03 10:49
閱讀 571·2021-09-02 09:47
閱讀 2157·2019-08-30 15:53
閱讀 2936·2019-08-30 15:44
閱讀 908·2019-08-30 13:20
閱讀 1822·2019-08-29 16:32
閱讀 895·2019-08-29 12:46
