JS設(shè)計模式之單例模式、組合模式、觀察者模式、策略模式

2020-3-18    前端達(dá)人

好，下面我將結(jié)合一些實例，說一下我對組合模式以及觀察者模式的了解：



1、組合模式：



組合模式在對象間形成樹形結(jié)構(gòu);

組合模式中基本對象和組合對象被一致對待;

無須關(guān)心對象有多少層, 調(diào)用時只需在根部進(jìn)行調(diào)用;

將多個對象的功能，組裝起來，實現(xiàn)批量執(zhí)行；

想象我們現(xiàn)在手上有個萬能遙控器, 當(dāng)我們回家, 按一下開關(guān), 下列事情將被執(zhí)行:



到家了，開門

開電腦

開音樂




// 先準(zhǔn)備一些需要批量執(zhí)行的功能
class GoHome{
    init(){
        console.log("到家了，開門");
    }
}
class OpenComputer{
    init(){
        console.log("開電腦");
    }
}
class OpenMusic{
    init(){
        console.log("開音樂");
    }
}

// 組合器，用來組合功能
class Comb{
    constructor(){
        // 準(zhǔn)備容器，用來防止將來組合起來的功能
        this.skills = [];
    }
    // 用來組合的功能，接收要組合的對象
    add(task){
        // 向容器中填入，將來準(zhǔn)備批量使用的對象
        this.skills.push(task);
    }
    // 用來批量執(zhí)行的功能
    action(){
        // 拿到容器中所有的對象，才能批量執(zhí)行
        this.skills.forEach( val => {
            val.init();
        } );
    }
}

// 創(chuàng)建一個組合器
var c = new Comb();

// 提前將，將來要批量操作的對象，組合起來
c.add( new GoHome() );
c.add( new OpenComputer() );
c.add( new OpenMusic() );

// 等待何時的時機，執(zhí)行組合器的啟動功能
c.action();
    // 在內(nèi)部，會自動執(zhí)行所有已經(jīng)組合起來的對象的功能



由此，我們可以總結(jié)一下組合模式的特點：


1.批量執(zhí)行
2.啟動一個方法，會遍歷多個方法，同時執(zhí)行，有點類似于遞歸的感覺
3.組合模式略微耗性能，但是執(zhí)行方便
 目前只是一個基礎(chǔ)組合。
 高級組合：
1.組合成樹狀結(jié)構(gòu)，每個對象下，還會有自己的子對象
2.如果執(zhí)行了父對象的某個方法，所有的子對象會跟隨執(zhí)行
3.組合模式一般建議使用在動態(tài)的html結(jié)構(gòu)上，因為組合模式的結(jié)構(gòu)和html的結(jié)構(gòu)，出奇的一致
4.基本對象和組合對象被一致對待, 所以要保證基本對象(葉對象)和組合對象具有一致方法


2、觀察者模式：

觀察者模式也叫也叫Observer模式、訂閱/發(fā)布模式，也是由GoF提出的23種軟件設(shè)計模式的一種。
觀察者模式是行為模式之一，它的作用是當(dāng)一個對象的狀態(tài)發(fā)生變化時，能夠自動通知其他關(guān)聯(lián)對象，自動刷新對象狀態(tài)，或者說執(zhí)行對應(yīng)對象的方法（主題數(shù)據(jù)改變，通知其他相關(guān)個體，做出相應(yīng)的數(shù)據(jù)更新）。
這種設(shè)計模式可以大大降低程序模塊之間的耦合度，便于更加靈活的擴展和維護。
以觀察的角度，發(fā)現(xiàn)對應(yīng)的狀況，處理問題。
觀察者模式包含兩種角色：
①觀察者（訂閱者）：會隨時更新自身的信息或狀態(tài)（訂閱者可以隨時加入或離開）；
②被觀察者（發(fā)布者）：接收到發(fā)布者發(fā)布的信息，從而做出對應(yīng)的改變或執(zhí)行。
很方便的實現(xiàn)簡單的廣播通信，實現(xiàn)一對多的對應(yīng)關(guān)系。
核心思想：觀察者只要訂閱了被觀察者的事件，那么當(dāng)被觀察者的狀態(tài)改變時，被觀察者會主動去通知觀察者，而無需關(guān)心觀察者得到事件后要去做什么，實際程序中可能是執(zhí)行訂閱者的回調(diào)函數(shù)。
Javascript中實現(xiàn)一個例子：


分享本文至：

日歷

鏈接

個人資料

存檔