深入理解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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
什么是JavaScript
Aug 13 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
django创建自定义模板处理器的实例详解
2017/08/14 Python
pytorch permute维度转换方法
2018/12/14 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
python环境下安装opencv库的方法
2020/03/05 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
小学教师培训感言
2014/02/11 职场文书
市政管理求职信范文
2014/05/07 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python