【前端】--單頁面應用

来源:https://www.cnblogs.com/zjt-blogs/archive/2020/05/20/12922714.html
-Advertisement-
Play Games

單頁面應用 概念 什麼是單頁應用呢?單頁應用的全稱是 single-page application,簡稱 SPA,它是一種網站應用的模型,它可以動態重寫當前的頁面來與用戶交互,而不需要重新載入整個頁面。單頁應用的流暢性讓 Web 應用更像桌面端或 Native 應用了。相對於傳統的 Web 應用, ...


單頁面應用

概念

什麼是單頁應用呢?單頁應用的全稱是 single-page application,簡稱 SPA,它是一種網站應用的模型,它可以動態重寫當前的頁面來與用戶交互,而不需要重新載入整個頁面。單頁應用的流暢性讓 Web 應用更像桌面端或 Native 應用了。相對於傳統的 Web 應用,單頁應用做到了前後端分離,後端只負責處理數據提供介面,頁面邏輯和頁面渲染都交給了前端。前端發展到現在,單頁應用的使用已經很廣泛,目前時興的 React、Vue、Angular 等前端框架均採用了 SPA 原則。單頁應用意味著前端掌握了主動權,也讓前端代碼更複雜和龐大,模塊化、組件化以及架構設計都變得越來越重要。

工作原理

SPA 的一個重要實現就是改變路由時,頁面不刷新。實現這個功能,通常有兩種方式:使用 window.history 對象或 location.hash。

history 對象

window.history 包含了瀏覽器的歷史信息,它有以下幾種常用方法:

history.back():與在瀏覽器點擊後退按鈕相同;

history.forward():與在瀏覽器中點擊按鈕向前相同;

history.go(n):接受一個整數作為參數,移動到該整數指定的頁面,比如 go(1) 相當於 forward(),go(-1) 相當於 back(),go(0) 相當於刷新當前頁面。

HTML5 對 history 對象新增了 pushState() 和 replaceState() 方法,這兩個方法可以往歷史棧中添加數據,給用戶的感覺就是瀏覽器的 url 改變了,但是頁面並沒有重新載入。pushState() 是在瀏覽記錄中添加一個新記錄,replaceState() 則是修改當前的瀏覽器記錄,這是二者的細微差別,使用時參數的欄位和含義都是一樣的。

window.history.pushState(state, title, url)

state 是狀態對象,可以用 history.state 讀取;title 表示新頁面的標題,但是現在的所有瀏覽器都會忽略這個欄位,所以可以傳 null;url 是新頁面的地址,必須是和當前頁面在同一個域。當用戶點擊瀏覽器上的前進和後退按鈕時,或者調用上述 window.history 的 back、forward 和 go 方法,就會觸發 popstate 事件。該事件只針對同一個文檔,如果瀏覽歷史的切換導致載入了不同的文檔,popstate 事件將不會被觸發。popstate 事件回調函數的參數中的 state 屬性指向 pushState() 和 replaceState() 方法為當前頁面提供的狀態,也就是 pushState() 和 replaceState() 方法使用時傳的第一個參數 state。

hash

hash 是 location 對象的屬性,它指的是當前 url 的錨,也就是從 # 號開始的部分。修改 location.hash 並監聽 window 的 hashchange 事件,也能達到同樣的目的。

優缺點

SPA 可圈可點,現在已被大家廣泛使用,也得到了主流框架的支持,但是它也有局限性,我們將它的優缺點總結如下。

優點有:

無刷新體驗,用戶在切換頁面過程中不會頻繁被“打斷”,因為界面框架都在本地,對用戶的響應非常及時,因此提升了用戶體驗;

分離前後端關註點,前端負責界面顯示,後端負責數據存儲和計算,各司其職,不會把前後端的邏輯混雜在一起;

減輕伺服器壓力,伺服器只用出數據就可以,不用管展示邏輯和頁面合成,吞吐能力會提高幾倍;

API 共用,同一套後端程式代碼,不用修改就可以用於Web界面、手機、平板等多種客戶端;

完全的前端組件化,前端開發不再以頁面為單位,更多地採用組件化的思想,代碼結構和組織方式更加規範化,便於修改和調整。

缺點有:

對 SEO 不太優好,儘管可以通過 Prerender 預渲染優化等技術解決一部分,但是相對還是不容易索引到它;易出錯,需要使用程式管理前進、後退、地址欄等信息;


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

-Advertisement-
Play Games
更多相關文章
  • 第一種:Props / $emit 父傳子 Props // 父組件<template> <div id="app"> <users v-bind:users="users"></users>//前者自定義名稱便於子組件調用,後者要傳遞數據名 </div> </template> <script> ...
  • 在微信公眾號中,打開跳轉鏈接時會,瀏覽器底部分出現一個導航條,導致屏幕空間壓縮。網上有些人給出了js,vue的解決方案,那麼我貼一下angular版本的,希望能對你有所幫助。 代碼: export class RouteWithoutHistory extends PathLocationStrat ...
  • 1、完整代碼 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" c ...
  • 1 <!-- 參考教程:https://www.cnblogs.com/carekee/articles/1678041.html --> 2 <div id="time"></div> 3 <script> 4 time(); 5 setInterval(time,1000) 6 function ...
  • 對於新手小白來說學習Web前端開發,可能不知道從哪開始,總感覺無從下手,下麵給Web開發者整理了一份學習建議及路線圖,想要學習前端開發的東西可以借鑒學習一下。 其實想要學習Web前端開發的門檻還是挺低的, Web前端開發入門門檻低體現在HTML和CSS上,前者只是結構標簽,後者是樣式配置,入門是非常 ...
  • vue.config.js完整代碼如下: 'use strict'; // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require( ...
  • 有些情況下,希望點擊a鏈接不跳轉,可將href屬性設置為“javascript:;”,一般就可以了。 但下麵這種寫法: 仍然可點擊,會打開一個空白頁新鏈接,最後試了下,是因為target屬性導致的,將 去掉就可以了。 ...
  • 使用編輯器:Typora 下載官網:https://www.typora.io/ 學習教程:https://www.markdown.xyz/ 1、代碼塊 (1)源代碼模式 (2)菜單欄設置 菜單欄——【段落】—— 【代碼塊】 可自行選擇代碼語言 (3)快捷方式 英文輸入法狀態下,點擊三次 鍵盤數字 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...