亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端學習之路之SPA(單頁應用)設(shè)計原理

Crazy_Coder / 757人閱讀

摘要：設(shè)計設(shè)計意義前后端分離減輕服務(wù)器壓力增強用戶體驗預渲染優(yōu)化前后端分離前端做業(yè)務(wù)邏輯，后端處理數(shù)據(jù)和接口，耦合度減少，開發(fā)效率提高。響應瀏覽器的前進和后退。代碼實現(xiàn)演示圖結(jié)上就是設(shè)計原理愿你成為終身學習者

SPA設(shè)計 1、設(shè)計意義

前后端分離

減輕服務(wù)器壓力

增強用戶體驗

Prerender預渲染優(yōu)化SEO

前后端分離：前端做業(yè)務(wù)邏輯，后端處理數(shù)據(jù)和接口，耦合度減少，開發(fā)效率提高。

減輕服務(wù)器壓力:一個頁面不用每次都去請服務(wù)端，當一個應用較復雜，有10多個頁面的時候，那么每個用用戶操作幾個頁面，只需要請求一次，這會在很大程度上減輕服務(wù)器壓力。

增強用戶體驗:比如說當從一個首頁跳轉(zhuǎn)詳情頁，如果按照傳統(tǒng)頁面的方式，相當于在首頁請求，在去服務(wù)端請求另一個詳情頁，每一次的連接，都要消耗DNS以及TCP建立連接再加上頁面?zhèn)鬏數(shù)倪^程還要包括接口響應的時間，這個都是用戶可以感受的到的，那么當使用單頁面的時候，不存在多次下載頁面的時間，只有接口消耗的時間，這在很大程度上增強了用戶體驗。

缺點:SPA關(guān)于SEO方面有些弱勢，對于搜索引擎不是特別友好，那怎么彌補呢？

Prerender預渲染優(yōu)化SEO:這個主要針對SPA在SEO弱勢方面上的處理,這篇文章主要介紹處理方法，大家可去了解一下。

2、工作原理

History API

Hash

?SPA真正的工作原理是什么？大家有可能在使用vue的話，基本都會使用Router插件，用這個插件頁面跑起來沒問題，但是這個插件背后的工作原理是否清楚，有幾種方式實現(xiàn)？
實現(xiàn)方面的主要有兩大類History API和Hash實現(xiàn)，那么這兩種之間有什么區(qū)別呢？
第一個History API更加優(yōu)雅，但是對瀏覽器是有一定要求的,第二個Hash看上去不是特別的優(yōu)雅，但是它是兼容性最好的方案。

2.1) History API

如上圖，左邊對應的入口一，二，三，對應頁面上的頁面一，二，三的，一個入口點進去，應該對應一個頁面，這個是入口的作用。那么它們之間是怎么關(guān)聯(lián)上的？比如我點擊了入口二，怎么讓頁面二打開，記住這里的頁面二打開是不要請求服務(wù)端，是通過本地的JS控制，第是第一步。
第二個是點擊瀏覽器的前進后退或者是其它控制，它怎么回到某個入口對應的頁面上去，這是第二步。
以上二步就是SAP要控制的動作，如上圖中間部分 History對象，就是實現(xiàn)的一個中間橋梁，History對象下的兩個小東西onpopstate和pushState，這是來實現(xiàn)這兩步的。

pushState：創(chuàng)建一個歷史記錄。 onpopstate：響應瀏覽器的前進和后退。 代碼實現(xiàn)

說明:上圖主要有兩個a標簽，a.html,b.html，js注冊a標簽點擊事件，通過history.pushState創(chuàng)建一個歷史記錄進行頁面切換，pushState主要有三個參數(shù)，第一個就是傳送參數(shù)，第二個是頁面的標題，第三個就是跳轉(zhuǎn)URL。

然后通過監(jiān)聽onpopstate，就可以知道瀏覽器前進和回退一些信息。

演示圖:

如上，當我點擊a.hmtl地址欄的就發(fā)生變化，頁面切到了a.html，但頁面不會刷新，同理點擊b.html效果也是一新。


當我們點擊回退的時候，就會顯示具體信息了。

2.2) Hash

其實hash與History流程差不多，不同的是，橋梁發(fā)生了變化。大家知道，一個URL上有post,path,search還有hash。那么hash是怎么做的呢？

當我們改變一個地址的時候，去修改hash，然后監(jiān)聽hashchange事件，你就知道頁面的地址發(fā)生的變化，然后在這個事件里面去做相應的動作，就能完成剛才所說的這種頁面的切換。

代碼實現(xiàn)

演示圖:

結(jié)上就是SPA設(shè)計原理 
愿你成為終身學習者

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/93609.html

相關(guān)文章

  • 前端學習之路之SPA(單頁應用)設(shè)計原理

    摘要：設(shè)計設(shè)計意義前后端分離減輕服務(wù)器壓力增強用戶體驗預渲染優(yōu)化前后端分離前端做業(yè)務(wù)邏輯，后端處理數(shù)據(jù)和接口，耦合度減少，開發(fā)效率提高。響應瀏覽器的前進和后退。代碼實現(xiàn)演示圖結(jié)上就是設(shè)計原理愿你成為終身學習者 SPA設(shè)計 1、設(shè)計意義 前后端分離 減輕服務(wù)器壓力 增強用戶體驗 Prerender預渲染優(yōu)化SEO 前后端分離：前端做業(yè)務(wù)邏輯，后端處理數(shù)據(jù)和接口，耦合度減少，開發(fā)效率提高。 ...

    Barry_Ng 評論0 收藏0

  • 雙十二大前端工程師讀書清單

    摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發(fā)布在上。發(fā)布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設(shè)計快速響應的網(wǎng)絡(luò)應用，而非簡單的頁面。 本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發(fā)布在 GitChat 上。發(fā)布之后在讀者圈群聊中和讀者進行了深入的交流，現(xiàn)免費分享到這里，不足之處歡迎指教...

    happen 評論0 收藏0

  • 雙十二大前端工程師讀書清單

    摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發(fā)布在上。發(fā)布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設(shè)計快速響應的網(wǎng)絡(luò)應用，而非簡單的頁面。 本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發(fā)布在 GitChat 上。發(fā)布之后在讀者圈群聊中和讀者進行了深入的交流，現(xiàn)免費分享到這里，不足之處歡迎指教...

    余學文 評論0 收藏0

  • 雙十二大前端工程師讀書清單

    摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發(fā)布在上。發(fā)布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設(shè)計快速響應的網(wǎng)絡(luò)應用，而非簡單的頁面。 本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發(fā)布在 GitChat 上。發(fā)布之后在讀者圈群聊中和讀者進行了深入的交流，現(xiàn)免費分享到這里，不足之處歡迎指教...

    Jochen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<