設計模式#複合模式-js教程-PHP中文網

設計模式#複合模式

WBOY

發布： 2024-07-26 12:35:43

原創

487 人瀏覽過

Design Pattern # Composite Pattern

今天的文章是我們前端設計模式系列的一部分，我將解釋複合模式，探索現實世界的範例，並提供實踐的 JavaScript 實作。讓我們潛入吧！

複合模式是一種結構設計模式，它將物件組織成樹狀結構以表示整體部分層次結構。它可以幫助您以相同的方式處理單一物件和物件群組。此模式非常適合處理樹狀結構，例如使用者介面或組織層次結構。

在 JavaScript 中，可以透過建立一個基底元件類別來實現複合模式，該基底元件類別為簡單物件和複合物件定義公共介面。「葉子」物件代表組合中的最終對象，而複合對象可以包含其他葉子或複合對象。

真實案例場景

開發人員面臨的一個常見挑戰是管理具有嵌套元素的複雜 UI，例如帶有子選單的選單或帶有目錄和檔案的檔案系統。如果沒有結構化方法，程式碼可能會變得難以管理和擴展，從而導致潛在的錯誤和效率低下。

這就是複合模式發揮作用的地方。透過統一處理單一 UI 元素和元素群組，開發人員可以簡化嵌套元件的管理。例如，考慮一個選單系統，其中有兩種類型的元件：MenuItem 和 Menu。 MenuItem 代表單一選單項目，而 Menu 可以包含多個 MenuItem 物件和其他 Menu 物件。 MenuItem 和 Menu 都實作了一個公共接口，允許主選單統一對待它們。這種模式不僅使程式碼更易於管理，還增強了其可擴展性。

動手實踐

為了更好地理解複合模式，讓我們使用 JavaScript 實作一個簡單的範例。

// Component interface
class MenuComponent {
  add(component) {}
  remove(component) {}
  getChild(index) {}
  display() {}
}

// Leaf object
class MenuItem extends MenuComponent {
  constructor(name) {
    super();
    this.name = name;
  }

  display() {
    console.log(this.name);
  }
}

// Composite object
class Menu extends MenuComponent {
  constructor(name) {
    super();
    this.name = name;
    this.children = [];
  }

  add(component) {
    this.children.push(component);
  }

  remove(component) {
    this.children = this.children.filter(child => child !== component);
  }

  getChild(index) {
    return this.children[index];
  }

  display() {
    console.log(this.name);
    this.children.forEach(child => child.display());
  }
}

// Client code
const mainMenu = new Menu('Main Menu');
const menuItem1 = new MenuItem('Item 1');
const menuItem2 = new MenuItem('Item 2');
const subMenu = new Menu('Sub Menu');
const subMenuItem1 = new MenuItem('Sub Item 1');

mainMenu.add(menuItem1);
mainMenu.add(menuItem2);
mainMenu.add(subMenu);
subMenu.add(subMenuItem1);

// Display the menu structure
mainMenu.display();

登入後複製

讓我們分解一下程式碼：

MenuComponent: 這是基類，充當葉物件和複合物件的介面。它定義了add、remove、getChild、display等常用方法。

MenuItem: 此類別表示複合模式中的葉物件。它擴展了 MenuComponent 並實作了 display 方法來輸出其名稱。

Menu： 此類表示可以包含子層級（MenuItem 和其他 Menu 物件）的複合物件。它擴展了 MenuComponent 並實作了新增、刪除、檢索和顯示其子項目的方法。

客戶端程式碼： 此範例建立一個包含主選單、選單項目和子選單的選單結構。然後它會向主選單和子選單添加項目，最後顯示整個結構。