成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

前端路由與后端路由的思考

tuomao / 1399人閱讀

摘要：由于這種通信方式不需要頁(yè)面的刷新動(dòng)作，因而無(wú)論與后臺(tái)發(fā)生了多少次通信，瀏覽器的會(huì)一直保持在初始地址不變。前端路由的值通常應(yīng)用在單頁(yè)面應(yīng)用中。

后端路由 
* path（路由分發(fā)）
    針對(duì)不同的路由對(duì)應(yīng)不同的回調(diào)函數(shù)處理(req, res, next)
    * req;獲取請(qǐng)求參數(shù)
    * res：返回請(qǐng)求數(shù)據(jù)
    * next: 調(diào)用后續(xù)的回調(diào)函數(shù)
前端路由 
* 路由是根據(jù)不同的url去請(qǐng)求不同的頁(yè)面內(nèi)容
* 前端路由就是把不同路由對(duì)應(yīng)不同的內(nèi)容或頁(yè)面的任務(wù)交給前端來(lái)做，之前是通過(guò)服務(wù)端根據(jù)url不同返回不同的頁(yè)面來(lái)實(shí)現(xiàn)。
* 利用H5的history.pushState?和?history.replaceState?，這兩個(gè)history新增的api，為前端操控瀏覽器歷史棧提供了可能性
* 這兩個(gè)Api都會(huì)操作瀏覽器的歷史棧，而不會(huì)引起頁(yè)面的刷新。
* 不同的是，pushState會(huì)增加一條新的歷史記錄，而replaceState則會(huì)替換當(dāng)前的歷史記錄。
應(yīng)用：?jiǎn)雾?yè)面應(yīng)用
優(yōu)點(diǎn)和缺點(diǎn)：
    * 優(yōu)點(diǎn)： 用戶體驗(yàn)好，不需要每次向服務(wù)器發(fā)送請(qǐng)求請(qǐng)求頁(yè)面數(shù)據(jù)，響應(yīng)快
    * 缺點(diǎn)：使用瀏覽器的前進(jìn)，后退鍵的時(shí)候會(huì)重新發(fā)送請(qǐng)求，沒(méi)有合理地利用緩存，
hash值得由來(lái) 
歷史：
    1、基于Ajax 的 Web 應(yīng)用最為明顯的特征在于使用了瀏覽器內(nèi)部原生支持的 XMLHttpRequest對(duì)象與后臺(tái)服務(wù)器進(jìn)行數(shù)據(jù)通。
    2、由于這種通信方式不需要頁(yè)面的刷新動(dòng)作，因而無(wú)論與后臺(tái)發(fā)生了多少次通信，瀏覽器的 URL 會(huì)一直保持在初始地址不變。
    3、這隨之而來(lái)的一個(gè)問(wèn)題便是不斷變化的頁(yè)面狀態(tài)信息無(wú)法記錄到瀏覽器的歷史記錄堆棧中，從而使得用戶無(wú)法通過(guò)瀏覽器的前進(jìn) / 后退按鈕在不同狀態(tài)頁(yè)面間進(jìn)行切換。
解決思路： 
瀏覽器能夠支持在用戶訪問(wèn)過(guò)的頁(yè)面間進(jìn)行前進(jìn) / 后退的操作，依賴于內(nèi)部維持的 history 對(duì)象。
出于安全性的考慮，瀏覽器并不允許 JavaScript 腳本對(duì)該對(duì)象進(jìn)行增刪改之類(lèi)寫(xiě)操作，
而只是可以通過(guò) history. back/forward() 等方法進(jìn)行訪問(wèn)。既然在頁(yè)面狀態(tài)發(fā)生變化時(shí)，
無(wú)法通過(guò)腳本直接去影響瀏覽器的歷史信息，那么只有通過(guò) URL 的變化來(lái)觸發(fā)瀏覽器增加一條新的歷史記錄。
這也就是說(shuō)需要將 Ajax 應(yīng)用的不同頁(yè)面狀態(tài)與 URL 進(jìn)行一種一對(duì)一的映射，并且能夠在回退或前進(jìn)到某一 URL 之時(shí)，
應(yīng)用本身能夠在頁(yè)面無(wú)刷新的情況下跳轉(zhuǎn)到正確的頁(yè)面狀態(tài)。如何對(duì) Ajax 應(yīng)用的初始 URL 進(jìn)行改變，
而同時(shí)這種變化的切換又不會(huì)引起頁(yè)面的重新加載呢？答案只有一個(gè)，那就是借助用于頁(yè)面內(nèi)資源片段定位目的
的“片段標(biāo)識(shí)符”（fragment identifier），即 URL 中“#”符號(hào)后的字符串（hash string）。當(dāng)瀏覽器向
服務(wù)器端請(qǐng)求資源時(shí)，片段標(biāo)識(shí)符并不會(huì)連同 base URL 一同發(fā)往服務(wù)器端，而只是在得到服務(wù)器返回的結(jié)果
之后幫助瀏覽器快速定位到被相應(yīng)的錨點(diǎn)（anchor）所標(biāo)識(shí)的資源片段，即使無(wú)法找個(gè)對(duì)應(yīng)的錨點(diǎn)，瀏覽器也并
不會(huì)報(bào)錯(cuò)。正是基于瀏覽器的這一特性，構(gòu)建片段標(biāo)識(shí)符與頁(yè)面狀態(tài)之間的映射關(guān)系成為了解決此類(lèi)問(wèn)題的基礎(chǔ)。

hash值

將任意長(zhǎng)度的二進(jìn)制字符串通過(guò)一定的算法映射成一個(gè)固定長(zhǎng)度的較小二進(jìn)制字符串，這個(gè)字符串就是對(duì)應(yīng)的hash值，主要特點(diǎn)就是唯一的，不可逆的。

前端路由的hash值(#)----->angular

hash通常應(yīng)用在spa單頁(yè)面應(yīng)用中。因?yàn)橥ㄟ^(guò)不同的hash值映射的url來(lái)是的瀏覽器添加一條不同的url歷史記錄。

通過(guò)瀏覽器的pushstate、replaceState來(lái)操作，請(qǐng)求不同的瀏覽器記錄達(dá)到請(qǐng)求不同的頁(yè)面的效果

H5中提供的兩個(gè)操作hash值得API來(lái)操作hash值

window.location.hash讀取#值

window.onhashchange = func 監(jiān)聽(tīng)hash改變

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84421.html

相關(guān)文章

  • 前端框架模式的變遷

    摘要：現(xiàn)在在前端的框架都是的模式，還有像和之類(lèi)的變種獨(dú)特的單向數(shù)據(jù)流框架。只要將數(shù)據(jù)流進(jìn)行規(guī)范，那么原來(lái)的模式還是大有可為的。我們可以來(lái)看一下，框架的圖示從圖中，我們可以看到形成了一條到，再到，之后是的，一條單向數(shù)據(jù)流。 前言 前端框架的變遷，體系架構(gòu)的完善，使得我們只知道框架，卻不明白它背后的道理。我們應(yīng)該抱著一顆好奇心，在探索框架模式的變遷過(guò)程中，體會(huì)前人的一些理解和思考 本篇將講述的是...

    ssshooter 評(píng)論0 收藏0

  • 單頁(yè)應(yīng)用的部署方案

    摘要：所以單頁(yè)應(yīng)用的部署，需要將所有的頁(yè)面請(qǐng)求都返回，瀏覽器下載了后會(huì)自動(dòng)解析并導(dǎo)航到對(duì)應(yīng)頁(yè)面。總結(jié)單頁(yè)應(yīng)用與以前的常規(guī)多頁(yè)面應(yīng)用還是有區(qū)別的，開(kāi)發(fā)過(guò)程與后端解耦了，同時(shí)會(huì)出現(xiàn)跨域鑒權(quán)以及應(yīng)用部署的問(wèn)題。 本文同步發(fā)布于我的個(gè)人博客上 - 單頁(yè)應(yīng)用的部署方案 本文主要簡(jiǎn)單講一下單頁(yè)應(yīng)用的開(kāi)發(fā)及部署方法，默認(rèn)你懂一些服務(wù)端知識(shí)及nginx知識(shí)，如果有任何可以在下方評(píng)論留言。 單頁(yè)應(yīng)用 SPA（...

    yanbingyun1990 評(píng)論0 收藏0

  • 構(gòu)建前端項(xiàng)目

    摘要：解決思路服務(wù)器端渲染服務(wù)器端和前端公用同一個(gè)應(yīng)用，然后通過(guò)構(gòu)建工具及配置，確定哪些組件需要再服務(wù)器端渲染，那些組件需要再客戶端渲染。服務(wù)器端渲染，由框架與構(gòu)建工具配合，并依據(jù)一定的項(xiàng)目結(jié)構(gòu)和編碼方式，共同運(yùn)行。 分離 為什么需要 前后端分離、web服務(wù)器與static服務(wù)器分離: 前端與后端耦合 (需求) 自動(dòng)化、工程化的構(gòu)建前端的代碼 (基礎(chǔ)條件) 模塊化、組件化，項(xiàng)目共享代碼 (...

    mindwind 評(píng)論0 收藏0

  • 細(xì)說(shuō) Vue 組件的服務(wù)器端渲染

    摘要：所以，這次就來(lái)聊聊組件的服務(wù)器端渲染。這種模式下，后端只提供接口，傳統(tǒng)的服務(wù)器端路由模板渲染則都有層接管。這樣，前端開(kāi)發(fā)人員可以自由的決定哪些組件需要在服務(wù)器端渲染，哪些組件可以放在客戶端渲染，前后端完全解耦，但又保留了服務(wù)器端渲染的功能。 細(xì)說(shuō) Vue 組件的服務(wù)器端渲染 聲明：需要讀者對(duì) NodeJs、Vue 服務(wù)器端渲染有一定的了解 現(xiàn)在，前后端分離與客戶端渲染已經(jīng)成為前端開(kāi)發(fā)的...

    reclay 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<