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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
js 省地市级联选择
Feb 07 Javascript
XENON基于JSON变种
Jul 27 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
JavaScript如何实现图片处理与合成
May 29 Javascript
跟着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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
深入Python函数编程的一些特性
2015/04/13 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
国旗下演讲稿
2014/05/08 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
react中props 的使用及进行限制的方法
2021/04/28 Javascript