一、前言

　　前端部分的搭建，需要考慮使用哪種模式進行頁面之間的跳轉交互，

　　而項目內的頁面交互，不可避免的需要相互之間的數據共享。

　　這就引出了本篇博客的目的，一起來談談：項目前端部分的構建方式以及數據共享方式。

二、正文

　　（一）、搭建前端部分所需要注意的問題

　　1）方便性
　　　 結合開發的時間需求和方便性選擇適合的前端模式；

　　2）性能
　　　 在項目的體量比較大，或者某個頁面需要加載較多文件時，會對加載頁面所需時間產生影響

　　3）瀏覽器的緩存
　　　 在項目發布后如果文件（css/js/image）有更新，需要用戶瀏覽器清理緩存才會從服務器獲取更新后的文件，
　　　 可以通過文件末尾添加時間戳和版本號來避免瀏覽器優先使用內部緩存文件這樣的問題。

　　4）文件的目錄結構
　　　 是按照文件的類別設置目錄結構？還是按照不同頁面設置？

　　　

　　（二）、前端搭建的模式選擇（多頁面模式和單頁面模式）

　　　　

圖片來源：https://blog.csdn.net/u013291076/article/details/53667382

　　1）多頁面模式（MPA Multi-page Application）：
　　　　多頁面跳轉需要刷新所有資源，每個公共資源(js、css等)需選擇性重新加載
　　　　頁面跳轉：使用window.location.href = "./index.html"進行頁面間的跳轉；
　　　　數據傳遞：可以使用path?account="123"&password=""路徑攜帶數據傳遞的方式，或者localstorage、cookie等存儲方式

　　2）單頁面模式（SPA Single-page Application）：
　　　　只有一張Web頁面的應用，是一種從Web服務器加載的富客戶端，單頁面跳轉僅刷新局部資源 ，公共資源(js、css等)僅需加載一次
　　　　頁面跳轉：使用js中的append/remove或者show/hide的方式來進行頁面內容的更換；
　　　　數據傳遞：可通過全局變量或者參數傳遞，進行相關數據交互
　　　　

兩種模式對比：

頁面模式	多頁面模式（MPA Multi-page Application）	單頁面模式（SPA Single-page Application）
頁面的組成	多個完整頁面， 例如page1.html、page2.html等	由一個初始頁面和多個頁面模塊組成， 例如：index.html和page1.htnl.js、page2.html.js等
公共文件加載	跳轉頁面前后，js/css/img等公用文件重新加載	js/css/img等公用文件只在加載初始頁面時加載，更換頁面內容前后無需重新加載
頁面跳轉/內容更新	頁面通過window.location.href = "./index.html"跳轉	通過使用js方法，append/remove或者show/hide等方式來進行頁面內容的更換
頁面跳轉/內容更新 所需數據的傳遞	可以使用路徑攜帶數據傳遞的方式，例如：http://index.html?account="123"&password=123456""，或者localstorage、cookie等存儲方式	直接通過參數傳遞，或者全局變量的方式進行，因為都是在一個頁面的腳本環境下
用戶體驗	如果單個頁面加載的文件相對較大（多），頁面切換加載會很慢	頁面片段間切換較快，用戶體驗好，因為初次已經加載好相關文件。但是初次加載頁面時需要調整優化，因為加載文件較多
適用場景	適用于高度追求高度支持搜索引擎的應用	高要求的體驗度，追求界面流暢的應用
轉場動畫	不容易實現	容易實現
總結： 單頁面模式：相對比較有優勢，無論在用戶體驗還是頁面切換的數據傳遞、頁面切換動畫，都可以有比較大的操作空間 多頁面模式：比較適用于頁面跳轉較少，數據傳遞較少的項目中開發，否則使用cookie，localstorage進行數據傳遞，是一件很可怕而又不穩定的無奈選擇

三、結語

前端的明天在框架，得學vue了

總結

以上是生活随笔為你收集整理的前端的单页面模式SPA和多页面模式MPA的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。