基于chromium内核的history栈检测canGoBack和canGoForward

想起了很久之前别人问我的一个问题，当时马马虎虎地说了一下也没去细看，功能是说在页面上实现读取浏览器history进行向浏览器地址栏左边的“前进”或者“后退”的问题。正好有时间，研究了一下。
如果开发者想单纯的控制“后退”和“前进”，很简单，history 库提供了三个接口：

history.go(n)  //n层级
history.goBack()
history.goForward()
1
2
3

但是为了在不能当前页面“后退”或“前进”时 disabled相应的按钮，就需要判断是否可以canGo。 history库确实提供了一个方法，但是只能在 createMemoryHistory情况下时使用：

history.canGo(n)    //(只在createMemoryHistory下)
1

常用的 createBrowserHistory 和 createHashHistory 并没有提供这个方法，所以只能自己实现。
首先需了解 history stack 的形成过程，参考了几篇文章，注文末。简单总结如下：
history stack 记录一个标签页访问的历史记录序列，指针指向当前激活的历史记录
增加历史记录
如果指针在栈顶，则新记录直接被推入栈顶 A [B] -> A B [C]
如果指针不在栈顶，则先移除指针后面的所有历史记录，再将新纪录推入栈顶 A [B] C -> A B [E]
前进后退，移动指针即可
后退 A B [C] -> A [B] C
前进 A [B] C -> A B [C]
根据这些就可以实现一个 HistoryStack 类来模拟真实的 history stack：

class HistoryStack {
  current: any;
  index: number;
  stack: any[];

  constructor() {
    this.current = null;
    this.index = -1;
    this.stack = [];
  }

  pop(loc: any) {
    if (!this.current || this.stack.length === 0) {
      this.current = loc;
      this.index = 0;
      this.stack = [loc];
    } else {
      const index = this.stack.findIndex((v) => v.hash === loc.hash);
      if (index > -1) {
        this.current = this.stack[index];
        this.index = index;
      } else {
        throw new Error('history stack not match!');
      }
    }
  }

  push(loc: any) {
    this.stack.splice(this.index + 1);
    this.stack.push(loc);
    this.current = loc;
    this.index = this.stack.length - 1;
  }

  canGo(num: number) {
    return Boolean(this.stack[this.index + num]);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

通过监听 history 的变化来同步更新 historyStack：

history.listen((loc, action) => {
  if (action === 'POP') {
    historyStack.pop(loc);
  } else if (action === 'PUSH') {
    historyStack.push(loc);
  }
});
1
2
3
4
5
6
7

最后只需要调用 historyStack.canGo() 方法即可。比如 canGoBack() 等价于canGo(-1)，canGoForward()等价于 canGo(1)。

注：因为需要对每个 history 记录有唯一标识，而 hashHistory 不支持 location.key，所以利用了用不上的的 hash 来作为唯一标识。

参考文章：
Chromium代码面向前端系列（1）：历史栈的形成
createWebHistory、createWebHashHistory、createMemoryHistory源码解析