您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScript組合模式的簡(jiǎn)單介紹”,在日常操作中,相信很多人在JavaScript組合模式的簡(jiǎn)單介紹問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”JavaScript組合模式的簡(jiǎn)單介紹”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
介 紹
組合模式(Composite)將對(duì)象組合成樹(shù)形結(jié)構(gòu)以表示“部分-整體”的層次結(jié)構(gòu),組合模式使得用戶對(duì)單個(gè)對(duì)象和組合對(duì)象的使用具有一致性。
常見(jiàn)的場(chǎng)景有asp.net里的控件機(jī)制(即control里可以包含子control,可以遞歸操作、添加、刪除子control),類(lèi)似的還有DOM的機(jī)制,一個(gè)DOM節(jié)點(diǎn)可以包含子節(jié)點(diǎn),不管是父節(jié)點(diǎn)還是子節(jié)點(diǎn)都有添加、刪除、遍歷子節(jié)點(diǎn)的通用功能。所以說(shuō)組合模式的關(guān)鍵是要有一個(gè)抽象類(lèi),它既可以表示子元素,又可以表示父元素。
正 文
舉個(gè)例子,有家餐廳提供了各種各樣的菜品,每個(gè)餐桌都有一本菜單,菜單上列出了該餐廳所偶的菜品,有早餐糕點(diǎn)、午餐、晚餐等等,每個(gè)餐都有各種各樣的菜單項(xiàng),假設(shè)不管是菜單項(xiàng)還是整個(gè)菜單都應(yīng)該是可以打印的,而且可以添加子項(xiàng),比如午餐可以添加新菜品,而菜單項(xiàng)咖啡也可以添加糖啊什么的。
這種情況,我們就可以利用組合的方式將這些內(nèi)容表示為層次結(jié)構(gòu)了。我們來(lái)逐一分解一下我們的實(shí)現(xiàn)步驟。
***步,先實(shí)現(xiàn)我們的“抽象類(lèi)”函數(shù)MenuComponent:
var MenuComponent = function () { }; MenuComponent.prototype.getName = function () { throw new Error("該方法必須重寫(xiě)!"); }; MenuComponent.prototype.getDescription = function () { throw new Error("該方法必須重寫(xiě)!"); }; MenuComponent.prototype.getPrice = function () { throw new Error("該方法必須重寫(xiě)!"); }; MenuComponent.prototype.isVegetarian = function () { throw new Error("該方法必須重寫(xiě)!"); }; MenuComponent.prototype.print = function () { throw new Error("該方法必須重寫(xiě)!"); }; MenuComponent.prototype.add = function () { throw new Error("該方法必須重寫(xiě)!"); }; MenuComponent.prototype.remove = function () { throw new Error("該方法必須重寫(xiě)!"); }; MenuComponent.prototype.getChild = function () { throw new Error("該方法必須重寫(xiě)!"); };
該函數(shù)提供了2種類(lèi)型的方法,一種是獲取信息的,比如價(jià)格,名稱等,另外一種是通用操作方法,比如打印、添加、刪除、獲取子菜單。
第二步,創(chuàng)建基本的菜品項(xiàng):
var MenuItem = function (sName, sDescription, bVegetarian, nPrice) { MenuComponent.apply(this); this.sName = sName; this.sDescription = sDescription; this.bVegetarian = bVegetarian; this.nPrice = nPrice; }; MenuItem.prototype = new MenuComponent(); MenuItem.prototype.getName = function () { return this.sName; }; MenuItem.prototype.getDescription = function () { return this.sDescription; }; MenuItem.prototype.getPrice = function () { return this.nPrice; }; MenuItem.prototype.isVegetarian = function () { return this.bVegetarian; }; MenuItem.prototype.print = function () { console.log(this.getName() + ": " + this.getDescription() + ", " + this.getPrice() + "euros"); };
由代碼可以看出,我們只重新了原型的4個(gè)獲取信息的方法和print方法,沒(méi)有重載其它3個(gè)操作方法,因?yàn)榛静似凡话砑?、刪除、獲取子菜品的方式。
第三步,創(chuàng)建菜品:
var Menu = function (sName, sDescription) { MenuComponent.apply(this); this.aMenuComponents = []; this.sName = sName; this.sDescription = sDescription; this.createIterator = function () { throw new Error("This method must be overwritten!"); }; }; Menu.prototype = new MenuComponent(); Menu.prototype.add = function (oMenuComponent) { // 添加子菜品 this.aMenuComponents.push(oMenuComponent); }; Menu.prototype.remove = function (oMenuComponent) { // 刪除子菜品 var aMenuItems = []; var nMenuItem = 0; var nLenMenuItems = this.aMenuComponents.length; var oItem = null; for (; nMenuItem < nLenMenuItems; ) { oItem = this.aMenuComponents[nMenuItem]; if (oItem !== oMenuComponent) { aMenuItems.push(oItem); } nMenuItem = nMenuItem + 1; } this.aMenuComponents = aMenuItems; }; Menu.prototype.getChild = function (nIndex) { //獲取指定的子菜品 return this.aMenuComponents[nIndex]; }; Menu.prototype.getName = function () { return this.sName; }; Menu.prototype.getDescription = function () { return this.sDescription; }; Menu.prototype.print = function () { // 打印當(dāng)前菜品以及所有的子菜品 console.log(this.getName() + ": " + this.getDescription()); console.log("--------------------------------------------"); var nMenuComponent = 0; var nLenMenuComponents = this.aMenuComponents.length; var oMenuComponent = null; for (; nMenuComponent < nLenMenuComponents; ) { oMenuComponent = this.aMenuComponents[nMenuComponent]; oMenuComponent.print(); nMenuComponent = nMenuComponent + 1; } };
注意上述代碼,除了實(shí)現(xiàn)了添加、刪除、獲取方法外,打印print方法是首先打印當(dāng)前菜品信息,然后循環(huán)遍歷打印所有子菜品信息。
第四步,創(chuàng)建指定的菜品:
我們可以創(chuàng)建幾個(gè)真實(shí)的菜品,比如晚餐、咖啡、糕點(diǎn)等等,其都是用Menu作為其原型,代碼如下:
var DinnerMenu = function () { Menu.apply(this); }; DinnerMenu.prototype = new Menu(); var CafeMenu = function () { Menu.apply(this); }; CafeMenu.prototype = new Menu(); var PancakeHouseMenu = function () { Menu.apply(this); }; PancakeHouseMenu.prototype = new Menu();
第五步,創(chuàng)建最***的菜單容器——菜單本:
var Mattress = function (aMenus) { this.aMenus = aMenus; }; Mattress.prototype.printMenu = function () { this.aMenus.print(); };
該函數(shù)接收一個(gè)菜單數(shù)組作為參數(shù),并且值提供了printMenu方法用于打印所有的菜單內(nèi)容。
第六步,調(diào)用方式:
var oPanCakeHouseMenu = new Menu("Pancake House Menu", "Breakfast"); var oDinnerMenu = new Menu("Dinner Menu", "Lunch"); var oCoffeeMenu = new Menu("Cafe Menu", "Dinner"); var oAllMenus = new Menu("ALL MENUS", "All menus combined"); oAllMenus.add(oPanCakeHouseMenu); oAllMenus.add(oDinnerMenu); oDinnerMenu.add(new MenuItem("Pasta", "Spaghetti with Marinara Sauce, and a slice of sourdough bread", true, 3.89)); oDinnerMenu.add(oCoffeeMenu); oCoffeeMenu.add(new MenuItem("Express", "Coffee from machine", false, 0.99)); var oMattress = new Mattress(oAllMenus); console.log("---------------------------------------------"); oMattress.printMenu(); console.log("---------------------------------------------");
熟悉asp.net控件開(kāi)發(fā)的同學(xué),是不是看起來(lái)很熟悉?
總 結(jié)
組合模式的使用場(chǎng)景非常明確:
你想表示對(duì)象的部分-整體層次結(jié)構(gòu)時(shí);
你希望用戶忽略組合對(duì)象和單個(gè)對(duì)象的不同,用戶將統(tǒng)一地使用組合結(jié)構(gòu)中的所有對(duì)象(方法)
另外該模式經(jīng)常和裝飾者一起使用,它們通常有一個(gè)公共的父類(lèi)(也就是原型),因此裝飾必須支持具有add、remove、getChild操作的 component接口。
到此,關(guān)于“JavaScript組合模式的簡(jiǎn)單介紹”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。