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

核心提示： 从图上可以看出，实际上菜单1，Javascript乱弹设计模式系列(4) － 组合模式(Composite)(3)，菜单2-1，菜单2-2-1，即Menu类；这样Menu类的GetValue方法可以通过遍历它的子结点数组，得到所有子结点菜单数据；for(vari=0,len=this.me

从图上可以看出，实际上菜单1，菜单2-1，菜单2-2-1，菜单2-2-2，菜单2-3，菜单3-1，菜单4都是属于Leaf，即MenuItem类；

菜单2，菜单2-2，菜单3都属于Composite，即Menu类；

这样Menu类的GetValue方法可以通过遍历它的子结点数组，得到所有子结点菜单数据；

for(vari=0,len=this.menuComponents.length;i<len;i++)
{
　　str+=this.menuComponents[i].getValue();
}

其中this.menuComponents[i].getValue()可以是Menu类的getValue方法，也可以是MenuItem类的getValue方法；

这样就可以完成了所有结点的遍历。

然后给出MenuItem.js和Menu.js的完整代码如下：

MenuItem.js

functionMenuItem(text,title,href){
　　this.text=text;
　　this.title=title;
　　this.href=href;
　　Interface.registerImplements(this,MenuComponent);
}
MenuItem.prototype={
　　getValue:function(){
　　　　varstr="<liclass="Menu-Leaf"title=""+this.title+""><ahref=""+this.href+"">"+this.text+"</a></li>";
　　　　returnstr;
　　}
}

Menu.js

functionMenu(text,title,href){
　　this.menuComponents=newArray();
　　this.text=text;
　　this.title=title;
　　this.href=href;
　　Interface.registerImplements(this,MenuComponent);
}
Menu.prototype={
　　getValue:function(){
　　　　if(this.menuComponents.length==0)
　　　　{
　　　　　　thrownewError(this.text+"菜单下没有子菜单");
　　　　}
　　　　varstr="<liclass="Menu-WithChildren"title=""+this.title+""><aclass="Menu-Link"href=""+this.href+"">"+this.text+"</a>";
　　　　str+="<ul>";
　　　　for(vari=0,len=this.menuComponents.length;i<len;i++)
　　　　{
　　　　　　str+=this.menuComponents[i].getValue();
　　　　}
　　　　str+="</ul>";
　　　　returnstr;
　　},
　　add:function(component){
　　　　this.menuComponents.push(component);
　　},
　　remove:function(component){
　　　　for(vari=0,len=this.menuComponents.length;i<len;i++)
　　　　{
　　　　　　if(this.menuComponents[i]==component)
　　　　　　{
　　　　　　　　this.menuComponents.splice(i,1);
　　　　　　　　break;
　　　　　　}
　　　　}
　　},
　　removeAt:function(index){
　　　　if(this.menuComponents.length<=index)
　　　　{
　　　　　　this.menuComponents.splice(index,1);
　　　　}
　　　　else
　　　　{
　　　　　　thrownewError("索引操作数组超过上限");
　　　　}
　　}
}