你對SPA單頁面的理解,它的優缺點分別是什麼?如何實現SPA應用呢?

来源:https://www.cnblogs.com/smileZAZ/p/18025909
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、什麼是SPA SPA(single-page application),翻譯過來就是單頁應用SPA是一種網路應用程式或網站的模型,它通過動態重寫當前頁面來與用戶交互,這種方法避免了頁面之間切換打斷用戶體驗在單頁應用中,所有必要的代碼( ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

一、什麼是SPA

SPA(single-page application),翻譯過來就是單頁應用SPA是一種網路應用程式或網站的模型,它通過動態重寫當前頁面來與用戶交互,這種方法避免了頁面之間切換打斷用戶體驗在單頁應用中,所有必要的代碼(HTMLJavaScriptCSS)都通過單個頁面的載入而檢索,或者根據需要(通常是為響應用戶操作)動態裝載適當的資源並添加到頁面頁面在任何時間點都不會重新載入,也不會將控制轉移到其他頁面舉個例子來講就是一個杯子,早上裝的牛奶,中午裝的是開水,晚上裝的是茶,我們發現,變的始終是杯子里的內容,而杯子始終是那個杯子結構如下圖

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

二、SPA和MPA的區別

上面大家已經對單頁面有所瞭解了,下麵來講講多頁應用MPA(MultiPage-page application),翻譯過來就是多頁應用在MPA中,每個頁面都是一個主頁面,都是獨立的當我們在訪問另一個頁面的時候,都需要重新載入htmlcssjs文件,公共文件則根據需求按需載入如下圖

單頁應用與多頁應用的區別

單頁應用優缺點

優點:

  • 具有桌面應用的即時性、網站的可移植性和可訪問性
  • 用戶體驗好、快,內容的改變不需要重新載入整個頁面
  • 良好的前後端分離,分工更明確

缺點:

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

三、實現一個SPA

原理

  1. 監聽地址欄中hash變化驅動界面變化
  2. pushsate記錄瀏覽器的歷史,驅動界面發送變化

實現

hash 模式

核心通過監聽url中的hash來進行路由跳轉

// 定義 Router  
class Router {  
    constructor () {  
        this.routes = {}; // 存放路由path及callback  
        this.currentUrl = '';  
          
        // 監聽路由change調用相對應的路由回調  
        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 相關屬性先瞭解一個幾個相關的api

    • history.pushState 瀏覽器歷史紀錄添加記錄
    • history.replaceState修改瀏覽器歷史紀錄中當前紀錄
    • history.popState 當 history 發生變化時觸發
// 定義 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  

四、題外話:如何給SPA做SEO

下麵給出基於VueSPA如何實現SEO的三種方式

  1. SSR服務端渲染

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

  1. 靜態化

目前主流的靜態化主要有兩種:(1)一種是通過程式將動態頁面抓取並保存為靜態頁面,這樣的頁面的實際存在於伺服器的硬碟中(2)另外一種是通過WEB伺服器的 URL Rewrite的方式,它的原理是通過web伺服器內部模塊按一定規則將外部的URL請求轉化為內部的文件地址,一句話來說就是把外部請求的靜態地址轉化為實際的動態頁面地址,而靜態頁面實際是不存在的。這兩種方法都達到了實現URL靜態化的效果

  1. 使用Phantomjs針對爬蟲處理

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

參考文獻

  • https://segmentfault.com/a/1190000019623624
  • https://juejin.cn/post/6844903512107663368
  • https://www.cnblogs.com/constantince/p/5586851.html

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 概述:MVVM Toolkit是.NET平臺的強大工具包,旨在簡化MVVM應用程式開發。提供基礎功能如ViewModelBase和RelayCommand,支持數據綁定和命令綁定,通過Messenger實現消息訂閱發佈。其高級功能包括ObservableObject和WeakEventListene ...
  • 概述:.NET中的IConfiguration介面提供了一種多源讀取配置信息的靈活機制,包括JSON、XML、INI文件和環境變數。通過示例,清晰演示了從這些不同源中讀取配置的方法,使配置獲取變得方便且易於擴展。這種方式適用於不同場景,如API密鑰、資料庫連接等,為應用提供了高度可配置性。 在.NE ...
  • Gif演示 分解步驟 1,使用組件DataGridView 2,使用DataSource來控製表格展示的數據來源(註意:來源需要是DataTable類型) 3,需要用到非同步線程。如果是不控制數據源的話,需要使用UI安全線程;(使用Control.Invoke或Control.BeginInvoke方 ...
  • 大家好,我是知微! 上一篇推薦的書單嵌入式軟體必讀10本書_單片機篇,收到反響很好。再推薦一篇嵌入式Linux相關的書單。 《鳥哥的Linux私房菜》 鳥哥的Linux系列適合零基礎小伙伴,從電腦基礎到文件系統、shell腳本等等,通俗易懂。作者寫作風格生動幽默,不拘一格。雖然書有點厚,但對於新手而 ...
  • Linux下MySQL的安裝與使用 安裝前說明 查看是否安裝過MySQL 如果你是用rpm安裝, 檢查一下RPM PACKAGE: rpm -qa | grep -i mysql # -i 忽略大小寫 檢查mysql service: systemctl status mysqld.service ...
  • 資料庫作為數據驅動業務創新和智慧銀行建設的關鍵基礎設施,在銀行數字化變革中具有舉足輕重的作用。 在金融科技發展和國家政策引領下,銀行紛紛加快推進數字化轉型時代,正在經歷一場以科技引領、數據賦能、數字經營為目標的智慧銀行數字化變革。資料庫作為數據驅動業務創新和智慧銀行建設的關鍵基礎設施,在銀行數字化變 ...
  • 本文分享自華為雲社區《面試必問 | 聊聊MySQL三大核心日誌的實現原理?》,作者:冰 河。 MySQL幾乎成為互聯網行業使用的最多的開源關係型資料庫,正因如此,MySQL也成為各大互聯網公司面試中必問的資料庫,尤其是MySQL中的事務實現機制和三大核心日誌的實現原理。 今天,我們就重點聊聊MySQ ...
  • 近期,Apache DolphinScheduler 社區激動地宣佈 3.2.1 版本的發佈。此次更新不僅著力解決了前一版本(3.2.0)中遺留的問題,而且引入了一系列的功能增強和優化措施。 原先的問題主要源於部分重要代碼在發佈過程中未能成功合併(cherry-pick),加之這部分代碼的合併過程較 ...
一周排行
    -Advertisement-
    Play Games
  • C#.Net的BCL提供了豐富的類型,最基礎的是值類型、引用類型,而他們的共同(隱私)祖先是 System.Object(萬物之源),所以任何類型都可以轉換為Object。 ...
  • 最近有群友咨詢C#如何調用Python?小編嘗試Python.NET過程中遭遇的版本相容性和環境配置難題,小編決定尋找一個更為簡單、穩定且對初學者友好的解決方案。小編搜索一番,除了Python.NET之外,還有其他途徑能夠幫助我們輕鬆地在C#項目調用Python腳本,那就是通過命令行調用,使用 Sy ...
  • .NET中特性+反射 實現數據校驗 在.NET中,我們可以使用特性+反射來實現數據校驗。特性是一種用於為程式中的代碼添加元數據的機制。元數據是與程式中的代碼相關聯的數據,但不直接成為代碼的一部分。通過特性,我們可以為類、方法、屬性等添加額外的信息,這些信息可以在運行時通過反射獲取和使用。 對反射不太 ...
  • Biwen.Settings 是一個簡易的配置項管理模塊,主要的作用就是可以校驗並持久化配置項,比如將自己的配置存儲到資料庫中,JSON文件中等 使用上也是很簡單,只需要在服務中註入配置, 比如我們有一個GithubSetting的配置項,我們只需要定義好對象然後註入到Service中即可: [De ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 前言 VB.NET,全名Visual Basic .NET,是Microsoft .NET框架的一部分,是一種面向對象的編程語言。它繼承了Visual Basic的易用性,同時增加了對面向對象編程的支持。VB.NET提供了大量的內置函數,使得開發者可以更容易地處理字元串、數學計算、文件和目錄訪問等任 ...
  • 自定義可移動點二維坐標軸控制項 目錄 路由參數 坐標軸控制項定義 Demo 路由參數 X_YResultCollection為當前X軸對應Y軸值存儲字典 public class ResultCollectionChangedEventArgs(RoutedEvent routedEvent, obje ...
  • 自定義分頁控制項 tip: 該控制項的樣式用的是materialDesign庫,需要下載Nuget包 Code Xaml <UserControl x:Class="TestTool.CustomControls.PagingControl" xmlns="http://schemas.microsof ...
  • 最近群里有個小伙伴把Dapper遷移SqlSugar幾個不能解決的問題進行一個彙總,我正好寫一篇文章來講解一下 一、sql where in傳參問題: SELECT * FROM users where id IN @ids 答: SqlSugar中應該是 var sql="SELECT * FRO ...
  • 安裝nuget包 Wesky.Net.OpenTools 1.0.8或以上版本。支持.net framework 4.6以上版本,以及所有.net core以及以上版本引用。 開發一個簡單的Winform界面,用來測試使用。如需該winform的demo,可以在公眾號【Dotnet Dancer】後 ...