SPA 路由記憶

starsfun 發(fā)布于2019-08-26 11:33 / 2747人閱讀

摘要：路由記憶名詞解釋在中后臺系統(tǒng)開發(fā)中，訪問任何頁面時，認(rèn)證是永遠(yuǎn)繞不過的檻。這個過程，暫且稱之為路由記憶，前面例子中的登錄頁面稱之為記憶節(jié)點。

SPA 路由記憶 名詞解釋

在中后臺系統(tǒng)開發(fā)中，訪問任何頁面時，認(rèn)證是永遠(yuǎn)繞不過的檻。以登錄為例，如果檢測出當(dāng)前用戶未登錄，會強(qiáng)制跳轉(zhuǎn)到登錄頁面提示用戶進(jìn)行登錄。登錄完成后，系統(tǒng)需要跳轉(zhuǎn)至用戶原先想訪問的頁面。這個過程，暫且稱之為路由記憶，前面例子中的登錄頁面稱之為記憶節(jié)點。

解決方案

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

進(jìn)入記憶節(jié)點時記錄目標(biāo)頁面

離開記憶節(jié)點時跳往目標(biāo)頁面（如果存在）

// 目標(biāo)頁面
const target = undefined;

但如此只能滿足存在一個記憶節(jié)點的應(yīng)用，而實際開發(fā)中，我們可能需要多個記憶節(jié)點。當(dāng)應(yīng)用中存在多個記憶節(jié)點時，問題就會慢慢的浮現(xiàn)。

接下來，我們對上面的方案進(jìn)行擴(kuò)展。

記憶節(jié)點集合

首先，我們需要維護(hù)一個記憶節(jié)點的集合：

// 記憶節(jié)點集合
const nodes = [];

上次訪問記錄

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

當(dāng)然不需要?。?！

當(dāng)進(jìn)入記憶節(jié)點時，我們首先得判斷上一個訪問頁面是否為記憶節(jié)點，是則忽略，否則記錄目標(biāo)頁面。

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

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

記錄目標(biāo)頁面

為保證路由記憶結(jié)果的質(zhì)量，我們需要對每次路由跳轉(zhuǎn)結(jié)束進(jìn)行監(jiān)控（不論成功、取消或者失?。?。

結(jié)合前面的例子，我們現(xiàn)在不難得出，只有在常規(guī)頁面進(jìn)入記憶節(jié)點時，需要對目標(biāo)頁面進(jìn)行記錄。

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

跳往目標(biāo)頁面

在每次路由跳轉(zhuǎn)之前，我們需要檢測是否是記憶節(jié)點進(jìn)入常規(guī)頁面且是否存在目標(biāo)頁面記錄，如果條件都滿足，則打斷原有操作跳往目標(biāo)頁面，并清空目標(biāo)頁面記錄。

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

代碼整合 ES5

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

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

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

ES Next

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

GPU云服務(wù)器云服務(wù)器 spa single-spa 記憶 vps記憶

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107108.html

發(fā)表評論

登陸后可評論

0條評論

starsfun

男|高級講師

我要關(guān)注我要私信

TA的文章

基于主機(jī)名的虛擬主機(jī)服務(wù)怎么實現(xiàn)-虛擬主機(jī)怎么登陸圖解？

閱讀 1543·2021-09-22 15:35
LAMP Web一鍵安裝腳本 – Linux服務(wù)器安裝Apache/MySQL/PHP網(wǎng)站環(huán)境

閱讀 2020·2021-09-14 18:04
字蛛font-spider報錯,<web font not found>,碰到的最新問題

閱讀 896·2019-08-30 15:55
布局總結(jié)-水平居中布局的實現(xiàn)

閱讀 2463·2019-08-30 15:53
兩列自適應(yīng)布局方案整理

閱讀 2693·2019-08-30 12:45
JavaScript的數(shù)據(jù)類型及其檢測

閱讀 1213·2019-08-29 17:01
前端面試題1（HTML篇）

閱讀 2594·2019-08-29 15:30
偽類和偽元素的區(qū)別

閱讀 3525·2019-08-29 15:09

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

SPA 路由記憶

相關(guān)文章

react 項目構(gòu)建

Router入門0x201: 從 URL 到 SPA

**前端prerender-spa-plugin預(yù)渲染**

[譯]如何基于Laravel構(gòu)建Vue應(yīng)用（一）

SPA那點事

發(fā)表評論

0條評論

starsfun

男|高級講師

TA的文章

基于主機(jī)名的虛擬主機(jī)服務(wù)怎么實現(xiàn)-虛擬主機(jī)怎么登陸圖解？

LAMP Web一鍵安裝腳本 – Linux服務(wù)器安裝Apache/MySQL/PHP網(wǎng)站環(huán)境

字蛛font-spider報錯,<web font not found>,碰到的最新問題

布局總結(jié)-水平居中布局的實現(xiàn)

兩列自適應(yīng)布局方案整理

JavaScript的數(shù)據(jù)類型及其檢測

前端面試題1（HTML篇）

偽類和偽元素的區(qū)別

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

SPA 路由記憶

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！