JavaScript设计模式学习——Composite
来源:互联网 发布:企业邮箱 多域名绑定 编辑:程序博客网 时间:2024/06/07 00:59
//定义组合模式需要实现的接口
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';
}
DynamicGallery.prototype={
add:function(child){
Interface.ensureImplements(child,Composite,GalleryItem);
this.children.push(child);
this.element.appendChild(child.getElement());
},
remove:function(child){
for(var node,i=0;node=this.children(i);i++){
if(node==child){
this.formComponents[i].splice(i,1);
break;
}
}
this.element.removeChild(child.getElement());
},
getChild:function(i){
return this.children[i];
},
hide:function(){
for(var node, i = 0; node = this.getChild(i); i++) {
node.hide();
}
this.element.style.display = 'none';
},
show: function() {
this.element.style.display = 'block';
for(var node, i = 0; node = this.getChild(i); i++) {
node.show();
}
},
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 = 0; i < 30; i++) {
vacationPhotos.add(new GalleryImage('/img/vac/image-' + i + '.jpg'));
}
topGallery.add(vacationPhotos);
topGallery.show();
vacationPhotos.hide();
- JavaScript设计模式学习——Composite
- Composite——设计模式学习笔记
- 设计模式—Composite模式
- javascript设计模式交流(五) ——Composite Pattern
- 设计模式学习笔记八——Composite模式
- 设计模式学习笔记——组合(Composite)模式
- 设计模式学习笔记(二十一)—Composite模式
- 设计模式—Composite代码
- 设计模式11—Composite设计模式
- 设计模式学习笔记(九)——Composite组成
- 设计模式——合成模式(Composite)
- 【设计模式】—— 组合模式Composite
- 设计模式学习8 Composite
- 设计模式学习笔记-Composite
- 设计模式笔记——Composite
- Java设计模式 —— 组合(Composite)
- 《Java与模式》学习笔记:设计模式——合成(Composite)模式
- 《Java与模式》学习笔记:设计模式——合成(Composite)模式
- 如何有效防止Java程序源码被人偷窥
- Devexpress学习篇(请大家多多指教)
- java截取带html标签的字符串并把标签补全(保证格式)
- 得到一个网页的纯文字内容
- PHP递归函数
- JavaScript设计模式学习——Composite
- 又开始贪多了
- Queued Services
- lucene 分词学习
- 悟透JavaScript的摘录
- 在SQL中删除重复记录(多种方法)
- Microsoft OLE DB Provider for SQL Server 错误 '80040e31' 超时已过期
- API技巧集
- Prototype hash用法小结