组合模式

1. 适合使用组合模式的条件：

存在一批组织成某种层次体系的对象，如树形结构（具体的结构在开发期间可能无法得知）
希望对这批对象或其中的一部分对象实施一个相同的操作

2. 注意点：

组合对象与其所有子对象具有相同的接口，但是叶对象并没有继承其上一级组合对象，不是超类与子类的关系

3. 例子：表单信息保存及恢复

可以指定整个表单保存输入数据，及恢复保存的数据，也可以只保存指定的一部分数据

<style>

    form {

        border: 6px double #9c9c9c;

        padding: 10px;

        margin: 10px;

    }

</style>

<body>

    <div class="box">

        <div class="child"></div>

    </div>

    <div id="feed-readers"></div>

</body>

<script>

// 用于实现类似继承的方法，这个是简化版，可以去前面的文章：JavaScript设计模式(1) 查看

function extend(subClass, superClass) {

    var F = function() {}

    F.prototype = superClass.prototype;

    subClass.prototype = new F();

    subClass.prototype.constructor = subClass;

}

// var Composite = new Interface('Composite', ['add', 'remove', 'getChild'])

// var FormItem = new Interface('FormItem', ['save', 'restore'])

// 存储要保存的数据

var DATA = {}

/**

* [CompositeForm 表单类]

*/

var CompositeForm = function(id, method, action) {

    this.formComponents = [];

    this.element = document.createElement('form')

    this.element.id = id;

    this.element.method = method || 'POST';

    this.element.action = action || '#';

    var bt1 = document.createElement('button')

    var bt2 = document.createElement('button')

    bt1.innerHTML = 'save'

    bt2.innerHTML = 'restore'

    bt1.addEventListener('click', this.save.bind(this))

    bt2.addEventListener('click', this.restore.bind(this))

    this.element.appendChild(bt1)

    this.element.appendChild(bt2)

};

CompositeForm.prototype.add = function(child) {

    // Interface.ensureImplements(child, Composite, FormItem)

    this.formComponents.push(child);

    this.element.appendChild(child.getElement())

};

CompositeForm.prototype.remove = function(child) {

    for(var i=0, len=this.formComponents.length; i<len; i++) {

        if(this.formComponents[i] === child) {

            this.formComponents.splice(i, 1);

            child.getElement().remove()

            break;

        }

    }

};

CompositeForm.prototype.getChild = function(i) {

    return this.formComponents[i];

};

CompositeForm.prototype.save = function(e) {

    e.preventDefault()

    DATA = {}

    for(var i=0, len=this.formComponents.length; i<len; i++) {

        this.formComponents[i].save()  // 组合模式遍历各个子对象并对他们调用同样的方法

    }

    console.log(DATA)

};

CompositeForm.prototype.restore = function(e) {

    e.preventDefault()

    for(var i=0, len=this.formComponents.length; i<len; i++) {

        this.formComponents[i].restore()

    }

}

CompositeForm.prototype.getElement = function() {

    return this.element;

};

/**

* [CompositeFieldset 表单域类]

*/

var CompositeFieldset = function(id, legendText) {

    this.components = {};

    this.element = document.createElement('fieldset')

    this.element.id = id;

    if(legendText) {

        this.legend = document.createElement('legend');

        this.legend.appendChild(document.createTextNode(legendText));

        this.element.appendChild(this.legend);

    }

    var bt1 = document.createElement('button')

    var bt2 = document.createElement('button')

    bt1.innerHTML = 'save'

    bt2.innerHTML = 'restore'

    bt1.addEventListener('click', this.save.bind(this))

    bt2.addEventListener('click', this.restore.bind(this))

    this.element.appendChild(bt1)

    this.element.appendChild(bt2)

}

CompositeFieldset.prototype.add = function(child) {

    // Interface.ensureImplements(child, Composite, FormItem)

    this.components[child.id] = child;

    this.element.appendChild(child.getElement())

}

CompositeFieldset.prototype.remove = function(child) {

    delete this.components[child.getElement().id];

    child.getElement().remove()

}

CompositeFieldset.prototype.getChild = function(id) {

    if(this.components[id] !== undefined) {

        return this.components[id]

    }else {

        return null

    }

}

CompositeFieldset.prototype.getElement = function() {

    return this.element;

}

CompositeFieldset.prototype.save = function(e) {

    if(e) e.preventDefault()

    for(var id in this.components) {

        if(!this.components.hasOwnProperty(id)) continue;

        this.components[id].save()

    }

    console.log(DATA)

}

CompositeFieldset.prototype.restore = function(e) {

    if(e) e.preventDefault()

    for(var id in this.components) {

        if(!this.components.hasOwnProperty(id)) continue;

        this.components[id].restore()

    }

}

/**

* [Field 叶子类，实现空方法]

*/

var Field = function(id) {

    this.id = id;

    this.element = null;

};

Field.prototype.add = function(){};

Field.prototype.remove = function(){};

Field.prototype.getChild = function(){};

Field.prototype.save = function() {

    DATA[this.id] = this.getValue()

}

Field.prototype.restore = function() {

    this.input.value = DATA[this.id]

}

Field.prototype.getElement = function() {

    return this.element;

}

Field.prototype.getVulue = function() {

    throw new Error('Unsupported operation on the class Field')

}

/**

* [InputField 输入类，继承至 Field]

*/

var InputField = function(id, label) {

    Field.call(this, id);

    this.input = document.createElement('input');

    this.input.id = id;

    this.label = document.createElement('label');

    this.label.innerHTML = label;

    this.element = document.createElement('div');

    this.element.className = 'input-field';

    this.element.appendChild(this.label);

    this.element.appendChild(this.input)

};

extend(InputField, Field)

InputField.prototype.getValue = function() {

    return this.input.value

}

// usage

var contactForm = new CompositeForm('contact-form', 'POST', 'www.baidu.com');

var input1 = new InputField('input1', 'input1')

var input2 = new InputField('input2', 'input2')

var input3 = new InputField('input3', 'input3')

var input4 = new InputField('input4', 'input4')

var firstFieldset = new CompositeFieldset('first-fieldset', 'first-fieldset')

firstFieldset.add(input1)

firstFieldset.add(input2)

var secondFieldset = new CompositeFieldset('second-fieldset', 'second-fieldset')

secondFieldset.add(input3)

secondFieldset.add(input4)

contactForm.add(firstFieldset)

contactForm.add(secondFieldset)

document.getElementById('feed-readers').appendChild(contactForm.getElement())

</script>

4. 例子：图片库

对照片进行隐藏和显示

<style>

    .dynamic-gallery {

        display: inline-block;

        margin: 30px;

        padding: 5px;

        border: 1px solid;

    }

    .gallery-image {

        width: 100px;

        border: 1px solid;

        padding: 5px;

        margin: 5px;

    }

    button {

        float: left;

    }

</style>

<body>

    <div id="feed-readers"></div>

</body>

<script>

// var Composite = new Interface('Composite', ['add', 'remove', 'getChild']);

// var GalleryItem = new Interface('GalleryItem', ['hide', 'show']);

var DynamicGallery = function(id) {

    this.children = [];

    this.element = document.createElement('div')

    this.element.id = id

    this.element.className = 'dynamic-gallery';

    this.element.appendChild(document.createTextNode(id))

}

DynamicGallery.prototype = {

    add: function(child) {

        // Interface.ensureImplement(chlid, Composite, GalleryItem);

        this.children.push(child);

        this.element.appendChild(child.getElement())

    },

    remove: function(child) {

        for(var i=0; i<this.children.length ;i++) {

            if(this.getChild(i) == child) {

                this.children.splice(i, 1);

                child.remove()

                break;

            }

        }

    },

    getChild: function(i) {

        if(this.children[i] !== undefined) {

            return this.children[i]

        }else {

            return null

        }

    },

    hide: function() {

        for(var i=0; i<this.children.length; i++) {

            this.getChild(i).hide()

        }

        // this.element.style.display = 'none'

    },

    show: function() {

        // this.element.style.display = 'inline-block'

        for(var i=0; i<this.children.length; i++) {

            // if(this.getChild(i) instanceof GalleryImage)

                this.getChild(i).show()

        }

    },

    getElement: function() {

        return this.element

    }

}

var GalleryImage = function(src) {

    this.element = document.createElement('img');

    this.element.className = 'gallery-image';

    this.element.src = src;

}

GalleryImage.prototype = {

    add: function(){},

    remove: function(){

        this.element.remove()

    },

    getChild: function(){},

    hide: function() {

        this.element.style.display = 'none'

    },

    show: function() {

        this.element.style.display = ''

    },

    getElement: function() {

        return this.element;

    }

}

var img1 = new GalleryImage('./images/bg4.jpg')

var img2 = new GalleryImage('./images/bg4.jpg')

var img3 = new GalleryImage('./images/bg4.jpg')

var img4 = new GalleryImage('./images/bg4.jpg')

var img5 = new GalleryImage('./images/bg4.jpg')

var img6 = new GalleryImage('./images/bg4.jpg')

var img7 = new GalleryImage('./images/bg4.jpg')

var img8 = new GalleryImage('./images/bg4.jpg')

var firstGallery = new DynamicGallery('first-gallery');

firstGallery.add(img1)

firstGallery.add(img2)

var secondGallery = new DynamicGallery('second-gallery');

secondGallery.add(img3)

secondGallery.add(img4)

var fourGallery = new DynamicGallery('fourGallery-gallery');

fourGallery.add(img5)

fourGallery.add(img6)

firstGallery.add(fourGallery)

var wrap = new DynamicGallery('wrap')

wrap.add(img7)

wrap.add(img8)

wrap.add(firstGallery)

wrap.add(secondGallery)

document.getElementById('feed-readers').appendChild(wrap.getElement())

wrap.hide()

</script>

5. 组合模式的利与弊

利：
- 不必编写大量手工遍历数组或其他数据结构的粘合代码，只需对最顶层对象执行操作就能把操作传递下去
- 各个对象之间的耦合非常松散，这促进了代码的重用，也有利于代码重构
- 用组合模式组织起来的对象形成了一个出色的层次体系，在这个层次体系中添加，删除和查找结点都非常容易
弊：
- 如果层次体系结构很大的话，系统的性能将会受到影响。
- 如果组合对象类和节点类都被用作 HTML 元素的包装工具，则需要准守 HTML 的使用规则来进行组合对象的嵌套
- 需要进行接口检查，确保添加的组合对象实现了对应的方法

注意

转载、引用，但请标明作者和原文地址

JavaScript设计模式(5)-组合模式的更多相关文章

JavaScript设计模式之----组合模式
javascript设计模式之组合模式介绍组合模式是一种专门为创建Web上的动态用户界面而量身制定的模式.使用这种模式可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更 ...
再起航，我的学习笔记之JavaScript设计模式15(组合模式)
组合模式组合模式(Composite): 又称部分-整体模式,将对象组合成树形结构以表示"部分整体"的层次结构.组合模式使得用户对单个对象和组合对象的使用具有一致性. 如果有一个 ...
JavaScript设计模式-14.组合模式实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
JavaScript设计模式-13.组合模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
从ES6重新认识JavaScript设计模式(三): 建造者模式
1 什么是建造者模式? 建造者模式(Builder)是将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示. 建造者模式的特点是分步构建一个复杂的对象,可以用不同组合或顺序建造出不 ...
C#设计模式(10)——组合模式（Composite Pattern）
一.引言在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象 ...
c++设计模式15 --组合模式
今天研究了一下设计模式15 组合模式本人是菜鸟一枚,所以一开始完全不懂组合究竟是什么意思.先上图一张,树形结构图: 文档说,如果想做出这样的结构,通常考虑组合模式.那是为什么呢?现在让我们看一下组合 ...
乐在其中设计模式(C#) - 组合模式(Composite Pattern)
原文:乐在其中设计模式(C#) - 组合模式(Composite Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 组合模式(Composite Pattern) 作者:weba ...
C#设计模式(10)——组合模式（Composite Pattern）（转）
一.引言在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象 ...

随机推荐

Selenium_Java版本安装及初试
[环境] ①JDK版本:jdk1.8.0_73 ②Eclipse:jee-mars-4.5.2 ③Selenium:selenium-java-3.5.3 ④GoogleChrome:60 ⑤chro ...
Halcon一日一练：CAD类型的相关操作
大很多场合,需要在视觉程序中导入CAD文档,比如,在3C行业,需要对手机外壳进行CNC加工,或者点胶操作,此时,需要获取产品的各个点的数据.如果将CAD直接导入,就会大的减少编程工作量,同时也能达到很 ...
利用ajax获取网页表单数据，并存储到数据库之一（使用JDBC）
所谓JDBC就是利用java与数据库相连接的技术,从数据库获取既有的信息或者把网页上的信息存储到数据库. 这里简单的介绍公司的一个小项目中的一部分,由于代码较多,所以用图片形式进行展示.源码请查看源码 ...
彻底理解 Android 中的阴影
如果我们想创造更好的 Android App,我相信我们需要遵循 Material Design 的设计规范.一般而言,Material Design 是一个包含光线,材质和投影的三维环境.如果我们想 ...
spring boot 使用java9上传到github其他人clone后报错
错误原因: Java.lang.NoClassDefFoundError:javax/xml/bind/JAXBException jdk9存在版本兼容问题. 经过查找资料发现问题所在大致意思是ja ...
Python自动化--语言基础4--模块、文件读写、异常
模块1.什么是模块?可以理解为一个py文件其实就是一个模块.比如xiami.py就是一个模块,想引入使用就在代码里写import xiami即可2.模块首先从当前目录查询,如果没有再按path顺序逐一 ...
Effective Java 第三版——33. 优先考虑类型安全的异构容器
Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...
Java经典编程题50道之三十五
有一个数组,将其最大的元素与第一个元素交换,最小的元素与最后一个元素交换,然后输出数组. public class Example35 { public static void main(Str ...
.net core 2.0学习笔记（二）：部署到Windows和Liunx系统
.Net Core最大的亮点就是跨平台了,下面介绍下在Windows下和Liunx下的部署. 首先发布项目文件,点击网站项目右键发布: 从下图发布的文件图片可以看出,不像以前bin目录下有很多dll ...
CSS布局(六) 对齐方式
一.水平居中: (1). 行内元素的水平居中? 如果被设置元素为文本.图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将子元素的display设置为inline ...

JavaScript设计模式(5)-组合模式

组合模式

1. 适合使用组合模式的条件：

2. 注意点：

3. 例子：表单信息保存及恢复

4. 例子：图片库

5. 组合模式的利与弊

JavaScript设计模式(5)-组合模式的更多相关文章

随机推荐

热门专题