前端部分的搭建，需要考慮使用哪種模式進行頁面之間的跳轉互動，
而專案內的頁面互動，不可避免的需要相互之間的資料共享。
這就引出了本篇部落格的目的，一起來談談：專案前端部分的構建方式以及資料共享方式。
1）方便性
結合開發的時間需求和方便性選擇適合的前端模式；
2）效能
在專案的體量比較大，或者某個頁面需要載入較多檔案時，會對載入頁面所需時間產生影響
3）瀏覽器的快取
在專案發布後如果檔案（css/js/image）有更新，需要使用者瀏覽器清理快取才會從伺服器獲取更新後的檔案，
可以通過檔案末尾新增時間戳和版本號來避免瀏覽器優先使用內部快取檔案這樣的問題。
4）檔案的目錄結構
是按照檔案的類別設定目錄結構？還是按照不同頁面設定？
兩種模式對比：
頁面模式
頁面的組成多個完整頁面，
例如page1.html、page2.html等
由乙個初始頁面和多個頁面模組組成，
例如：index.html和page1.htnl.js、page2.html.js等
公共檔案載入頁面跳轉/內容更新頁面通過window.location.href = "./index.html"跳轉
頁面跳轉/內容更新
所需資料的傳遞可以使用路徑攜帶資料傳遞的方式，例如："123"&password=123456""，或者localstorage、cookie等儲存方式
直接通過引數傳遞，或者全域性變數的方式進行，因為都是在乙個頁面的指令碼環境下
使用者體驗如果單個頁面載入的檔案相對較大（多），頁面切換載入會很慢
頁面片段間切換較快，使用者體驗好，因為初次已經載入好相關檔案。但是初次載入頁面時需要調整優化，因為載入檔案較多
適用場景適用於高度追求高度支援搜尋引擎的應用
高要求的體驗度，追求介面流暢的應用
轉場動畫不容易實現
容易實現
總結：單頁面模式：相對比較有優勢，無論在使用者體驗還是頁面切換的資料傳遞、頁面切換動畫，都可以有比較大的操作空間
多頁面模式：比較適用於頁面跳轉較少，資料傳遞較少的專案中開發，否則使用cookie，localstorage進行資料傳遞，是一件很可怕而又不穩定的無奈選擇
前端的單頁面模式SPA和多頁面模式MPA
前端部分的搭建，需要考慮使用哪種模式進行頁面之間的跳轉互動，而專案內的頁面互動，不可避免的需要相互之間的資料共享。這就引出了本篇部落格的目的，一起來談談 專案前端部分的構建方式以及資料共享方式。1 方便性 結合開發的時間需求和方便性選擇適合的前端模式 2 效能 在專案的體量比較大，或者某個頁面需要載...
多頁面應用和單頁面應用
每次頁面跳轉，後端都會返回乙個新的html檔案。優點 首屏時間快，seo效果好 缺點 頁面切換慢 後端路由切換頁面 每次跳轉頁面都要發乙個http請求。只在首次載入時請求乙個html檔案，頁面切換的路由由前端完成，使用js動態地刪除和渲染頁面。優點 頁面切換快 由前端路由切換頁面 缺點 首屏時間稍慢...
單頁面和多頁面的區別
單頁面和多頁面應用有什麼區別？單頁面應用 spa 通俗點說就是指只有乙個主頁面的應用，瀏覽器一開始要夾菜所有必須的的html，css，js，所有的頁面內容都包含在這個所謂的主頁面中。但寫的時候，也要分開來寫，頁面片段 然後在互動的時候由程式動態載入，單頁面的跳轉，僅重新整理區域性資源，多應用於pc端...