JavaScript組合模式的簡單介紹

這篇文章主要介紹“JavaScript組合模式的簡單介紹”，在日常操作中，相信很多人在JavaScript組合模式的簡單介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript組合模式的簡單介紹”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比象州網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式象州網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋象州地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

介  紹

組合模式（Composite）將對象組合成樹形結(jié)構(gòu)以表示“部分-整體”的層次結(jié)構(gòu)，組合模式使得用戶對單個對象和組合對象的使用具有一致性。

常見的場景有asp.net里的控件機制（即control里可以包含子control，可以遞歸操作、添加、刪除子control），類似的還有DOM的機制，一個DOM節(jié)點可以包含子節(jié)點，不管是父節(jié)點還是子節(jié)點都有添加、刪除、遍歷子節(jié)點的通用功能。所以說組合模式的關(guān)鍵是要有一個抽象類，它既可以表示子元素，又可以表示父元素。

正  文

舉個例子，有家餐廳提供了各種各樣的菜品，每個餐桌都有一本菜單，菜單上列出了該餐廳所偶的菜品，有早餐糕點、午餐、晚餐等等，每個餐都有各種各樣的菜單項，假設(shè)不管是菜單項還是整個菜單都應(yīng)該是可以打印的，而且可以添加子項，比如午餐可以添加新菜品，而菜單項咖啡也可以添加糖啊什么的。

這種情況，我們就可以利用組合的方式將這些內(nèi)容表示為層次結(jié)構(gòu)了。我們來逐一分解一下我們的實現(xiàn)步驟。

***步，先實現(xiàn)我們的“抽象類”函數(shù)MenuComponent：

var MenuComponent = function () {  };  MenuComponent.prototype.getName = function () {      throw new Error("該方法必須重寫!");  };  MenuComponent.prototype.getDescription = function () {      throw new Error("該方法必須重寫!");  };  MenuComponent.prototype.getPrice = function () {      throw new Error("該方法必須重寫!");  };  MenuComponent.prototype.isVegetarian = function () {      throw new Error("該方法必須重寫!");  };  MenuComponent.prototype.print = function () {      throw new Error("該方法必須重寫!");  };  MenuComponent.prototype.add = function () {      throw new Error("該方法必須重寫!");  };  MenuComponent.prototype.remove = function () {      throw new Error("該方法必須重寫!");  };  MenuComponent.prototype.getChild = function () {      throw new Error("該方法必須重寫!");  };

該函數(shù)提供了2種類型的方法，一種是獲取信息的，比如價格，名稱等，另外一種是通用操作方法，比如打印、添加、刪除、獲取子菜單。

第二步，創(chuà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個獲取信息的方法和print方法，沒有重載其它3個操作方法，因為基本菜品不包含添加、刪除、獲取子菜品的方式。

第三步，創(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;      }  };

注意上述代碼，除了實現(xiàn)了添加、刪除、獲取方法外，打印print方法是首先打印當(dāng)前菜品信息，然后循環(huán)遍歷打印所有子菜品信息。

第四步，創(chuàng)建指定的菜品：

我們可以創(chuàng)建幾個真實的菜品，比如晚餐、咖啡、糕點等等，其都是用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)建最***的菜單容器&mdash;&mdash;菜單本：

var Mattress = function (aMenus) {      this.aMenus = aMenus;  };  Mattress.prototype.printMenu = function () {      this.aMenus.print();  };

該函數(shù)接收一個菜單數(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控件開發(fā)的同學(xué)，是不是看起來很熟悉？

總  結(jié)

組合模式的使用場景非常明確：

  1. 你想表示對象的部分-整體層次結(jié)構(gòu)時；

  2. 你希望用戶忽略組合對象和單個對象的不同，用戶將統(tǒng)一地使用組合結(jié)構(gòu)中的所有對象（方法）

另外該模式經(jīng)常和裝飾者一起使用，它們通常有一個公共的父類（也就是原型），因此裝飾必須支持具有add、remove、getChild操作的 component接口。

到此，關(guān)于“JavaScript組合模式的簡單介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網(wǎng)頁標(biāo)題：JavaScript組合模式的簡單介紹
文章分享：http://muchs.cn/article0/pihioo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、建站公司、小程序開發(fā)、微信公眾號、用戶體驗、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司