组合模式是一种专为创建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. Inception搭建

    Inception安装Inception是集审核.执行.回滚于一体的一个自动化运维系统,它是根据MySQL代码修改过来的,用它可以很明确的,详细的,准确的审核MySQL的SQL语句,它的工作模式和My ...

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

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

  3. （转）Arcgis for js加载天地图

    http://blog.csdn.net/gisshixisheng/article/details/44494715 综述:本节讲述的是用Arcgis for js加载天地图的切片资源. 天地图的切 ...

  4. Linux 之secureCRT连接SSH

    1.登陆linux系统,打开终端命令.输入 rpm -qa |grep ssh 查找当前系统是否已经安装. 2.如果没有安装SSH软件包,可以通过yum  或rpm安装包进行安装. .3.安装好了之后 ...

  5. 插入DOM元素

    插入Dom元素两种情况: 1.要插入的元素是从页面中获取的dom结构 ,例如:$(".item") 2.要插入的元素是通过变量存储的dom结构,例如:var html = &quo ...

  6. MySQL+Keepalived实现主主高可用方案

    Mysql主主高可用方案 master配置 [root@master ~]# yum -y install keepalived [root@master ~]# vim /etc/keepalive ...

  7. 验证：java 主线程在子线程结束后才会结束

    package com.idealisan.test; /** * Hello world! * */ public class App { public static void main( Stri ...

  8. 文献阅读 | Benefits and limitations of genome-wide association studies

    参考:今日阅读:GWAS的优劣势 - Omics Liu  Omics 待续~

  9. 13、Next Item Recommendation with Self-Attention---自注意力+CML

    一.摘要: 自注意力机制------从用户历史交互中推断出项目-项目关系.学习每个项目的相对权重[用来学习用户的暂时兴趣表示] 二. 模型: 一部分是用于建模用户短期意图的自注意力机制,一部分是建模用 ...

  10. noip模板复习

    自己敲模板还是有很多容易错的地方 写在注释里面了 LCA #include<bits/stdc++.h> #define REP(i, a, b) for(register int i = ...