前端設計模式——組合模式

組合模式（Composite Pattern）是一種結構型設計模式，它允許將對象組合成樹形結構，並且可以像操作單個對象一樣操作整個樹形結構。

組合模式的核心思想是將對象組織成樹形結構，其中包含組合對象和葉子對象兩種類型。組合對象可以包含葉子對象或其他組合對象，從而形成一個樹形結構。

組合模式可以應用於以下場景：

1. UI組件庫：例如在一個複雜的UI組件庫中，一個複雜的組件可以由多個子組件組成，而每個子組件又可以由更小的組件組成。這種情況下，可以使用組合模式將每個組件看作一個節點，從而構建一個樹形結構。
1. 樹形結構數據的處理：例如在一個文件管理器中，文件夾和文件可以看作是組合對象和葉子對象。通過組合模式，可以輕鬆地處理文件夾和文件的層級關係，同時可以對整個文件夾進行操作，比如複製、粘貼和刪除等。

實現組合模式通常有兩種方式：

1. 使用類繼承：通過定義一個抽象的 Component 類和兩個具體的 Composite 和 Leaf 類來實現。Composite 類繼承自 Component 類，並且擁有一個子節點列表。Leaf 類繼承自 Component 類，並且沒有子節點。這種方式的實現比較傳統，但是需要使用類繼承，可能會導致類層次結構比較複雜。
1. 使用對象組合：通過使用對象字面量和原型繼承等技術來實現。這種方式可以不需要類繼承，而是使用對象字面量和原型鏈來模擬組合模式的結構，比較靈活，但是代碼可能比較冗長。

下麵是一個使用對象字面量和原型繼承的組合模式實現示例：

// Component
const Component = {
  add: function () {},
  remove: function () {},
  getChild: function () {},
};

// Composite
function createComposite() {
  const composite = Object.create(Component);
  composite.children = [];

  composite.add = function (child) {
    this.children.push(child);
  };

  composite.remove = function (child) {
    const index = this.children.indexOf(child);
    if (index !== -1) {
      this.children.splice(index, 1);
    }
  };

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

  return composite;
}

// Leaf
function createLeaf() {
  const leaf = Object.create(Component);

  // Leaf 類實現自己的 add、remove、getChild 方法

  return leaf;
}

// 使用示例
const root = createComposite();
const branch1 = createComposite();
const branch2 = createComposite();
const leaf1 = createLeaf();
const leaf2 = createLeaf();
const leaf3 = createLeaf();

root.add(branch1);
root.add(branch2);
branch1.add(leaf1);
branch2.add(leaf2);
branch2.add(leaf3);

console.log(root); // 輸出樹形結構

上述示例中，通過使用對象字面量和原型繼承，模擬了組合模式的結構，從而實現了樹形結構的對象。在實際應用中，根據具體的需求和代碼架構，可以選擇適合自己的實現方式。