2020-3-18 前端達(dá)人
好,下面我將結(jié)合一些實(shí)例,說一下我對(duì)組合模式以及觀察者模式的了解:
1、組合模式:
組合模式在對(duì)象間形成樹形結(jié)構(gòu);
組合模式中基本對(duì)象和組合對(duì)象被一致對(duì)待;
無須關(guān)心對(duì)象有多少層, 調(diào)用時(shí)只需在根部進(jìn)行調(diào)用;
將多個(gè)對(duì)象的功能,組裝起來,實(shí)現(xiàn)批量執(zhí)行;
想象我們現(xiàn)在手上有個(gè)萬能遙控器, 當(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 = []; } // 用來組合的功能,接收要組合的對(duì)象 add(task){ // 向容器中填入,將來準(zhǔn)備批量使用的對(duì)象 this.skills.push(task); } // 用來批量執(zhí)行的功能 action(){ // 拿到容器中所有的對(duì)象,才能批量執(zhí)行 this.skills.forEach( val => { val.init(); } ); } } // 創(chuàng)建一個(gè)組合器 var c = new Comb(); // 提前將,將來要批量操作的對(duì)象,組合起來 c.add( new GoHome() ); c.add( new OpenComputer() ); c.add( new OpenMusic() ); // 等待何時(shí)的時(shí)機(jī),執(zhí)行組合器的啟動(dòng)功能 c.action(); // 在內(nèi)部,會(huì)自動(dòng)執(zhí)行所有已經(jīng)組合起來的對(duì)象的功能
由此,我們可以總結(jié)一下組合模式的特點(diǎn)
:
1.批量執(zhí)行
2.啟動(dòng)一個(gè)方法,會(huì)遍歷多個(gè)方法,同時(shí)執(zhí)行,有點(diǎn)類似于遞歸的感覺
3.組合模式略微耗性能,但是執(zhí)行方便
目前只是一個(gè)基礎(chǔ)組合。
高級(jí)組合:
1.組合成樹狀結(jié)構(gòu),每個(gè)對(duì)象下,還會(huì)有自己的子對(duì)象
2.如果執(zhí)行了父對(duì)象的某個(gè)方法,所有的子對(duì)象會(huì)跟隨執(zhí)行
3.組合模式一般建議使用在動(dòng)態(tài)的html結(jié)構(gòu)上,因?yàn)榻M合模式的結(jié)構(gòu)和html的結(jié)構(gòu),出奇的一致
4.基本對(duì)象和組合對(duì)象被一致對(duì)待, 所以要保證基本對(duì)象(葉對(duì)象)和組合對(duì)象具有一致方法
2、觀察者模式:
觀察者模式也叫也叫Observer模式、訂閱/發(fā)布模式,也是由GoF提出的23種軟件設(shè)計(jì)模式的一種。
觀察者模式是行為模式之一,它的作用是當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生變化時(shí),能夠自動(dòng)通知其他關(guān)聯(lián)對(duì)象,自動(dòng)刷新對(duì)象狀態(tài),或者說執(zhí)行對(duì)應(yīng)對(duì)象的方法(主題數(shù)據(jù)改變,通知其他相關(guān)個(gè)體,做出相應(yīng)的數(shù)據(jù)更新)。
這種設(shè)計(jì)模式可以大大降低程序模塊之間的耦合度,便于更加靈活的擴(kuò)展和維護(hù)。
以觀察的角度,發(fā)現(xiàn)對(duì)應(yīng)的狀況,處理問題。
觀察者模式包含兩種角色:
①觀察者(訂閱者):會(huì)隨時(shí)更新自身的信息或狀態(tài)(訂閱者可以隨時(shí)加入或離開);
②被觀察者(發(fā)布者):接收到發(fā)布者發(fā)布的信息,從而做出對(duì)應(yīng)的改變或執(zhí)行。
很方便的實(shí)現(xiàn)簡單的廣播通信,實(shí)現(xiàn)一對(duì)多的對(duì)應(yīng)關(guān)系。
核心思想:觀察者只要訂閱了被觀察者的事件,那么當(dāng)被觀察者的狀態(tài)改變時(shí),被觀察者會(huì)主動(dòng)去通知觀察者,而無需關(guān)心觀察者得到事件后要去做什么,實(shí)際程序中可能是執(zhí)行訂閱者的回調(diào)函數(shù)。
Javascript中實(shí)現(xiàn)一個(gè)例子:
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.ssll180.com