欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中對于SPA單頁面的理解

 更新時(shí)間:2023年02月23日 11:42:59   作者:北海嶼鹿  
這篇文章主要介紹了JavaScript中對于SPA單頁面的理解,單頁應(yīng)用SPA是一種網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)站的模型,它通過動態(tài)重寫當(dāng)前頁面來與用戶交互

一、什么是SPA

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

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

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

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

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

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

單頁應(yīng)用優(yōu)缺點(diǎn)

優(yōu)點(diǎn):

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

缺點(diǎn):

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

三、實(shí)現(xiàn)一個(gè)SPA

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

實(shí)現(xiàn)

hash模式

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

// 定義 Router  
class Router {  
    constructor () {  
        this.routes = {}; // 存放路由path及callback  
        this.currentUrl = '';  
        // 監(jiān)聽路由change調(diào)用相對應(yīng)的路由回調(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 apiapi提供了豐富的router相關(guān)屬性先了解一個(gè)幾個(gè)相關(guān)的api

  • history.pushState瀏覽器歷史紀(jì)錄添加記錄
  • history.replaceState修改瀏覽器歷史紀(jì)錄中當(dāng)前紀(jì)錄
  • history.popState當(dāng)history發(fā)生變化時(shí)觸發(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'))  
// 跳轉(zhuǎn)  
miniRouter.push('/page2')  // page2  

四、如何給SPA做SEO

下面給出基于VueSPA如何實(shí)現(xiàn)SEO的三種方式

SSR服務(wù)端渲染

將組件或頁面通過服務(wù)器生成html,再返回給瀏覽器,如nuxt.js

靜態(tài)化

目前主流的靜態(tài)化主要有兩種:

(1)一種是通過程序?qū)討B(tài)頁面抓取并保存為靜態(tài)頁面,這樣的頁面的實(shí)際存在于服務(wù)器的硬盤中

(2)另外一種是通過WEB服務(wù)器的URL Rewrite的方式,它的原理是通過web服務(wù)器內(nèi)部模塊按一定規(guī)則將外部的URL請求轉(zhuǎn)化為內(nèi)部的文件地址,一句話來說就是把外部請求的靜態(tài)地址轉(zhuǎn)化為實(shí)際的動態(tài)頁面地址,而靜態(tài)頁面實(shí)際是不存在的。

這兩種方法都達(dá)到了實(shí)現(xiàn)URL靜態(tài)化的效果

使用Phantomjs針對爬蟲處理

原理是通過Nginx配置,判斷訪問來源是否為爬蟲,如果是則搜索引擎的爬蟲請求會轉(zhuǎn)發(fā)到一個(gè)node server,再通過PhantomJS來解析完整的HTML,返回給爬蟲。下面是大致流程圖

到此這篇關(guān)于JavaScript中對于SPA單頁面的理解的文章就介紹到這了,更多相關(guān)JS SPA單頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論