JavaScript 设计模式之组合模式解析


Posted in Javascript onApril 09, 2010

怎么说呢?!就像是动物(组合对象)一样,当它生下后代(叶对象)时,它的后代就有了某种功能(比如:挖洞,听力好等等);也像是一棵树,它有一个根(组合对象)然后是从这个棵树向外冒出的其他枝杆(组合对象)以及从这些枝杆又向外长的叶子(叶对象)。换句话说,就是当祖先已经有了,那么只要从这个祖先衍生出来的其他孩子(包括这个祖先下的其他组合对象)已经就具备了某种功能,看上去貌似又有些像是继承。“组合模式”在组合对象的层次体系中有两种类型的对象:叶对象和组合对象。组合模式擅长于对大批对象进行操作。
“组合模式”就是在做一个项目的时候,我们要把在这个项目中即将出现的方法都在组合对象中定义(包括叶对象中的方法),而它们的叶对象将会继承组合对象。当组合对象被实例化后其叶对象的方法也相应地被实例化了。可能我说的有些乱,下面就用一个例子来说明吧。
“组合模式”是一种专为创建Web上的动态用户界面而量身定制的模式。使用这种模式,可以用一条命令在多个对象上激发复杂的或递归的行为。
使用“组合模式”可以为我们带来两大好处:
1、可以用同样的方法处理对象的集合与其中的特定子对象。
2、可以用来把一批子对象组织成树形结构,并且使整棵树都可以被遍历。
只有同时具备以下两个条件进才适合使用组合模式:
1、存在一批组织成某处层次体系的对象(具体结构可能在开发期间无法知道)。
2、希望对这批对象或其中的一部分对象实话一个操作。
下面看一下示例:
具体要求是做一个图片库且可以有选择地隐藏或显示图片库的特定部分。这可能是单独图片,也可能是图片库。现在就需要两个类来完成这个功能:用作图片库的组合对象类和用于图片本身的叶对象类,代码如下:
在上面的代码中,首先定义的是组合对象类和叶对象类应该实现的接口。除了常规的组合远景一分钱上,这些类要怕硬欺软 操作只包括hide和show。接下来我们定义叶对象。叶对象实现hide和show,代码如下:

var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); // 检查组合对象Composite应该具备的方法 
var GalleryItem = new Interface('GalleryItem', ['hide', 'show']); // 检查组合对象GalleryItem应该具备的方法 
// DynamicGallery Class 
var DynamicGallery = function(id){    // 实现Composite,GalleryItem组合对象类 
    this.children = [];     this.element = document.createElement('div'); 
    this.element.id = id; 
    this.element.className = 'dynamic-gallery'; 
} 
DynamicGallery.prototype = { 
    // 实现Composite组合对象接口 
    add : function(child){ 
        Interface.ensureImplements(child, Composite, DynamicGallery); 
        this.children.push(child); 
        this.element.appendChild(child.getElement()); 
    }, 
    remove : function(child){ 
        for(var node, i = 0; node = this.getChild(i); i++){ 
            if(node == child){ 
                this.children.splice(i, 1); 
                break; 
            } 
        } 
        this.element.removeChild(child.getElement()); 
    }, 
    getChild : function(i){ 
        return this.children[i]; 
    }, 
    // 实现DynamicGallery组合对象接口 
    hide : function(){ 
        for(var node, i = 0; node = this.getChild(i); i++){ 
            node.hide(); 
        } 
        this.element.style.display = 'none'; 
    }, 
    show : functioln(){ 
        this.element.style.display = 'block'; 
        for(var node, i = 0; node = getChild(i); i++){ 
            node.show(); 
        } 
    }, 
    // 帮助方法 
    getElement : function(){ 
        return this.element; 
    } 
}

以下是设置叶对象的相应方法:
// GalleryImage class 
var GalleryImage = function(src){    // 实现Composite和GalleryItem组合对象中所定义的方法 
    this.element = document.createElement('img'); 
    this.element.className = 'gallery-image'; 
    this.element.src = src; 
} 
GalleryImage.prototype = {     // 实现Composite接口 
    // 这些是叶结点,所以我们不用实现这些方法,我们只需要定义即可 
    add : function(){}, 
    remove : function(){}, 
    getChild : function(){}, 
    // 实现GalleryItem接口 
    hide : function(){ 
        this.element.style.display = 'none'; 
    }, 
    show : function(){ 
        this.element.style.display = ''; 
    }, 
    // 帮助方法 
    getElement : function(){ 
        return this.element; 
    } 
}

这是一个演示组合模式的工作方式的例子。每个类都很简单,但由于有了这样一种层次体系,我们就可以执行一些复杂操作。GalleryImage类的构造函数会创建一个image元素。这个类定义中的其余部分由空的组合对象方法(因为这是叶结点)和GalleryItem要求的操作组成。现在我们可以使用这两个类来管理图片:
var topGallery = new DynamicGallery('top-gallery'); 
topGallery.add(new GalleryImage('/img/image-1.jpg')); 
topGallery.add(new GalleryImage('/img/image-2.jpg')); 
topGallery.add(new GalleryImage('/img/image-3.jpg')); 
var vacationPhotos = new DyamicGallery('vacation-photos'); 
for(var i = 0, i < 30; i++){ 
    vacationPhotos.add(new GalleryImage('/img/vac/image-' + i + '.jpg')); 
} 
topGallery.add(vacationPhotos); 
topGallery.show(); 
vacationPhotos.hide();

组合模式之利,使用组合模式,简单的操作也能产生复杂的结果。不必编写大师手工遍历数组或其他数据结构的粘合代码,只需对最顶层的对象执行操作,主每一个子对象自己传递这个操作即可。这对于那些再三执行的操作尤其有用。在组合模式中,各个对象之间的耦合非常松散。每当对顶层组合对象执行一个操作时,实际上是在对整个结构进行尝试优先的搜索以查找节点。
组合模式之弊,由于对组合模式调用的任何操作都会被颇佳北至 它的所有子对象,如果这个层次体系很大的话,系统的性能将会受到影响。
Javascript 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
vue2中filter()的实现代码
Jul 09 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
vuex入门最详细整理
Mar 04 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
跟着Jquery API学Jquery之一 选择器
Apr 07 #Javascript
基于JQuery的cookie插件
Apr 07 #Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 #Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 #Javascript
jquery 学习笔记一
Apr 07 #Javascript
ext jquery 简单比较
Apr 07 #Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 #Javascript
You might like
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
SVG实现时钟效果
2018/07/17 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
商务主管岗位职责
2013/12/08 职场文书
高职教师岗位职责
2013/12/24 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
入党自我鉴定
2014/03/25 职场文书
升学宴答谢词
2015/01/05 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
Python源码解析之List
2021/05/21 Python