定義和特點

訪問者模式是一種行為型設計模式，用于將算法與對象結構分離。 該模式允許你定義新的操作（訪問者）而無需修改現(xiàn)有對象結構（被訪問者）。 通過這種方式，你可以在不改變對象結構的情況下添加新的操作。

參與者

在訪問者模式中，有兩個主要角色：被訪問者和訪問者。

• 被訪問者：一個具有一組**元素和方法(method)**的對象結構。
• 訪問者：一個能夠對這些元素執(zhí)行不同**操作(visit)**的對象。
• 被訪問者提供了**接受(accept)**訪問者的方法，以便訪問者能夠在需要時訪問元素。

使用流程

• 首定義訪問者接口，其中包含一組訪問方法，每個方法對應一種操作。
• 在被訪問者接口中添加一個接受訪問者的方法accept，以便訪問者可以訪問被訪問者的元素。
• 被訪問者的具體實現(xiàn)類需要實現(xiàn)這個接收訪問者的方法，并**將自身作為參數(shù)(this)**傳遞給訪問者的具體訪問方法。
• 創(chuàng)建一個具體的訪問者對象v，并將其傳遞給被訪問者的接受方法,即accept(v)
• 被訪問者將根據(jù)傳遞的訪問者對象調用相應的訪問方法，從而執(zhí)行特定的操作。 通過這種【改變新建不同結構的訪問者，而不修改被訪問者】的方式，你可以在不改變被訪問者的結構的情況下，為其添加新的操作。

通俗的理解

訪問者設計模式有兩個部分完成，在實現(xiàn)不同目標的過程中保持其中一方（被訪問者）的結構不變，只修改另外一方的結構（訪問者）。 也就是犧牲一個保全另外一個。

作用

訪問者模式允許你將算法與對象結構分離，并通過定義訪問者接口和被訪問者接口來實現(xiàn)多態(tài)性。 這種模式適用于需要對一個對象結構中的元素進行不同操作的場景，同時又希望保持對象結構的穩(wěn)定性。

舉例

// 被訪問者接口：點心店
interface Bakery {
  accept(visitor: CustomerVisitor): void;
  make(): string;
  makePlus(): string;
}
// 具體的被訪問者：圓點心店
class CirclePastry implements Bakery {
  // 被訪問者的接受方法
  accept(visitor: CustomerVisitor): void {
    // 將自身作為參數(shù)(this)傳遞給訪問者的具體訪問方法
    visitor?.visitCirclePastry(this);
  }
  make(): string {
    return "制作圓點心";
  }
  makePlus(): string {
    return "制作精品圓點心";
  }
}
// 具體的被訪問者：方點心店
class SquarePastry implements Bakery {
  accept(visitor: CustomerVisitor): void {
    visitor?.visitSquarePastry(this);
  }
  make(): string {
    return "制作方點心";
  }
  makePlus(): string {
    return "制作精品方點心";
  }
}
// 訪問者接口：顧客
interface CustomerVisitor {
  visitCirclePastry(pastry: CirclePastry): void;
  visitSquarePastry(pastry: SquarePastry): void;
}
// 具體的訪問者：點心愛好者
class PastryLover implements CustomerVisitor {
  visitCirclePastry(pastry: CirclePastry): void {
    console.log(`點心愛好者選擇了${pastry.make()}`);
  }
  visitSquarePastry(pastry: SquarePastry): void {
    console.log(`點心愛好者選擇了${pastry.make()}`);
  }
}
// 使用示例
const circlePastry: Bakery = new CirclePastry();
const squarePastry: Bakery = new SquarePastry();
const pastryLover: CustomerVisitor = new PastryLover();
circlePastry.accept(pastryLover); // 輸出：點心愛好者選擇了制作圓點心
squarePastry.accept(pastryLover); // 輸出：點心愛好者選擇了制作方點心
// 在保證被訪問者結構的不變的前提下通過修改訪問者的結構達到完成不同操作的目的
// 訪問者接口：高級顧客
interface CustomerVisitorPlus {
  visitCirclePastry(pastry: CirclePastry): void;
  visitSquarePastry(pastry: SquarePastry): void;
}
// 具體的訪問者：高級點心愛好者
class PastryLoverWithMoney implements CustomerVisitorPlus {
  visitCirclePastry(pastry: CirclePastry): void {
    console.log(`點心愛好者選擇了${pastry.makePlus()}`);
  }
  visitSquarePastry(pastry: SquarePastry): void {
    console.log(`點心愛好者選擇了${pastry.makePlus()}`);
  }
}
const pastryLoverWithMoney: PastryLoverWithMoney = new PastryLoverWithMoney();
circlePastry.accept(pastryLoverWithMoney); // 輸出：點心愛好者選擇了制作高級圓點心
squarePastry.accept(pastryLoverWithMoney); // 輸出：點心愛好者選擇了制作高級方點心
// 可以看出來circlePastry和squarePastry都被復用了

Babel插件中的使用

在 Babel 插件中修改 AST（抽象語法樹）時，通常會使用訪問者模式。

• 定義訪問者：定義一個訪問者對象，該對象包含用于處理不同類型的 AST 節(jié)點的方法。每個方法對應一種 AST 節(jié)點類型，該方法將被調用以訪問和處理相應類型的節(jié)點。
• 遍歷和修改 AST：通過使用 Babel 提供的遍歷器（@babel/traverse），可以遍歷整個 AST。在遍歷過程中，對于每個訪問到的節(jié)點，將根據(jù)節(jié)點的類型調用相應的訪問者方法。
• 修改 AST：在訪問者方法中，您可以對 AST 進行修改。這可以涉及更改節(jié)點屬性、替換節(jié)點、添加新節(jié)點等操作。通過修改 AST，插件可以實現(xiàn)源代碼的轉換和重寫。

應用場景

• DOM 操作：在瀏覽器中，DOM（文檔對象模型）表示網頁的結構和內容。使用訪問者模式，您可以定義一個訪問者對象，該對象可以遍歷 DOM 樹的節(jié)點，并執(zhí)行相應的操作。例如，可以創(chuàng)建一個訪問者來查找特定類型的節(jié)點、修改節(jié)點屬性或樣式，或執(zhí)行其他與 DOM 相關的操作。
• 數(shù)據(jù)結構操作：JavaScript 中有許多內置的數(shù)據(jù)結構，如數(shù)組、集合、映射等。通過使用訪問者模式，您可以定義一個訪問者對象，來對這些數(shù)據(jù)結構進行遍歷和操作。例如，可以創(chuàng)建一個訪問者來計算數(shù)組中的總和、過濾符合特定條件的元素，或者將映射轉換為另一種形式。
• 編譯器和解析器：在編譯器和解析器中，訪問者模式經常被用來處理抽象語法樹（AST）。通過定義訪問者對象，可以遍歷 AST 并執(zhí)行各種語義分析、優(yōu)化或代碼生成操作。這樣可以將復雜的編譯器邏輯分離到不同的訪問者方法中，使其更易于維護和擴展。
• 事件處理：在瀏覽器中，事件處理是非常常見的任務。訪問者模式可以用于處理不同類型的事件，并執(zhí)行相應的操作。例如，可以創(chuàng)建一個訪問者來處理鼠標事件、鍵盤事件或其他用戶交互事件。
• 數(shù)據(jù)校驗和驗證：當需要對數(shù)據(jù)進行復雜的校驗和驗證時，訪問者模式可以提供一種結構化的方法。您可以定義一個訪問者對象，該對象遍歷數(shù)據(jù)結構并執(zhí)行各種校驗邏輯。這樣可以將校驗邏輯從數(shù)據(jù)結構中分離出來，使其更加可維護和可擴展。

以上就是JS設計模式之訪問者模式的用法詳解的詳細內容，更多關于JS訪問者模式的資料請關注腳本之家其它相關文章！

最新評論