前端設計模式——解釋器模式

解釋器模式（Interpreter Pattern）：是一種行為型設計模式，它可以用來解決一些特定問題，例如編譯器、計算器等等。這種模式定義了一個語言的語法，並用一個解釋器來解釋語言中的表達式。

解釋器模式可以用來處理例如數據格式化、表單驗證等業務場景。在這些場景中，我們需要定義一些語法規則，然後使用解釋器來解釋這些規則。

解釋器模式的基本結構包括四個角色：抽象表達式、終結符表達式、非終結符表達式和上下文。

- 抽象表達式定義了一個抽象的介面，用於解釋表達式。
- 終結符表達式是最基本的表達式，它代表了語言中的一個單一的符號，例如一個變數或者一個數字。
- 非終結符表達式則是由多個終結符表達式組成的表達式，它代表了複雜的語言語法規則。
- 上下文用於存儲解釋器解釋時的中間結果。

在使用解釋器模式時，我們需要先定義好語言的語法規則，然後再根據這些規則創建相應的表達式對象，並將其組合成一個完整的表達式樹。最後，我們可以使用解釋器來解釋這棵表達式樹，並得到相應的結果。

以下是一個簡單的示例，演示瞭如何使用解釋器模式來處理一個簡單的算術表達式。在這個示例中，我們定義了一個語法規則，用於表示加法和減法運算，並使用解釋器模式來解釋這個表達式。

// 定義抽象表達式
class Expression {
  interpret() {}
}

// 定義終結符表達式
class NumberExpression extends Expression {
  constructor(number) {
    super();
    this.number = number;
  }

  interpret() {
    return this.number;
  }
}

// 定義非終結符表達式
class AddExpression extends Expression {
  constructor(left, right) {
    super();
    this.left = left;
    this.right = right;
  }

  interpret() {
    return this.left.interpret() + this.right.interpret();
  }
}

class SubtractExpression extends Expression {
  constructor(left, right) {
    super();
    this.left = left;
    this.right = right;
  }

  interpret() {
    return this.left.interpret() - this.right.interpret();
  }
}

// 定義上下文
class Context {
  constructor() {
    this.expression = null;
  }

  setExpression(expression) {
    this.expression = expression;
  }

  evaluate() {
    return this.expression.interpret();
  }
}

// 使用示例
const context = new Context();
const expression = new SubtractExpression(
  new AddExpression(new NumberExpression(10), new NumberExpression(5)),
  new NumberExpression(2)
);
context.setExpression(expression);
console.log(context.evaluate()); // 輸出 13

在這個示例中，我們定義了四個表達式類：Expression、NumberExpression、AddExpression 和 SubtractExpression，並分別實現了它們的 interpret() 方法。同時，我們還定義了一個上下文類 Context，用於存儲解釋器解釋時的中間結果。

在示例的最後，我們使用 SubtractExpression、AddExpression 和 NumberExpression等表達式對象來創建一個表達式樹，並將其存儲在上下文中。最後，我們使用 Context 對象的 evaluate()方法來求出表達式的值，並輸出結果。