2020-3-18 前端達人
好，下面我將結合一些實例，說一下我對組合模式以及觀察者模式的了解：
1、組合模式：
組合模式在對象間形成樹形結構;
組合模式中基本對象和組合對象被一致對待;
無須關心對象有多少層, 調用時只需在根部進行調用;
將多個對象的功能，組裝起來，實現批量執行；
想象我們現在手上有個萬能遙控器, 當我們回家, 按一下開關, 下列事情將被執行:
到家了，開門
開電腦
開音樂
// 先準備一些需要批量執行的功能
class GoHome{
init(){
console.log("到家了，開門");
}
}
class OpenComputer{
init(){
console.log("開電腦");
}
}
class OpenMusic{
init(){
console.log("開音樂");
}
}
// 組合器，用來組合功能
class Comb{
constructor(){
// 準備容器，用來防止將來組合起來的功能
this.skills = [];
}
// 用來組合的功能，接收要組合的對象
add(task){
// 向容器中填入，將來準備批量使用的對象
this.skills.push(task);
}
// 用來批量執行的功能
action(){
// 拿到容器中所有的對象，才能批量執行
this.skills.forEach( val => {
val.init();
} );
}
}
// 創建一個組合器
var c = new Comb();
// 提前將，將來要批量操作的對象，組合起來
c.add( new GoHome() );
c.add( new OpenComputer() );
c.add( new OpenMusic() );
// 等待何時的時機，執行組合器的啟動功能
c.action();
// 在內部，會自動執行所有已經組合起來的對象的功能
由此，我們可以總結一下組合模式的特點：
1.批量執行
2.啟動一個方法，會遍歷多個方法，同時執行，有點類似于遞歸的感覺
3.組合模式略微耗性能，但是執行方便
目前只是一個基礎組合。
高級組合：
1.組合成樹狀結構，每個對象下，還會有自己的子對象
2.如果執行了父對象的某個方法，所有的子對象會跟隨執行
3.組合模式一般建議使用在動態的html結構上，因為組合模式的結構和html的結構，出奇的一致
4.基本對象和組合對象被一致對待, 所以要保證基本對象(葉對象)和組合對象具有一致方法
2、觀察者模式：
觀察者模式也叫也叫Observer模式、訂閱/發布模式，也是由GoF提出的23種軟件設計模式的一種。
觀察者模式是行為模式之一，它的作用是當一個對象的狀態發生變化時，能夠自動通知其他關聯對象，自動刷新對象狀態，或者說執行對應對象的方法（主題數據改變，通知其他相關個體，做出相應的數據更新）。
這種設計模式可以大大降低程序模塊之間的耦合度，便于更加靈活的擴展和維護。
以觀察的角度，發現對應的狀況，處理問題。
觀察者模式包含兩種角色：
①觀察者（訂閱者）：會隨時更新自身的信息或狀態（訂閱者可以隨時加入或離開）；
②被觀察者（發布者）：接收到發布者發布的信息，從而做出對應的改變或執行。
很方便的實現簡單的廣播通信，實現一對多的對應關系。
核心思想：觀察者只要訂閱了被觀察者的事件，那么當被觀察者的狀態改變時，被觀察者會主動去通知觀察者，而無需關心觀察者得到事件后要去做什么，實際程序中可能是執行訂閱者的回調函數。
Javascript中實現一個例子：