設計模式(10)[JS版]-JavaScript如何實現組合模式？？？

目錄

1?什么是組合模式

2?主要參與者

3?代碼實現

4?應用實例

4.1 表單驗證

4.1 圖片閱讀器

5?總結

1?什么是組合模式

組合模式允許創建具有屬性的對象，這些對象是原始項目或對象集合。集合中的每個項目本身可以容納其他集合，創建深度嵌套結構。

樹型控件是復合模式的一個完美例子。樹的節點要么包含一個單獨的對象（葉子節點），要么包含一組對象（節點的子樹）。組合模式用于簡單化，一致化對單組件和復合組件的使用；其實它就是一棵樹。

組合模式能對于工作能起到簡化作用，組合對象實現某一操作時，通過遞歸，向下傳遞到所有的組成對象，在存在大批對象時，假如頁面的包含許多擁有同樣功能的對象，只需要操作組合對象即可達到目標。在存在著某種的層次結構，并且其中的一部分要實現某些操作，即可使用組合模式。

組合模式中的所有節點都共享一組通用的屬性和方法，它既支持單個對象，也支持對象集合。這種共同的接口極大地促進了遞歸算法的設計和構建，這種算法可以對復合集合中的每個對象進行迭代。

實例場景：

1 自然界中的各種樹，樹長在大地人，樹頭(樹根)，即是入口點，這棵樹頭向上生長，即有自己的葉子，又有自己的子樹枝，某樹枝還有自己的葉子，跟子樹枝。

2? 操作系統目錄結構、公司部門組織架構、國家省市縣等，像這么看起來復雜的現象，都可以使用組合模式，即部分－整體模式來操作。

2?主要參與者

參與該模式的對象有：

Component ：聲明組成中對象的接口。

Leaf ：代表構圖中的葉子對象，一個葉子沒有子對象。

Composite ：表示組成中的分支（或子樹），維護一個子組件的集合。

3?代碼實現

在下邊的代碼中，Node（節點）對象創建了一個樹狀結構。每個節點都有一個名字和4個方法：add、remove、getChild和hasChildren。這些方法被添加到Node的原型中。這減少了對內存的要求，因為這些方法現在被所有節點共享。Node是完全遞歸的，不需要單獨的Component或Leaf對象。

通過向父節點添加節點來構建一個小型的復合樹。一旦完成，我們調用traverse，它將遍歷樹中的每個節點，并顯示其名稱和深度（通過縮進顯示）。日志函數用來記錄和顯示結果。

4?應用實例

4.1 表單驗證

演示地址：https://www.albertyy.com/2020/8/Component1.html

表單驗證中，需要做的工作是表單的保存、恢復和驗證表單中的值，然而表單的數量是未知數，類型是未知數，只有功能能確定，在這種情況下，使用組合模式無疑最好，通過給每個表單添加功能，然后一個表單對象組合起來，通過操作表單對象即可達到操作表單。

4.1 圖片閱讀器

演示地址：https://www.albertyy.com/2020/8/Component2.html

圖片閱讀器與表單驗證基本一樣，通過匯合操作圖片。

5?總結

組合模式通過簡單的操作就能達到復雜的效果，一個操作通過遍歷遞歸傳遞這個操作。不過組合模式的弱點也在于此，如果層次過多，則性能將受到影響。

組合模式應用需要符合兩個條件，一是產生遞歸，二是具有相同的動作。

今天的學習就到這里，你可以使用今天學習的技巧來改善一下你曾經的代碼，如果想繼續提高，歡迎關注我，每天學習進步一點點，就是領先的開始。如果覺得本文對你有幫助的話，歡迎，評論，轉發！！！

javaScript

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。