深入理解JavaScript系列(40):设计模式之组合模式详解


Posted in Javascript onMarch 04, 2015

介绍

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

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

正文

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

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

第一步,先实现我们的“抽象类”函数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("该方法必须重写!");

};

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

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

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个操作方法,因为基本菜品不包含添加、删除、获取子菜品的方式。

第三步,创建菜品:

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 () {

    // 打印当前菜品以及所有的子菜品

    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;

    }

};

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

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

我们可以创建几个真实的菜品,比如晚餐、咖啡、糕点等等,其都是用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();

第五步,创建最顶级的菜单容器——菜单本:
var Mattress = function (aMenus) {

    this.aMenus = aMenus;

};

Mattress.prototype.printMenu = function () {

    this.aMenus.print();

};

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

第六步,调用方式:

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控件开发的同学,是不是看起来很熟悉?

总结

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

你想表示对象的部分-整体层次结构时;
你希望用户忽略组合对象和单个对象的不同,用户将统一地使用组合结构中的所有对象(方法)
另外该模式经常和装饰者一起使用,它们通常有一个公共的父类(也就是原型),因此装饰必须支持具有add、remove、getChild操作的 component接口。

Javascript 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
js 窗口抖动示例
Sep 04 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
百度地图自定义控件分享
Mar 04 #Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 #Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 #Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 #Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 #Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 #Javascript
jQuery插件开发的五种形态小结
Mar 04 #Javascript
You might like
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
Linux文件系统类型
2012/02/15 面试题
安全生产目标责任书
2014/04/14 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
九年级语文教学反思
2016/03/03 职场文书
MYSQL 运算符总结
2021/11/11 MySQL
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python