Javascript乱弹设计模式系列(4) － 组合模式(Composite)

本文示例源代码或素材下载

定义

组合模式允许你将对象组合成树形结构以表示“整体/部分”的层次结构。组合能让客户以一致的方式处理个别对象以及对象组合。

类图

实例分析

这里我给出一个利用组合模式设计的菜单导航：

先看下效果图：

现在开始分析通过组合模式如何实现它：

1. 引用InterfaceAndClass.js文件，作为接口的构造和类的继承，这个不多说了，详细请看前面的文章；

2. 添加MenuComponent.js文件，作为Component接口或者抽象类，这里我用了接口的形式：

varMenuComponent=newInterface("MenuComponent",[["getValue"]]);

3. 添加MenuItem.js文件，作为Leaf简单元素，这里指菜单的叶子结点：

functionMenuItem(text,title,href){
　　this.text=text;
　　this.title=title;
　　this.href=href;
　　Interface.registerImplements(this,MenuComponent);
}
MenuItem.prototype={
　　getValue:function(){
　　　　//…
　　}
}

其中text为菜单上显示的文本，title为提示文本符，href为链接导向；并且让它继承MenuComponent接口；

4. 添加Menu.js文件，作为Composite复合元素，它是由一系列的Leaf简单元素组成的：