SPA 路由記憶

starsfun 發布于2019-08-26 11:33 / 2741人閱讀

摘要：路由記憶名詞解釋在中后臺系統開發中，訪問任何頁面時，認證是永遠繞不過的檻。這個過程，暫且稱之為路由記憶，前面例子中的登錄頁面稱之為記憶節點。

SPA 路由記憶 名詞解釋

在中后臺系統開發中，訪問任何頁面時，認證是永遠繞不過的檻。以登錄為例，如果檢測出當前用戶未登錄，會強制跳轉到登錄頁面提示用戶進行登錄。登錄完成后，系統需要跳轉至用戶原先想訪問的頁面。這個過程，暫且稱之為路由記憶，前面例子中的登錄頁面稱之為記憶節點。

解決方案

由前面的例子我們不難得出路由記憶的關鍵邏輯：

進入記憶節點時記錄目標頁面

離開記憶節點時跳往目標頁面（如果存在）

// 目標頁面
const target = undefined;

但如此只能滿足存在一個記憶節點的應用，而實際開發中，我們可能需要多個記憶節點。當應用中存在多個記憶節點時，問題就會慢慢的浮現。

接下來，我們對上面的方案進行擴展。

記憶節點集合

首先，我們需要維護一個記憶節點的集合：

// 記憶節點集合
const nodes = [];

上次訪問記錄

在這之前我們得先思考一個問題：由記憶節點跳往記憶節點時，是否需要觸發路由記憶？

當然不需要！！！

當進入記憶節點時，我們首先得判斷上一個訪問頁面是否為記憶節點，是則忽略，否則記錄目標頁面。

在這之前，我們需要定義一個變量用來記錄上次訪問頁面，這個變量僅記錄上次訪問頁面即可，無論是否為記憶節點：

// 上次訪問頁面
const previous = undefined;

記錄目標頁面

為保證路由記憶結果的質量，我們需要對每次路由跳轉結束進行監控（不論成功、取消或者失敗）。

結合前面的例子，我們現在不難得出，只有在常規頁面進入記憶節點時，需要對目標頁面進行記錄。

/**
 * @param to {string} 去往頁面
 */
function mark (to) {
    // 備份上次訪問頁面，防止被覆寫
    const backup = previous;
    // 記錄上次訪問頁面
    previous = to;
    // 如果上一個訪問頁面是記憶節點，中斷函數
    if (~nodes.indexOf(backup)) return;
    // 如果去往頁面不是記憶節點，中斷函數
    if (!~nodes.indexOf(to)) return;
    // 記錄目標頁面
    target = backup;
}

跳往目標頁面

在每次路由跳轉之前，我們需要檢測是否是記憶節點進入常規頁面且是否存在目標頁面記錄，如果條件都滿足，則打斷原有操作跳往目標頁面，并清空目標頁面記錄。

/**
 * @param to {string} 去往頁面
 */
function check (to) {
    // 若目標頁面不存在，中斷函數
    if (!target) return;
    // 備份目標頁面，防止在使用之前被清空
    const backup = target;
    // 如果去往頁面是記憶節點，中斷函數
    if (~nodes.indexOf(to)) return;
    // 如果上次訪問不是記憶節點，中斷函數
    if (!~nodes.indexOf(previous)) return;
    // 清空目標記錄
    target = undefined;
    // 路由跳轉，假定執行函數為 navigate
    navigate(target);
}

代碼整合 ES5

var RouterMemory = function (nodes) {
    // 目標頁面
    this.target = undefined;
    // 上次訪問頁面
    this.previous = undefined;
    // 記憶節點集合
    this.nodes = nodes && nodes instanceof Array ? nodes : [];
}

/**
 * 記錄上次訪問及目標頁面
 * @param to {string} 去往頁面
 */
RouterMemory.prototype.mark = function (to) {
    // 備份上次訪問頁面，防止被覆寫
    var backup = this.previous;
    // 記錄上次訪問頁面
    this.previous = to;
    // 如果上一個訪問頁面是記憶節點，中斷函數
    if (~nodes.indexOf(backup)) return;
    // 如果去往頁面不是記憶節點，中斷函數
    if (!~nodes.indexOf(to)) return;
    // 記錄目標頁面
    this.target = backup;
}

/**
 * 跳往目標頁面
 * @param to {string} 去往頁面
 */
RouterMemory.prototype.check = function (to) {
    // 若目標頁面不存在，中斷函數
    if (!this.target) return;
    // 備份目標頁面，防止在使用之前被清空
    const backup = this.target;
    // 如果去往頁面是記憶節點，中斷函數
    if (~nodes.indexOf(to)) return;
    // 如果上次訪問不是記憶節點，中斷函數
    if (!~nodes.indexOf(this.previous)) return;
    // 清空目標頁面
    this.target = undefined;
    // 路由跳轉，假定執行函數為 navigate
    navigate(this.target);
}

ES Next

class RouterMemory {
    constructor (nodes) {
        // 目標頁面
        this.target = undefined;
        // 上次訪問頁面
        this.previous = undefined;
        // 記憶節點集合
        this.nodes = nodes && nodes instanceof Array ? nodes : [];
    }
    /**
    * @param to {string} 去往頁面
    */
    mark (to) {
        // 備份上次訪問頁面，防止被覆寫
        const backup = this.previous;
        // 記錄上次訪問頁面
        this.previous = to;
        // 如果上一個訪問頁面是記憶節點，中斷函數
        if (nodes.includes(backup)) return;
        // 如果去往頁面不是記憶節點，中斷函數
        if (!nodes.includes(to)) return;
        // 記錄目標頁面
        this.target = backup;
    }
    /**
    * @param to {string} 去往頁面
    */
    check (to) {
        // 若目標頁面不存在，中斷函數
        if (!this.target) return;
        // 備份目標頁面，防止在使用之前被清空
        const backup = this.target;
        // 如果去往頁面是記憶節點，中斷函數
        if (nodes.includes(to)) return;
        // 如果上次訪問不是記憶節點，中斷函數
        if (!nodes.includes(this.previous)) return;
        // 清空目標記錄
        this.target = undefined;
        // 路由跳轉，假定執行函數為 navigate
        navigate(this.target);
    }
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107108.html

react 項目構建

摘要：配置方式找到文件如需添加路由則在里面添加，同時需要后端更改配置除了上面的路徑，其他路徑全部指向單頁應用多路由預渲染指南使用說明源碼為方便快速構建項目，本例所有配置的代碼均放在項目中。寫在前面每次構建react項目的時候都會配置一大堆東西，時間久了就會忘記怎么配置。為了方便自己記憶也為了其他開發者在構建react應用時能夠快速開發，故作此記錄。本項目基于 create-react-...

ACb0y 2019-08-23 11:54 評論0 收藏0
Router入門0x201: 從 URL 到 SPA

摘要：的全稱是統一資源定位符英文，可以這么說，是一種標準，而網址則是符合標準的一種實現而已。渲染器，將組件渲染到頁面上。 0x000 概述從這一章開始就進入路由章節了，并不直接從如何使用react-route來講，而是從路由的概念和實現來講，達到知道路由的本質，而不是只知道如何使用react-route庫的目的，畢竟react-route只是一個庫，是路由的一個實現而已，而不是路由本身。 ...

honmaple 2019-08-26 12:20 評論0 收藏0
前端prerender-spa-plugin預渲染

摘要：預渲染構建階段生成匹配預渲染路徑的文件注意每個需要預渲染的路由都有一個對應的。使用安裝中引入代碼打包目錄模板頁面要預渲染的頁面路由默認掛在對象上，可以通過在預渲染頁面取值渲染時顯示瀏覽器窗口。 prerender-spa-plugin預渲染：構建階段生成匹配預渲染路徑的 html 文件（注意：每個需要預渲染的路由都有一個對應的html）。構建出來的 html 文件已有部分內容。 pre...

godiscoder 2019-08-23 15:16 評論0 收藏0
[譯]如何基于Laravel構建Vue應用（一）

摘要：使用能優雅的構建并且與單頁面應用程序完美結合。我們將重點關注所需的所有部分，然后在后續教程中，我們將進一步演示如何使用作為層。例如，如果用戶刷新路由，我們將需要匹配該路由并返回應用程序模板。運行應用程序該基礎用于構建具有和路由器的。使用Laravel能優雅的構建API并且與Vue單頁面應用程序（SPA）完美結合。在本教程中，我們將展示如何啟動和運行Vue路由器以及用于構建SPA的La...

Rocko 2019-07-01 12:42 評論0 收藏0
SPA那點事

摘要：單頁面應用的出現依然存在著爭議性，我們該如何看待他的兩面性呢接下來小生給大家總結一下他的優缺點。單頁面應用的優勢無刷新體驗沒有了令人詬病的頁面頻繁刷新，同時節約瀏覽器資源，路由響應比較及時，提升了用戶的體驗。前端猿一天不學習就沒飯吃了，后端猿三天不學習仍舊有白米飯擺于桌前。IT行業的快速發展一直在推動著前端技術棧在不斷地更新換代，前端的發展成了互聯網時代的一個縮影。而單頁面應用的發展...

PumpkinDylan 2019-08-01 17:39 評論0 收藏0