《javascript设计模式》笔记之第九章:组合模式
之前一直都是按照书的结构顺序做总结,觉得好像不是很好,现在试着完全按照自己的理解做总结。例子还是书上的例子。
二:组合模式的结构:

var Composite = new Interface('Composite', ['add', 'remove', 'getChild']);
var FormItem = new Interface('FormItem', ['save']);
var CompositeForm = function(id, method, action) { // implements Composite, FormItem
this.formComponents = []; this.element = document.createElement('form');
this.element.id = id;
this.element.method = method || 'POST';
this.element.action = action || '#';
}; 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 = , len = this.formComponents.length; i < len; i++) {
if(this.formComponents[i] === child) {
this.formComponents.splice(i, ); // Remove one element from the array at
// position i.
break;
}
}
}; CompositeForm.prototype.getChild = function(i) {
return this.formComponents[i];
}; CompositeForm.prototype.save = function() {
for(var i = , len = this.formComponents.length; i < len; i++) {
this.formComponents[i].save();
}
}; CompositeForm.prototype.getElement = function() {
return this.element;
};
var Field = function(id) { // implements Composite, FormItem
this.id = id;
this.element;
}; Field.prototype.add = function() {};
Field.prototype.remove = function() {};
Field.prototype.getChild = function() {}; Field.prototype.save = function() {
setCookie(this.id, this.getValue);
}; Field.prototype.getElement = function() {
return this.element;
}; Field.prototype.getValue = function() {
throw new Error('Unsupported operation on the class Field.');
};
var InputField = function(id, label) { // implements Composite, FormItem
Field.call(this, id); this.input = document.createElement('input');
this.input.id = id; this.label = document.createElement('label');
var labelTextNode = document.createTextNode(label);
this.label.appendChild(labelTextNode); this.element = document.createElement('div');
this.element.className = 'input-field';
this.element.appendChild(this.label);
this.element.appendChild(this.input);
};
extend(InputField, Field); // Inherit from Field. InputField.prototype.getValue = function() {
return this.input.value;
}; /* TextareaField class. */ var TextareaField = function(id, label) { // implements Composite, FormItem
Field.call(this, id); this.textarea = document.createElement('textarea');
this.textarea.id = id; this.label = document.createElement('label');
var labelTextNode = document.createTextNode(label);
this.label.appendChild(labelTextNode); this.element = document.createElement('div');
this.element.className = 'input-field';
this.element.appendChild(this.label);
this.element.appendChild(this.textarea);
};
extend(TextareaField, Field); // Inherit from Field. TextareaField.prototype.getValue = function() {
return this.textarea.value;
}; /* SelectField class. */ var SelectField = function(id, label) { // implements Composite, FormItem
Field.call(this, id); this.select = document.createElement('select');
this.select.id = id; this.label = document.createElement('label');
var labelTextNode = document.createTextNode(label);
this.label.appendChild(labelTextNode); this.element = document.createElement('div');
this.element.className = 'input-field';
this.element.appendChild(this.label);
this.element.appendChild(this.select);
};
extend(SelectField, Field); // Inherit from Field. SelectField.prototype.getValue = function() {
return this.select.options[this.select.selectedIndex].value;
};
var contactForm = new CompositeForm('contact-form', 'POST', 'contact.php'); contactForm.add(new InputField('first-name', 'First Name'));
contactForm.add(new InputField('last-name', 'Last Name'));
contactForm.add(new InputField('address', 'Address'));
contactForm.add(new InputField('city', 'City'));
contactForm.add(new SelectField('state', 'State', stateArray)); // var stateArray =
[{'al', 'Alabama'}, ...]
contactForm.add(new InputField('zip', 'Zip'));
contactForm.add(new TextareaField('comments', 'Comments')); addEvent(window, 'unload', contactForm.save);
var Composite = new Interface('Composite', ['add', 'remove', 'getChild']);
var GalleryItem = new Interface('GalleryItem', ['hide', 'show']);
var DynamicGallery = function(id) { // implements Composite, GalleryItem
this.children = []; this.element = document.createElement('div');
this.element.id = id;
this.element.className = 'dynamic-gallery';
} DynamicGallery.prototype = { // Implement the Composite interface. add: function(child) {
Interface.ensureImplements(child, Composite, GalleryItem);
this.children.push(child);
this.element.appendChild(child.getElement());
},
remove: function(child) {
for(var node, i = ; node = this.getChild(i); i++) {
if(node == child) {
this.formComponents[i].splice(i, );
break;
}
}
this.element.removeChild(child.getElement());
},
getChild: function(i) {
return this.children[i];
}, // Implement the GalleryItem interface. hide: function() {
for(var node, i = ; node = this.getChild(i); i++) {
node.hide();
}
this.element.style.display = 'none';
},
show: function() {
this.element.style.display = 'block';
for(var node, i = ; node = this.getChild(i); i++) {
node.show();
}
}, // Helper methods. getElement: function() {
return this.element;
}
};
var GalleryImage = function(src) { // implements Composite, GalleryItem
this.element = document.createElement('img');
this.element.className = 'gallery-image';
this.element.src = src;
} GalleryImage.prototype = { // Implement the Composite interface. add: function() {}, // This is a leaf node, so we don't
remove: function() {}, // implement these methods, we just
getChild: function() {}, // define them. // Implement the GalleryItem interface. hide: function() {
this.element.style.display = 'none';
},
show: function() {
this.element.style.display = ''; // Restore the display attribute to its
// previous setting.
}, // Helper methods. getElement: function() {
return this.element;
}
};
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 DynamicGallery('vacation-photos'); for(var i = ; i < ; i++) {
vacationPhotos.add(new GalleryImage('/img/vac/image-' + i + '.jpg'));
} topGallery.add(vacationPhotos);
topGallery.show(); // Show the main gallery,
vacationPhotos.hide(); // but hide the vacation gallery.
《javascript设计模式》笔记之第九章:组合模式的更多相关文章
- 设计模式之第22章-组合模式(Java实现)
设计模式之第22章-组合模式(Java实现) “鱼哥,有没有什么模式是用来处理树形的“部分与整体”的层次结构的啊.”“当然”“没有?”“有啊.别急,一会人就到了.” 组合模式之自我介绍 “请问你是?怎 ...
- Javascript设计模式理论与实战:组合模式
我们平时开发过程中,一定会遇到这种情况:同时处理简单对象和由简单对象组成的复杂对象,这些简单对象和复杂对象会组合成树形结构,在客户端对其处理的时候要保持一致性.比如电商网站中的产品订单,每一张产品订单 ...
- Javascript设计模式笔记
Javascript是越来越厉害了,一统前后端开发.于是最近把设计模式又看了一遍,顺便做了个笔记,以方便自己和他人共同学习. 笔记连载详见:http://www.meteorcn.net/wordpr ...
- 第9章 组合模式(Composite Pattern)
原文 第9章 组合模式(Composite Pattern) 概述: 组合模式有时候又叫做部分-整体模式,它使我们树型结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以向处理简单元素一样来处理 ...
- 设计模式之第17章-备忘录模式(Java实现)
设计模式之第17章-备忘录模式(Java实现) 好男人就是我,我就是曾小贤.最近陈赫和张子萱事件闹得那是一个沸沸扬扬.想想曾经每年都有爱情公寓陪伴的我现如今过年没有了爱情公寓总是感觉缺少点什么.不知道 ...
- 设计模式之第9章-原型模式(Java实现)
设计模式之第9章-原型模式(Java实现) “快到春节了,终于快放假了,天天上班好累的说.”“确实啊,最近加班比较严重,项目快到交付了啊.”“话说一到过节,就收到铺天盖地的短信轰炸,你说发短信就发吧, ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第九章:贴图
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第九章:贴图 代码工程地址: https://github.com/j ...
- .NET设计模式(11):组合模式(Composite Pattern)(转)
概述 组合模式有时候又叫做部分-整体模式,它使我们树型结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦. 意图 将对 ...
- Java 设计模式系列(九)组合模式
Java 设计模式系列(九)组合模式 将对象组合成树形结构以表示"部分-整体"的层次结构.组合模式使得用户对单个对象的使用具有一致性. 一.组合模式结构 Component: 抽象 ...
- 设计模式之第7章-外观模式(Java实现)
设计模式之第7章-外观模式(Java实现) “鱼哥,知道怎么把大象装进冰箱里面么?”(作者按:这么简单的问题还想考我,早了几百年吧.)“把大象装进冰箱里,一共需要三步:第一步,把冰箱门打开:第二步,把 ...
随机推荐
- SpringBoot 版本升级后报错 Cannot instantiate interface org.springframework.context.ApplicationContextInitializer
本篇博客纯粹讲我遇到这个问题的解决以及思考,如果你想知道解决方法,可以直接看正确解决方案部分.因为是前端写的,所以可能有些明显的内容很容易就看出来了. 首先:升级后更新其他依赖,以及Applicati ...
- uC/OS-II源码分析(五)
每个任务被赋予不同的优先级等级,从0 级到最低优先级OS_LOWEST_PR1O,包括0 和 OS_LOWEST_PR1O 在内.当μC/OS-Ⅱ初始化的时候,最低优先级OS_LOWEST_PR1O ...
- sulime的必备插件
常用插件 : SideBarEnhancements HTML-CSS-JS Prettify BracketHighlighter SublimeCodeIntel Emmet CTags Mark ...
- 什么是BI(Business Intelligence)
一.BI的定义 BI是Business Intelligence的英文缩写,中文解释为商务智能,用来帮助企业更好地利用数据提高决策质量的技术集合,是从大量的数据中钻取信息与知识的过程.简单讲就是业务. ...
- 功能测试工具Selenium IDE
Selenium IDE:一个专门用于Firefox浏览器的插件,能够录制回放用户在Firefox中的行为,并把所记录的Selenese (Selenium Commands)转化为HTML/Java ...
- POJ 3255 Roadblocks (次短路)
题意:给定一个图,求一条1-n的次短路. 析:次短路就是最短路再长一点呗,我们可以和求最短路一样,再多维护一个数组,来记录次短路. 代码如下: #pragma comment(linker, &quo ...
- 2018上海大都会 J-Beautiful Numbers(数位dp-模未知)
J-Beautiful Numbers 链接:https://www.nowcoder.com/acm/contest/163/J 来源:牛客网 时间限制:C/C++ 8秒,其他语言16秒 空间限制: ...
- Javascript 返回上一页:选中GridVIew的 Chekcbox
1. 选中GridVIew的值 $("#reverse").click(function () { //$("#checkbox[Num]").attr(&q ...
- ssm重新开发计科院新闻网站
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 洛谷P3431 [POI2005]AUT-The Bus
P3431 [POI2005]AUT-The Bus 题目描述 The streets of Byte City form a regular, chessboardlike network - th ...