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

开发 前端
组合模式(Composite)将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。详细请看下文

介  绍

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

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

正  文

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

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

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

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

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

第二步,创建基本的菜品项:

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

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

第三步,创建菜品:

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

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

第四步,创建指定的菜品:

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

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

第五步,创建最***的菜单容器——菜单本:

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

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

第六步,调用方式:

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

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

总  结

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

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

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

原文链接:http://www.cnblogs.com/TomXu/archive/2012/04/12/2435530.html

【编辑推荐】

  1. 深入理解JavaScript:设计模式之适配器模式
  2. JavaScript和Dojo引起浏览器内存泄露问题
  3. 在Eclipse中使用JSHint检查JavaScript
  4. 分享5个***的JavaScript日期处理类库
  5. JavaScript表格组件加载速度测试
责任编辑:林师授 来源: 汤姆大叔的博客
相关推荐

2012-04-12 09:33:02

JavaScript

2021-02-17 11:25:33

前端JavaScriptthis

2021-09-16 06:44:05

组合模式设计

2012-02-29 09:41:14

JavaScript

2015-09-08 13:39:10

JavaScript设计模式

2011-09-01 13:51:52

JavaScript

2012-12-25 09:38:41

JavaScript设计模式

2013-11-26 15:48:53

Android设计模式SDK

2015-11-04 09:57:18

JavaScript原型

2017-08-08 09:15:41

前端JavaScript页面渲染

2019-08-16 10:46:46

JavaScript工厂模式抽象工厂模式

2013-11-05 13:29:04

JavaScriptreplace

2019-11-05 10:03:08

callback回调函数javascript

2023-11-02 21:11:11

JavaScript设计模式

2012-01-05 15:07:11

JavaScript

2022-09-05 22:22:00

Stream操作对象

2017-04-25 15:30:23

堆栈函数JavaScript

2020-12-16 09:47:01

JavaScript箭头函数开发

2020-07-24 10:00:00

JavaScript执行上下文前端

2011-03-02 12:33:00

JavaScript
点赞
收藏

51CTO技术栈公众号