RN從0到1系統(tǒng)精講與小紅書APP實(shí)戰(zhàn)2023版-對(duì)酒當(dāng)歌，人生幾何！
原生JavaScript完成的SPA單頁應(yīng)用（hash路由）
什么叫做SPA單頁應(yīng)用
RN從0到1系統(tǒng)精講與小紅書APP實(shí)戰(zhàn)2023版
download：https://www.zxit666.com/5906/
單頁Web應(yīng)用 （single page web application，SPA） ，就是只要一張Web頁面的應(yīng)用，是加載單個(gè)HTML 頁面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁面的Web應(yīng)用程序。
單頁應(yīng)用的說法是在JavaScript和AJAX技術(shù)比擬成熟以后才呈現(xiàn)的，指的是經(jīng)過閱讀器訪問一個(gè)網(wǎng)站時(shí)，只需求加載一個(gè)入口頁面，爾后顯現(xiàn)的內(nèi)容和數(shù)據(jù)都不會(huì)再刷新閱讀器頁面。有了單頁應(yīng)用之后，傳統(tǒng)的網(wǎng)站就被稱為多頁應(yīng)用了。
單頁應(yīng)用的優(yōu)點(diǎn)
? 1. 前端擔(dān)任界面顯現(xiàn)，后端擔(dān)任數(shù)據(jù)存儲(chǔ)和計(jì)算，各司其職。
? 2. 用戶體驗(yàn)好、快，內(nèi)容的改動(dòng)不需求重新加載，提升了用戶體驗(yàn)；而且同一套后端程序代碼，不用修正就能夠用于Web界面、手機(jī)、平板等多種客戶端；
? 3. 減輕效勞器壓力，效勞器只用出數(shù)據(jù)就能夠，不用管展現(xiàn)邏輯和頁面合成，吞吐才能會(huì)進(jìn)步幾倍。
單頁應(yīng)用的完成原理
其實(shí)很容易了解，就是在一個(gè)HTML頁面當(dāng)中只要一個(gè)div節(jié)點(diǎn)，經(jīng)過后端獲取到數(shù)據(jù)，然后js操作DOM來創(chuàng)立、刪除、更新節(jié)點(diǎn)以到達(dá)修正頁面內(nèi)容，所以頁面是沒有被刷新的，只是DOM節(jié)點(diǎn)發(fā)作了改動(dòng)，所以HTML發(fā)作了改動(dòng)。
目前有十分多開發(fā)單頁應(yīng)用的優(yōu)秀框架，常見的有Vue、React、Svelte、Angular，但是這些框架都需求依賴十分笨重的Node模塊、打包工具、開發(fā)環(huán)境、以及各種組件。有沒有一種傳統(tǒng)的開發(fā)方式去完成單頁應(yīng)用呢？本文正是處理計(jì)劃！
代碼闡明
- 本次示例也是采用了目前的Web構(gòu)建工具打包出來的目錄形式（即Webpack、Vite等打包工具）
- index.js里面的數(shù)據(jù)寫在了一個(gè)對(duì)象當(dāng)中，實(shí)踐應(yīng)用需求運(yùn)用AJAX/Fetch等方式獲取數(shù)據(jù)返回JSON對(duì)象停止顯現(xiàn)。
動(dòng)圖演示
在這個(gè)動(dòng)圖示例中，能夠看到，切換tab的時(shí)分，下面的列表發(fā)作了變化，URL也發(fā)作了變化，但是并沒有刷新頁面。
