14.第三篇:组合模式
2018-12-14 本文已影响0人
爱吃鱼的肥兔子
本文摘自 《JavaScript 设计模式》张容铭 著 版权归原作者所有
var News = function(){
// 子组件容器
this.children = [];
// 当前组件元素
this.element = null;
}
News.prototype = {
init:function(){
throw new Error('请重启你的方法');
},
add:function(){
throw new Error('请重启你的方法');
},
getElement:function(){
throw new Error('请重启你的方法');
}
}
// 容器类构造函数
var Container = function(id,parent){
// 构造函数继承父类
News.call(this);
// 模块id
this.id = id;
// 模块父容器
this.parent = parent;
// 构建方法
this.init();
}
// 寄生式继承父类原型方法
inhritprototype(Container,News);
// 构建方法
Container.prototype.init = function(){
this.element = document.createElement('ul');
this.element.id = this.id;
this.element.className = 'new-container';
};
// 添加子元素方法
Container.prototype.getElement = function(child){
// 在子元素容器中插入子元素
this.children.push(child);
// 插入当前组件元素树种
this.element.appendChild(child.getElement());
return this;
}
// 获取当前元素方法
Container.prototype.getElement= function(){
return this.element;
}
// 显示方法
Container.[prototype.show = function(){
this.parent.appendChild(this.element);
}
var Item = function(classname){
News.call(this);
this.classname = classname || '';
this.init();
}
inheritPrototype(Item,News);
Item.prptotype.init = function(){
this.element = document.createElement('li');
this.element.className = this.classname;
}
Item.prototype.add = function(child){
this.children.push(child);
this.element.appendChild(child.getElement());
return this;
}
Item.prototype.getElement = function(){
return this.element;
}
var NewsGroup = function(classname)(){
News.call(this);
this,classname = classname || '';
this.init();
}
inheriPrototype(NewsGroup,Mews);
NewsGroup.prototype.init = function(){
this.element = document.createElement('div');
this.element.className = this.classname;
}
NewsGroup.prtotype.add = function(child){
this.children.push(child);
this,element.appenChild(child.getElement());
return this;
}
NewsGroup.prototype.getElment = function(){
return this.element;
}