组合模式是一种专为创建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. System.DateTime.Now 24小时制。

    this.Label6.Text = "当前时间:" + System.DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") ...

  2. Linux下Shell脚本输出带颜色文字

    文本终端的颜色可以使用“ANSI非常规字符序列”来生成.举例: echo -e "\033[44;37;5m ME \033[0m COOL" 以上命令设置作用如下: 背景色为蓝色 ...

  3. 点击button 触发另一个button 事件

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs&quo ...

  4. InnoDB undo log物理结构的初始化

    水平有限,如果有误请指出.一直以来未对Innodb 的undo进行好好的学习,最近刚好有点时间准备学习一下,通过阿里内核月报和自己看代码的综合总结一下.本文环境: 代码版本 percona 5.7.2 ...

  5. XML文件读取加上 Ajax请求

    #region XML文件处理 XmlDocument doc = new XmlDocument(); XmlReaderSettings settings = new XmlReaderSetti ...

  6. 【转载】Jsp页面传Json数据到服务端，转对象或集合进行数据处理

    需求:1.将页面数据带到服务端并转成对象,2.将页面的集合数据带到服务端转List实现:用ajax请求传递数据,数据格式为json JS方法: testJsonMethod = function(){ ...

  7. 7.5 pragma 指令

    第1个pragma禁用了我们感兴趣的特别警告,第2个恢复了它.禁用尽可能小的一段代码的警告是一个良好的做法,以便你不会错过任何真正应该修复的错误.如果你想在单独一行上禁用或恢复多个警告,那么只需用逗号 ...

  8. salt 批量添加route路由

    安装net-tools包 因为其余机器没有网络,使用rpm包安装,并添加缺省路由. [root@web1 base]# tree . ├── add-route.sls ├── files │   └ ...

  9. Java反射获取class对象的三种方式，反射创建对象的两种方式

    Java反射获取class对象的三种方式,反射创建对象的两种方式 1.获取Class对象 在 Java API 中,提供了获取 Class 类对象的三种方法: 第一种,使用 Class.forName ...

  10. Selenium调用JavaScript修改元素属性

    修改元素的style,主要是将一些隐性元素显示出来,让元素可被操作: JavascriptExecutor  js = (JavascriptExecutor)driver; js.executeSc ...