SPA 路由記憶

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

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

SPA 路由記憶 名詞解釋

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

解決方案

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

進(jìn)入記憶節(jié)點(diǎn)時(shí)記錄目標(biāo)頁(yè)面

離開記憶節(jié)點(diǎn)時(shí)跳往目標(biāo)頁(yè)面（如果存在）

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

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

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

記憶節(jié)點(diǎn)集合

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

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

上次訪問記錄

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

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

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

在這之前，我們需要定義一個(gè)變量用來記錄上次訪問頁(yè)面，這個(gè)變量?jī)H記錄上次訪問頁(yè)面即可，無論是否為記憶節(jié)點(diǎn)：

// 上次訪問頁(yè)面
const previous = undefined;

記錄目標(biāo)頁(yè)面

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

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

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

跳往目標(biāo)頁(yè)面

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

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

代碼整合 ES5

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

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

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

ES Next

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