开发学院网页设计JavaScript Javascript乱弹设计模式系列(4) - 组合模式(Comp... 阅读

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

 2010-09-14 13:37:28 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 定义组合模式允许你将对象组合成树形结构以表示“整体/部分”的层次结构,组合能让客户以一致的方式处理个别对象以及对象组合,Javascript乱弹设计模式系列(4) - 组合模式(Composite),类图实例分析这里我给出一个利用组合模式设计的菜单导航:先看下效

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

定义

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

类图

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

实例分析

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

先看下效果图:

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简单元素组成的:

1 2 3 4 5  下一页

Tags:Javascript 乱弹 设计模式

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接