再起航，我的学习笔记之JavaScript设计模式15(组合模式)

组合模式

组合模式(Composite)： 又称部分-整体模式，将对象组合成树形结构以表示“部分整体”的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性。

如果有一个需求需要我们做一个门户网站，涉及到门户网站自然离不开文章列表，那么文章列表里又有文字列表，图片列表，图文列表，这么多种类的文章列表我们该怎么做呢？

首先我们可以创建一个文章列表的抽象父类，让其他的不同类型的文章列表都继承于这个类

var articles=function(){

	//子组件容器

	this.children=[];

	//当前组件元素

	this.element=null;

}

articles.prototype={

	init:function(){

		throw new Error("方法必须重写！");

	},

	add:function(){

		throw new Error("方法必须重写！");

	},

	getElement:function(){

		throw new Error("方法必须重写！");

	}

}

我们定义了这个接口抽象父类，下一步我们就是要实现所有的子类，但是我们要注意他们的层次关系，因为组合模式不仅仅是单层次组合，也可以是一个多层次的。

接着我们定义一个文章列表模块容器类

var Container=function(id,parent){

	//构造函数继承父类

	articles.call(this);

	//模块ID

	this.id=id;

	//模块的父容器

	this.parent=parent;

	//构建初始化方法

	this.init();

}

原型式继承

function proObject(o){

    //声明一个过渡函数对象

    function Obj(){}

    //过渡对象的原型继承父对象

    Obj.prototype=o;

    //返回过渡对象的一个实例，该实例的原型继承了父对象

    return new Obj();

}

寄生式组合式继承父类原型方法

function parasiticType(ParentClass,ChildClass){

    //复制一份父类的原型保存在变量中

     var parent=proObject(ParentClass.prototype);

     //修正因为重写子类原型导致子类的constructor属性被修改

     parent.constructor=ChildClass;

     //设置子类的原型

     ChildClass.prototype=parent;

}

parasiticType(articles,Container);

接着我们实现之前的初始化方法

Container.prototype.init=function(){

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

	this.element.id=this.id;

	this.element.className='articles-container'

}

现在我们实现抽象父类中的方法

Container.prototype.add=function(child){

	console.log(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){

	articles.call(this);

	this.className=className||"";

	this.init();

}

parasiticType(articles,Item);

Item.prototype.init=function(){

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

	this.element.className=this.className;

}

Item.prototype.add=function(child){

	console.log(child);

	//在子元素容器中插入子元素

	this.children.push(child);

	//插入当前组件元素树中

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

	return this;

}

Item.prototype.getElement=function(){

	return this.element;

}

文章组合实体类实现方法也是一样的

var articlesGroup=function(className){

	articles.call(this);

	this.className=className||"";

	this.init();

}

parasiticType(articles,articlesGroup);

articlesGroup.prototype.init=function(){

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

	this.element.className=this.className;

}

articlesGroup.prototype.add=function(child){

	//在子元素容器中插入子元素

	this.children.push(child);

	//插入当前组件元素树中

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

	return this;

}

articlesGroup.prototype.getElement=function(){

	return this.element;

}

好了现在我们已经把所有子类成员创建出来了，不过光有这些容器类还不行，还需要有更底层的文章列表类。

图片文章列表

var ImageArticles=function(url,href,className){

	articles.call(this);

	this.url=url||"";

	this.href=href||"#";

	this.className=className||"normal";

	this.init();

}

parasiticType(articles,ImageArticles);

ImageArticles.prototype.init=function(){

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

	var img=new Image();

	img.src=this.url;

	this.element.appendChild(img);

	this.element.className='image-news'+this.className;

	this.element.href=this.href;

}

ImageArticles.prototype.add=function(){}

ImageArticles.prototype.getElement=function(){

		return this.element;

	}

文字文章列表

var TextArticles=function(text,href){

	articles.call(this);

	this.text=text||"";

	this.href=href||"#";

	this.init();

}

parasiticType(articles,TextArticles);

TextArticles.prototype.init=function(){

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

	this.element.innerHTML=this.text;

	this.element.href=this.href;

	this.element.className="text";

}

TextArticles.prototype.add=function(){}

TextArticles.prototype.getElement=function(){

		return this.element;

	}

现在所有的类我们都已经创建了，现在我们就要通过add方法来组合这些类

var Articles=new Container('articles',document.body);

Articles.add(new Item('normal').add(

	new ImageArticles('img/HBuilder.png','#','small')

)

.add(new Item('normal').add(

	new ImageArticles('img/HBuilder.png','#','small')

)

)

.add(new Item('normal').add(

	new TextArticles('测试列表','#')

	)

)

.add(new Item('normal').add(

	new TextArticles('测试列表2','#')

	)

)

).show();

我们来看一看效果，这里我就偷懒不写样式了。我们可以看到，列表已经颇具雏形了。

现在我们创建的每一条文章列表都是一个独立的个体，互不影响，避免相互间的耦合，也增强了组合后的模块的复杂性，如果需要混搭，我们做出相应的组合就可以轻易的完成

总结

组合模式能够给我们提供一个清晰的组成结构。组合对象类通过继承同一个父类使其具有统一的方法，这样也方便了我们统一管理与使用，当然此时单体成员与组合体成员行为表现就比较一致了。这也就模糊了简单对象与组合对象的区别。有时这也是一种对数据的分级式处理。清晰而又方便我们队数据的管理与使用。

也谢谢大家看到这里：）如果你觉得我的分享还可以请点击推荐，分享给你的朋友让我们一起进步~

好了以上就是本次分享的全部内容，本次示例参考自JavaScript设计模式一书，让我们一点点积累一点点成长，希望对大家有所帮助。

欢迎转载，转载请注明作者，原文出处。

巴特西

再起航，我的学习笔记之JavaScript设计模式15(组合模式)

组合模式

总结

最新文章

热门文章