JavaScript中對于SPA單頁面的理解

更新時間：2023年02月23日 11:42:59 作者：北海嶼鹿

這篇文章主要介紹了JavaScript中對于SPA單頁面的理解，單頁應用SPA是一種網(wǎng)絡應用程序或網(wǎng)站的模型，它通過動態(tài)重寫當前頁面來與用戶交互

一、什么是SPA

SPA（single-page application），翻譯過來就是單頁應用SPA是一種網(wǎng)絡應用程序或網(wǎng)站的模型，它通過動態(tài)重寫當前頁面來與用戶交互，這種方法避免了頁面之間切換打斷用戶體驗在單頁應用中，所有必要的代碼（HTML、JavaScript和CSS）都通過單個頁面的加載而檢索，或者根據(jù)需要（通常是為響應用戶操作）動態(tài)裝載適當?shù)馁Y源并添加到頁面頁面在任何時間點都不會重新加載，也不會將控制轉移到其他頁面舉個例子來講就是一個杯子，早上裝的牛奶，中午裝的是開水，晚上裝的是茶，我們發(fā)現(xiàn)，變的始終是杯子里的內(nèi)容，而杯子始終是那個杯子結構如下圖

我們熟知的JS框架如react,vue,angular,ember都屬于SPA

二、SPA和MPA的區(qū)別

上面大家已經(jīng)對單頁面有所了解了，下面來講講多頁應用MPA（MultiPage-page application），翻譯過來就是多頁應用在MPA中，每個頁面都是一個主頁面，都是獨立的當我們在訪問另一個頁面的時候，都需要重新加載html、css、js文件，公共文件則根據(jù)需求按需加載如下圖

單頁應用與多頁應用的區(qū)別

	單頁面應用（SPA）	多頁面應用（MPA）
組成	一個主頁面和多個頁面片段	多個主頁面
刷新方式	局部刷新	整頁刷新
url模式	哈希模式	歷史模式
SEO搜索引擎優(yōu)化	難實現(xiàn)，可使用SSR方式改善	容易實現(xiàn)
數(shù)據(jù)傳遞	容易	通過url、cookie、localStorage等傳遞
頁面切換	速度快，用戶體驗良好	切換加載資源，速度慢，用戶體驗差
維護成本	相對容易	相對復雜

單頁應用優(yōu)缺點

優(yōu)點：

具有桌面應用的即時性、網(wǎng)站的可移植性和可訪問性
用戶體驗好、快，內(nèi)容的改變不需要重新加載整個頁面
良好的前后端分離，分工更明確

缺點：

不利于搜索引擎的抓取
首次渲染速度相對較慢

三、實現(xiàn)一個SPA

監(jiān)聽地址欄中hash變化驅動界面變化
用pushsate記錄瀏覽器的歷史，驅動界面發(fā)送變化

實現(xiàn)

hash模式

核心通過監(jiān)聽url中的hash來進行路由跳轉

// 定義 Router  
class Router {  
    constructor () {  
        this.routes = {}; // 存放路由path及callback  
        this.currentUrl = '';  
        // 監(jiān)聽路由change調(diào)用相對應的路由回調(diào)  
        window.addEventListener('load', this.refresh, false);  
        window.addEventListener('hashchange', this.refresh, false);  
    }  
    route(path, callback){  
        this.routes[path] = callback;  
    }  
    push(path) {  
        this.routes[path] && this.routes[path]()  
    }  
}  
// 使用 router  
window.miniRouter = new Router();  
miniRouter.route('/', () => console.log('page1'))  
miniRouter.route('/page2', () => console.log('page2'))  
miniRouter.push('/') // page1  
miniRouter.push('/page2') // page2

history模式

history模式核心借用HTML5 history api，api提供了豐富的router相關屬性先了解一個幾個相關的api

history.pushState瀏覽器歷史紀錄添加記錄
history.replaceState修改瀏覽器歷史紀錄中當前紀錄
history.popState當history發(fā)生變化時觸發(fā)

// 定義 Router  
class Router {  
    constructor () {  
        this.routes = {};  
        this.listerPopState()  
    }  
    init(path) {  
        history.replaceState({path: path}, null, path);  
        this.routes[path] && this.routes[path]();  
    }  
    route(path, callback){  
        this.routes[path] = callback;  
    }  
    push(path) {  
        history.pushState({path: path}, null, path);  
        this.routes[path] && this.routes[path]();  
    }  
    listerPopState () {  
        window.addEventListener('popstate' , e => {  
            const path = e.state && e.state.path;  
            this.routers[path] && this.routers[path]()  
        })  
    }  
}  
// 使用 Router  
window.miniRouter = new Router();  
miniRouter.route('/', ()=> console.log('page1'))  
miniRouter.route('/page2', ()=> console.log('page2'))  
// 跳轉  
miniRouter.push('/page2')  // page2