一、前言

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

　　而項目內(nèi)的頁面交互，不可避免的需要相互之間的數(shù)據(jù)共享。

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

?

二、正文

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

　　1）方便性
　　　? 結(jié)合開發(fā)的時間需求和方便性選擇適合的前端模式；

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

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

　　4）文件的目錄結(jié)構(gòu)
　　　? 是按照文件的類別設置目錄結(jié)構(gòu)？還是按照不同頁面設置？

　　　??

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

　　　　

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

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

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

兩種模式對比：

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

?

三、結(jié)語

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。