H5單頁面應用(SPA)架構總結

H5單頁面應用(SPA)架構總結

架構圖

經驗總結

起因

去年疫情期間在家沒事, 想着寫一個商城項目沉澱一下本身這些年所學的知識. 通過了一年多的反覆改版, 優化, 最終作成了如今這樣一個有衡量標準的東西.

這期間走過不少彎路, 作了不少無用功. 想着作一個總結, 加深一下記憶. 也但願能幫助到你們.

開發目標

咱們想作一個東西出來, 最開始確定有本身的想法: 這些個商城項目都是啥玩意兒, 這麼複雜, 調用鏈這麼長, 讓人怎麼調試, 怎麼二次開發...... 隨着深刻, 你會慢慢的就總結出一些規律: 作一個xx項目, 至少應該有xxx這些特色, 才能算的上是好東西.

1. 代碼能夠複用, 或以很小的代價複用: 每一個子頁面中只寫入佔位標籤, 用已寫好的dom直接替換
2. 前端請求也要有緩存
3. 支持隨時刷新: 無論在哪一個子頁面刷新, 刷新後仍是當前頁面
4. 可配置/方便管理頁面: 全部子頁面, 統一管理, 有章可循, 方便調試
5. 按需加載: 一個js插件幹一種事情, 而且自帶模板, css; 並且能夠無改動的應用到其餘項目中去
6. 支持鉤子: 好比管理後臺, 每次請求接口前都可以自動調用判斷是否登陸的方法
7. 非侵入式, 代碼可讀性高: 只有一個完整的, 簡潔的頁面HTML結構; 不是後期經過js拼湊出來的, 並且裏邊的標籤沒有多餘的屬性;
8. 移動端自適應
9. 未完待續......