组合模式是一种专为创建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. fusionchart简单demo柱状图

    本篇是柱状图,想要折线图的话,只要改变.swf文件就行. <div id="column2" style="width:240px; height:200px; m ...

  2. VMWare linux 打印太多,看不到之前的记录的解决方法总结

    1.在命令后面加 | more. 可以每次按空格键或是回车键后翻.2.命令后面加| less ,可以前后翻.3.用重定向到文件 > 文件名,之后慢慢看 ----待补充 ------

  3. Cell期刊论文：为什么计算机人脸识别注定超越人类？（祖母论与还原论之争）

    终于找到ML日报的微信链接,抄之...................................... 请拜访原文链接:[祖母论与还原论之争]为什么计算机人脸识别注定超越人类?评价:       ...

  4. AI：AI是什么？

    古老的哲学对科学有永远的借鉴意义,科学上的咬文嚼字往往会让其丧失完备性. 一.AI是什么 你看起来它有多好,它就有多好.本质只能通过表象来描述,在色即是空的逻辑里,图灵测试也许是最精准的AI测试方式. ...

  5. 安卓Queue的使用

    Queue的成员函数        add        增加一个元索                     如果队列已满,则抛出一个IIIegaISlabEepeplian异常       rem ...

  6. MySQL--增删改查分页存储过程以及事务

    添加和修改写在一起了 可以用id判断添加和修改 和事务在一起编码 可以让代码更严谨 在这里简单的说一下事务的四大特性 事务四大特性之原子性:原子性是指事务是一个不可再分割的工作单位,事务中的操作要么都 ...

  7. H3C交换机配置常用命令(转)

    1.配置文件相关命令 [Quidway]display current-configuration //显示当前生效的配置 [Quidway]display saved-configuration / ...

  8. 关于大XML文件与大节点处理(System.Xml.XmlTextReader)

    近期有个任务要求处理大XML文件,其中有个存了Base64的大节点(>90M,路径已知). 这种任务只能上XmlReader,即使如此大节点的处理还是头疼了一阵…… 最初查MSDN的时候,找到了 ...

  9. Git server出现cache大回收分析

    实例 git server是一个io密集型的服务,当cache量很大的时候,cache会全部一次释放,导致那么一瞬间,IO read压力很大,因为,用户的大量请求,需要重新从磁盘读到内存,但是这个时刻 ...

  10. CodeForces 245C-Game with Coins

    题意:给你一个n,紧接着n个正数,然后有一种操作:选择一个x满足(x*2+1<=n)一次可以把下标为  x,2*x,2*x+1的三个数同时减一: 问,最少几次操作可以使n个数字变为零(已经是0的 ...