组合模式是一种专为创建web上的动态用户界面而量身定制的模式。使用这种模式，可以用一条命令在多个对象上激发复杂的或递归的行为。这可以简化粘合性代码，使其更容易维护，而那些复杂行为则被委托给各个对象。

组合模式实例：图片库

 /**

  * 图片库

  */

  var Composite = new Interface("Composite",["add","remove","getChild"]);

  var GalleryItem = new Interface("GalleryItem",["hide","show"]);

 //DynamicGallery class

 var DynamicGallery = function(id){

     this.children = [];

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

     this.element.id = id;

     this.element.className = "dynamic-gallery";

 }

 DynamicGallery.prototype = {

     add:function(child){

         Interface.ensureImplements(child,Composite,GalleryItem);

         this.children.push(child);

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

     },

     remove:function(child){

         for(var i =0, node; node = this.getChild(i);i++){

             if(node == child){

                 this.children.splice(i,1);

                 break;

             }

         }

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

     },

     getChild:function(i){

         return this.children[i];

     },

     // Implemetn the GalleryItem interface

     hide:function(){

         for(var node, i =0; node = this.getChild(i);i++){

             node.hide();

         }

         this.element.style.display = "none";

     },

     show:function(){

         this.element.style.display = "block";

         for(var node, i =0; node = this.getChild(i);i++){

             node.show();

         }

     },

     getElement:function(){

         return this.element ;

     }

 }

 //GalleryImage class.

 var GalleryImage = function(src){

     this.element  = document.createElement("img");

     this.element.className = "gallery-image";

     this.element.src =src;

 }

 GalleryImage.prototype = {

     add:function(){},

     remove:function(){},

     getChild:function(){},

     hide:function(){

         this.element.style.display = "none";

     },

     show:function(){

         this.element.style.display = "";

     },

     getElement:function(){

         return this.element;

     }

 };

应用：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="img"></div>

    </body>

</html>

<script type="text/javascript" src="Interface.js"></script>

<script type="text/javascript" src="ImageLibs.js"></script>

<script type="text/javascript">

    var topGallery = new DynamicGallery("top-gallery");

    topGallery.add(new GalleryImage("../img/dog/0.jpg"));

    topGallery.add(new GalleryImage("../img/dog/1.jpg"));

    topGallery.add(new GalleryImage("..//img/dog/2.jpg"));

    topGallery.add(new GalleryImage("../img/dog/3.jpg"));

    var vacationPhotos = new DynamicGallery("vacation-photos");

    for(var i = 0 ; i< 5;i++){

        vacationPhotos.add(new GalleryImage("../img/photo/" + i + ".jpg"));

    }

    topGallery.add(vacationPhotos);

    topGallery.show();

//    vacationPhotos.hide();

    console.log(topGallery);

    document.getElementById("img").appendChild(topGallery.element);

    topGallery.getChild(2).element.style.border = "2px solid red";

</script>

结果：

js设计模式-组合模式的更多相关文章

  1. 16. 星际争霸之php设计模式--组合模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  2. Java设计模式——组合模式

    JAVA 设计模式 组合模式 用途 组合模式 (Component) 将对象组合成树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有唯一性. 组合模式是一种结构型模 ...

  3. 【设计模式】Java设计模式 - 组合模式

    Java设计模式 - 组合模式 不断学习才是王道 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 原创作品,更多关注我CSDN: 一个有梦有戏的人 准备将博客园.CSDN一起记录分享自己 ...

  4. javascript设计模式-组合模式

    组合模式所要解决的问题: 可以使用简单的对象组合成复杂的对象,而这个复杂对象有可以组合成更大的对象.可以把简单这些对象定义成类,然后定义一些容器类来存储这些简单对象. 客户端代码必须区别对象简单对象和 ...

  5. javascript设计模式——组合模式

    前面的话 在程序设计中,有一些和“事物是由相似的子事物构成”类似的思想.组合模式就是用小的子对象来构建更大的对象,而这些小的子对象本身也许是由更小的“孙对象”构成的.本文将详细介绍组合模式 宏命令 宏 ...

  6. c#设计模式-组合模式

    在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象和复合对象 ...

  7. [Head First设计模式]生活中学设计模式——组合模式

    系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...

  8. JAVA 设计模式 组合模式

    用途 组合模式 (Component) 将对象组合成树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有唯一性. 组合模式是一种结构型模式. 结构

  9. 设计模式组合模式(Composite)精华

    23种子GOF设计模式一般分为三类:创建模式.结构模型.行为模式. 创建模式抽象的实例,他们帮助如何创建一个系统独立.这是一个这些对象和陈述的组合. 创建使用继承类的类架构更改实例.的对象类型模型的建 ...

随机推荐

  1. HangFire的定时任务和Quartz.NET总结（三）Quartz 配置

    在一个Net Core需求中,需要在每天的凌晨三点去抓取两个电商仓库的剩余的每个料号的数量来写会自己的表中, 用到了HangFire的定时任务 这篇文章讲的很详细记录下   文章2  这篇更简单 Qu ...

  2. C#使用wkhtmltopdf，把HTML生成PDF（包含分页）

    最近花了2天多的时间终于把HTML生成PDF弄好了.步骤如下: 1.首先是技术选型.看了好多都是收费的就不考虑了. 免费的有: jsPDF(前端生成,清晰度不高,生成比较慢) iText(严格要求ht ...

  3. SQL Server之存储过程

    存储过程的概念 存储过程Procedure是一组为了完成特定功能的SQL语句集合,经编译后存储在数据库中,用户通过指定存储过程的名称并给出参数来执行. 存储过程中可以包含逻辑控制语句和数据操纵语句,它 ...

  4. Spring AOP之动态代理

    软件151 李飞瑶 一.Spring 动态代理中的基本概念  1.关注点(concern)    一个关注点可以是一个特定的问题,概念.或者应用程序的兴趣点.总而言之,应用程序必须达到一个目标    ...

  5. day004 与用户交互、格式化输出、基本运算符

    目录 今天Python所学习的知识如下:①与用户的交互.格式化输出.基本运算符.以下整理汇总下所学习的知识点. 与用户的交互 input 注意事项: input函数接受的都是字符串 python2中的 ...

  6. eas之获取不同类型的组织视图

    OrgViewF7 orgF7=new OrgViewF7(this);orgF7.setCurrentCUID(company.getId().toString());orgF7.setMultiS ...

  7. 原来这才是Kafka的“真面目”

    作者介绍 郑杰文,腾讯云存储,高级后台工程师,2014 年毕业加入腾讯,先后从事增值业务开发.腾讯云存储开发.对业务性.技术平台型后台架构设计都有深入的探索实践.对架构的海量并发.高可用.可扩展性都有 ...

  8. encodeURI和encodeURIComponent的区别？

    encodeURI方法不会对下列字符编码 ASCII字母.数字.~!@#$&*()=:/,;?+' encodeURIComponent方法不会对下列字符编码 ASCII字母.数字.~!*() ...

  9. 配置Jupyter

    前几天见同学有用Jupyter notebook的,有点喜欢,于是今天自己配了一下. Jupyter是一个非常好用编辑器,因为Jupyter notebook 不仅可以编写代码运行,并且可以直接在代码 ...

  10. [Ynoi2015]即便看不到未来

    题目大意: 给定一个序列,每次询问,给出一个区间$[l,r]$. 设将区间内的元素去重后重排的数组为$p$,求$p$中长度为$1\sim 10$的极长值域连续段个数. 长度为$L$的极长值域连续段的定 ...