TA貢獻(xiàn)1805條經(jīng)驗 獲得超9個贊
首先讓我們澄清一些術(shù)語：
PWA（漸進(jìn)式 Web 應(yīng)用程序）是任何通過使用現(xiàn)代 Web API（例如 Service Worker、Notifications API 和 Web App Manifest）提供類似本機應(yīng)用程序體驗的 Web 應(yīng)用程序。
SPA（單頁應(yīng)用程序）是一種網(wǎng)絡(luò)應(yīng)用程序，可將其 URL 重定向到index.html，然后使用 JavaScript 更新頁面內(nèi)容，而無需index.html再次請求。
PWA 可以是 SPA，也可以是傳統(tǒng)的（多頁面）網(wǎng)絡(luò)應(yīng)用程序。因此，對您的問題的嚴(yán)格回答可能涉及任何語言的任何 Web 框架，無論是后端還是前端。不過，我想你的問題更多地與 SPA 相關(guān)，而不是多頁應(yīng)用程序，所以這個答案的其余部分與 SPA 相關(guān)
現(xiàn)在“如何編寫 SPA”是一個非常靈活和動態(tài)的領(lǐng)域，并且充滿了意見。確實沒有“正確的方法”來做到這一點，但有一些首選的結(jié)果，例如：
Web 可訪問性（即符合 WCAG）
加載性能（例如小包大小、快速首次繪制時間和其他指標(biāo)）
運行時性能（例如避免卡頓）
用戶體驗
最后一點，用戶體驗，可能是主觀的。但有些事情可以強調(diào)：
維護(hù)用戶期望，例如后退按鈕的工作方式
使用 URL 存儲應(yīng)用程序的狀態(tài)，以便共享和復(fù)制
但除此之外，真的沒有極限。我不能說這個答案的其余部分是“規(guī)范”或“最佳”實踐，但這些工具和方法對我有用。
路由器是 SPA 響應(yīng) URL 更改以更新頁面的一種方式。它們通常通過攔截頁面上的點擊并阻止正常的瀏覽器導(dǎo)航過程來工作。
有無數(shù)的 SPA 路由庫可以幫助您實現(xiàn)這些目標(biāo)，以下是我過去使用過并可以推薦的三個：
PWA-Helpers Router小巧、簡單且不拘一格
Vaadin Router功能強大且流行
Simplr Router是新的和有前途的
對于中大型應(yīng)用程序，通常建議使用狀態(tài)管理庫來處理頁面狀態(tài)，例如啟用了哪些按鈕、要獲取和顯示哪些數(shù)據(jù)等。
這里有很多選擇，但一些流行的選擇是：
終極版
MobX
阿波羅（用于 GraphQL）
尤其是最后一個非常強大。我寫了一個庫來幫助它與 Web 組件一起使用：Apollo Elements
對于其他事情，例如
如何編寫組件
如何構(gòu)建生產(chǎn)
如何設(shè)置開發(fā)工作流程
舉報