深入理解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 相关文章推荐
非主流的textarea自增长实现js代码
Dec 20 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
js原生map实现的方法总结
Jan 19 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
python脚本替换指定行实现步骤
2017/07/11 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
python 实现登录网页的操作方法
2018/05/11 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
商务英语专业自荐信
2013/10/14 职场文书
高中家长寄语
2014/04/02 职场文书
《花木兰》教学反思
2014/04/09 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers