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

来源:https://www.cnblogs.com/ronaldo9ph/archive/2023/03/17/17225504.html
-Advertisement-
Play Games

組合模式(Composite Pattern)是一種結構型設計模式,它允許將對象組合成樹形結構,並且可以像操作單個對象一樣操作整個樹形結構。 組合模式的核心思想是將對象組織成樹形結構,其中包含組合對象和葉子對象兩種類型。組合對象可以包含葉子對象或其他組合對象,從而形成一個樹形結構。 組合模式可以應用 ...


組合模式(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); // 輸出樹形結構

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 摘要:DWS的PL/pgSQL函數/存儲過程中有一個特殊的語法PERFORM語法,用於執行語句但是丟棄執行結果的場景,常用於一些狀態判斷的場景。 本文分享自華為雲社區《GassDB(DWS)功能 -- 函數出參 #【玩轉PB級數倉GaussDB(DWS)】》,作者:譡里個檔。 DWS的PL/pgSQ ...
  • 大資管包括原銀保監監管下的銀行理財、信托、保險,原證監會監管下的公募基金、私募基金專戶及基金子公司、券商資管以及期貨資管。據統計,2022年底資管行業的資產管理規模也達到了136萬億元。 在《商業銀行理財業務監督管理辦法》《關於規範金融機構資產管理業務的指導意見》等理財新規、資管新規的要求下,大資管 ...
  • 數據湖作為新一代大數據基礎設施,近年來持續火熱,許多前線的同學都在討論數據湖應該怎麼建,許多企業也都在構建或者計劃構建自己的數據湖。基於此,自然引發了許多關於數據湖選型的討論和探究。但是經過搜索之後我們發現,網上現存的很多內容都是基於較早之前的開源信息做出的結論,在企業調研初期容易造成不准確的印象和 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 組件介紹 關於web端的右鍵功能常用的地方有表格的右鍵,或者tab標簽的右鍵等,本文記錄一下封裝一個右鍵菜單組件的思路步驟代碼。 程式員除了會用輪子,還要嘗試去貼合自己公司業務場景造輪子。 組件效果圖 我們先看一下右鍵組件的效果圖 組件分 ...
  • Vue進階 生命周期 組件運行的過程 組件的生命周期是:組件從創建->運行(渲染)->銷毀的整個過程,是一個時間段 如何監聽組件的不同時刻 vue框架為組件內置了不同時刻的生命周期函數,是他在關鍵時刻幫我們調用的一些特殊名稱的函數,生命周期函數會伴隨著組件的運行而自動調用。 created函數 組件 ...
  • 模板語法 插值語法 Mustache插值採用{{ }},用於解析標簽體內容,將Vue實例中的數據插入DOM中 <h1>Hello {{name}}</h1> 指令語法 指令用於解析標簽,是vue為開發者提供的一套模板語法,輔助開發者渲染頁面的基本結構。 (指令是vue開發中最基礎、最常用、最簡單的知 ...
  • uni-app 實現輪播圖組件父容器背景色隨圖片主題色改變 實現思路 1、獲取輪播圖主題色,通過 canvas 獲取圖片主題色。 2、隨著輪播圖組件圖片的輪播,動態設置父容器背景色為圖片的主題色。 實現代碼 <template> <view class="container"> <canvas ca ...
  • Vue是什麼? Vue是一套用於構建用戶界面的漸進式JavaScript框架 構建用戶界面:用vue往html頁面中填充數據 漸進式:Vue可以自底向上逐層的應用,從輕量小巧核心庫的簡單應用,到引入各式各樣插件的複雜應用。 框架:一整套現成的解決方案,遵守框架的規範,學習框架,就是學習框架中的規定用 ...
一周排行
    -Advertisement-
    Play Games
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...