深入理解JavaScript：设计模式之组合模式

介  绍

组合模式（Composite）将对象组合成树形结构以表示“部分-整体”的层次结构，组合模式使得用户对单个对象和组合对象的使用具有一致性。

常见的场景有asp.net里的控件机制（即control里可以包含子control，可以递归操作、添加、删除子control），类似的还有DOM的机制，一个DOM节点可以包含子节点，不管是父节点还是子节点都有添加、删除、遍历子节点的通用功能。所以说组合模式的关键是要有一个抽象类，它既可以表示子元素，又可以表示父元素。

正  文

举个例子，有家餐厅提供了各种各样的菜品，每个餐桌都有一本菜单，菜单上列出了该餐厅所偶的菜品，有早餐糕点、午餐、晚餐等等，每个餐都有各种各样的菜单项，假设不管是菜单项还是整个菜单都应该是可以打印的，而且可以添加子项，比如午餐可以添加新菜品，而菜单项咖啡也可以添加糖啊什么的。

这种情况，我们就可以利用组合的方式将这些内容表示为层次结构了。我们来逐一分解一下我们的实现步骤。

***步，先实现我们的“抽象类”函数MenuComponent：

 
 
 
    
  
  
  
  1. var MenuComponent = function () {  
    2. 
  
  
  
  2. };  
    3. 
  
  
  
  3. MenuComponent.prototype.getName = function () {  
    4. 
  
  
  
  4.     throw new Error("该方法必须重写!");  
    5. 
  
  
  
  5. };  
    6. 
  
  
  
  6. MenuComponent.prototype.getDescription = function () {  
    7. 
  
  
  
  7.     throw new Error("该方法必须重写!");  
    8. 
  
  
  
  8. };  
    9. 
  
  
  
  9. MenuComponent.prototype.getPrice = function () {  
    10. 
  
  
  
  10.     throw new Error("该方法必须重写!");  
    11. 
  
  
  
  11. };  
    12. 
  
  
  
  12. MenuComponent.prototype.isVegetarian = function () {  
    13. 
  
  
  
  13.     throw new Error("该方法必须重写!");  
    14. 
  
  
  
  14. };  
    15. 
  
  
  
  15. MenuComponent.prototype.print = function () {  
    16. 
  
  
  
  16.     throw new Error("该方法必须重写!");  
    17. 
  
  
  
  17. };  
    18. 
  
  
  
  18. MenuComponent.prototype.add = function () {  
    19. 
  
  
  
  19.     throw new Error("该方法必须重写!");  
    20. 
  
  
  
  20. };  
    21. 
  
  
  
  21. MenuComponent.prototype.remove = function () {  
    22. 
  
  
  
  22.     throw new Error("该方法必须重写!");  
    23. 
  
  
  
  23. };  
    24. 
  
  
  
  24. MenuComponent.prototype.getChild = function () {  
    25. 
  
  
  
  25.     throw new Error("该方法必须重写!");  
    26. 
  
  
  
  26. }; 
    27.

该函数提供了2种类型的方法，一种是获取信息的，比如价格，名称等，另外一种是通用操作方法，比如打印、添加、删除、获取子菜单。

第二步，创建基本的菜品项：

 
 
 
    
  
  
  
  1. var MenuItem = function (sName, sDescription, bVegetarian, nPrice) {  
    2. 
  
  
  
  2.     MenuComponent.apply(this);  
    3. 
  
  
  
  3.     this.sName = sName;  
    4. 
  
  
  
  4.     this.sDescription = sDescription;  
    5. 
  
  
  
  5.     this.bVegetarian = bVegetarian;  
    6. 
  
  
  
  6.     this.nPrice = nPrice;  
    7. 
  
  
  
  7. };  
    8. 
  
  
  
  8. MenuItem.prototype = new MenuComponent();  
    9. 
  
  
  
  9. MenuItem.prototype.getName = function () {  
    10. 
  
  
  
  10.     return this.sName;  
    11. 
  
  
  
  11. };  
    12. 
  
  
  
  12. MenuItem.prototype.getDescription = function () {  
    13. 
  
  
  
  13.     return this.sDescription;  
    14. 
  
  
  
  14. };  
    15. 
  
  
  
  15. MenuItem.prototype.getPrice = function () {  
    16. 
  
  
  
  16.     return this.nPrice;  
    17. 
  
  
  
  17. };  
    18. 
  
  
  
  18. MenuItem.prototype.isVegetarian = function () {  
    19. 
  
  
  
  19.     return this.bVegetarian;  
    20. 
  
  
  
  20. };  
    21. 
  
  
  
  21. MenuItem.prototype.print = function () {  
    22. 
  
  
  
  22.     console.log(this.getName() + ": " + this.getDescription() + ", " + this.getPrice() + "euros");  
    23. 
  
  
  
  23. }; 
    24.

由代码可以看出，我们只重新了原型的4个获取信息的方法和print方法，没有重载其它3个操作方法，因为基本菜品不包含添加、删除、获取子菜品的方式。

第三步，创建菜品：

 
 
 
    
  
  
  
  1. var Menu = function (sName, sDescription) {  
    2. 
  
  
  
  2.     MenuComponent.apply(this);  
    3. 
  
  
  
  3.     this.aMenuComponents = [];  
    4. 
  
  
  
  4.     this.sName = sName;  
    5. 
  
  
  
  5.     this.sDescription = sDescription;  
    6. 
  
  
  
  6.     this.createIterator = function () {  
    7. 
  
  
  
  7.         throw new Error("This method must be overwritten!");  
    8. 
  
  
  
  8.     };  
    9. 
  
  
  
  9. };  
    10. 
  
  
  
  10. Menu.prototype = new MenuComponent();  
    11. 
  
  
  
  11. Menu.prototype.add = function (oMenuComponent) {  
    12. 
  
  
  
  12.     // 添加子菜品  
    13. 
  
  
  
  13.     this.aMenuComponents.push(oMenuComponent);  
    14. 
  
  
  
  14. };  
    15. 
  
  
  
  15. Menu.prototype.remove = function (oMenuComponent) {  
    16. 
  
  
  
  16.     // 删除子菜品  
    17. 
  
  
  
  17.     var aMenuItems = [];  
    18. 
  
  
  
  18.     var nMenuItem = 0;  
    19. 
  
  
  
  19.     var nLenMenuItems = this.aMenuComponents.length;  
    20. 
  
  
  
  20.     var oItem = null;  
    21. 
  
  
  
  21.  
    22. 
  
  
  
  22.     for (; nMenuItem < nLenMenuItems; ) {  
    23. 
  
  
  
  23.         oItem = this.aMenuComponents[nMenuItem];  
    24. 
  
  
  
  24.         if (oItem !== oMenuComponent) {  
    25. 
  
  
  
  25.             aMenuItems.push(oItem);  
    26. 
  
  
  
  26.         }  
    27. 
  
  
  
  27.         nMenuItem = nMenuItem + 1;  
    28. 
  
  
  
  28.     }  
    29. 
  
  
  
  29.     this.aMenuComponents = aMenuItems;  
    30. 
  
  
  
  30. };  
    31. 
  
  
  
  31. Menu.prototype.getChild = function (nIndex) {  
    32. 
  
  
  
  32.     //获取指定的子菜品  
    33. 
  
  
  
  33.     return this.aMenuComponents[nIndex];  
    34. 
  
  
  
  34. };  
    35. 
  
  
  
  35. Menu.prototype.getName = function () {  
    36. 
  
  
  
  36.     return this.sName;  
    37. 
  
  
  
  37. };  
    38. 
  
  
  
  38. Menu.prototype.getDescription = function () {  
    39. 
  
  
  
  39.     return this.sDescription;  
    40. 
  
  
  
  40. };  
    41. 
  
  
  
  41. Menu.prototype.print = function () {  
    42. 
  
  
  
  42.     // 打印当前菜品以及所有的子菜品  
    43. 
  
  
  
  43.     console.log(this.getName() + ": " + this.getDescription());  
    44. 
  
  
  
  44.     console.log("--------------------------------------------");  
    45. 
  
  
  
  45.  
    46. 
  
  
  
  46.     var nMenuComponent = 0;  
    47. 
  
  
  
  47.     var nLenMenuComponents = this.aMenuComponents.length;  
    48. 
  
  
  
  48.     var oMenuComponent = null;  
    49. 
  
  
  
  49.  
    50. 
  
  
  
  50.     for (; nMenuComponent < nLenMenuComponents; ) {  
    51. 
  
  
  
  51.         oMenuComponent = this.aMenuComponents[nMenuComponent];  
    52. 
  
  
  
  52.         oMenuComponent.print();  
    53. 
  
  
  
  53.         nMenuComponent = nMenuComponent + 1;  
    54. 
  
  
  
  54.     }  
    55. 
  
  
  
  55. }; 
    56.

注意上述代码，除了实现了添加、删除、获取方法外，打印print方法是首先打印当前菜品信息，然后循环遍历打印所有子菜品信息。

第四步，创建指定的菜品：

我们可以创建几个真实的菜品，比如晚餐、咖啡、糕点等等，其都是用Menu作为其原型，代码如下：

 
 
 
    
  
  
  
  1. var DinnerMenu = function () {  
    2. 
  
  
  
  2.     Menu.apply(this);  
    3. 
  
  
  
  3. };  
    4. 
  
  
  
  4. DinnerMenu.prototype = new Menu();  
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. var CafeMenu = function () {  
    7. 
  
  
  
  7.     Menu.apply(this);  
    8. 
  
  
  
  8. };  
    9. 
  
  
  
  9. CafeMenu.prototype = new Menu();  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11. var PancakeHouseMenu = function () {  
    12. 
  
  
  
  12.     Menu.apply(this);  
    13. 
  
  
  
  13. };  
    14. 
  
  
  
  14. PancakeHouseMenu.prototype = new Menu(); 
    15.

第五步，创建最***的菜单容器——菜单本：

 
 
 
    
  
  
  
  1. var Mattress = function (aMenus) {  
    2. 
  
  
  
  2.     this.aMenus = aMenus;  
    3. 
  
  
  
  3. };  
    4. 
  
  
  
  4. Mattress.prototype.printMenu = function () {  
    5. 
  
  
  
  5.     this.aMenus.print();  
    6. 
  
  
  
  6. }; 
    7.

该函数接收一个菜单数组作为参数，并且值提供了printMenu方法用于打印所有的菜单内容。

第六步，调用方式：

 
 
 
    
  
  
  
  1. var oPanCakeHouseMenu = new Menu("Pancake House Menu", "Breakfast");  
    2. 
  
  
  
  2. var oDinnerMenu = new Menu("Dinner Menu", "Lunch");  
    3. 
  
  
  
  3. var oCoffeeMenu = new Menu("Cafe Menu", "Dinner");  
    4. 
  
  
  
  4. var oAllMenus = new Menu("ALL MENUS", "All menus combined");  
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. oAllMenus.add(oPanCakeHouseMenu);  
    7. 
  
  
  
  7. oAllMenus.add(oDinnerMenu);  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. oDinnerMenu.add(new MenuItem("Pasta", "Spaghetti with Marinara Sauce, and a slice of sourdough bread", true, 3.89));  
    10. 
  
  
  
  10. oDinnerMenu.add(oCoffeeMenu);  
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12. oCoffeeMenu.add(new MenuItem("Express", "Coffee from machine", false, 0.99));  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14. var oMattress = new Mattress(oAllMenus);  
    15. 
  
  
  
  15. console.log("---------------------------------------------");  
    16. 
  
  
  
  16. oMattress.printMenu();  
    17. 
  
  
  
  17. console.log("---------------------------------------------"); 
    18.

熟悉asp.net控件开发的同学，是不是看起来很熟悉？

总  结

组合模式的使用场景非常明确：

  1. 你想表示对象的部分-整体层次结构时；
  2. 你希望用户忽略组合对象和单个对象的不同，用户将统一地使用组合结构中的所有对象（方法）

另外该模式经常和装饰者一起使用，它们通常有一个公共的父类（也就是原型），因此装饰必须支持具有add、remove、getChild操作的 component接口。

文章名称：深入理解JavaScript：设计模式之组合模式
当前网址：http://www.shufengxianlan.com/qtweb/news11/456911.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

微信公众号知识

行业网站建设

高端网站定制　　 　校园网站建设方案　　 　发光字制作　　 　成都联通服务器托管　　 　外贸网站设计方案　　 　雅安主机托管　　 　宜宾网站营销推广　　 　免备案虚拟主机　　 　成都品牌官网设计公司　　 　平昌做网站　　 　广安网站建设　　 　商城网站　　 　传美奇电器　　 　网站建设改版　　 　网络推广平台　　 　成都服务器托管　　 　h5响应式网站　　 　全网营销推广　　 　成都网站推广　　 　网站优化排名推广