组合模式是一种专为创建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. 英语之ASIC

    ASIC(Application Specific Integrated Circuit) = 专用集成电路 assign = [计][数] 赋值 assign a value 分配一个值:赋值

  2. OpenCV：Adaboost训练时数据扩增

    更准确的模型需要更多的数据,对于传统非神经网络机器学习方法,不同的特征需要有各自相符合的数据扩增方法. 1.   在使用opencv_traincascade.exe 过程中,图像读取在 classi ...

  3. 【sqli-labs】 less23 Error based - strip comments (GET型基于错误的去除注释的注入)

    . 加单引号报错 加# http://localhost/sqli-labs-master/Less-23/?id=1'%23 错误没有改变,推测过滤了# 查看源码发现# -- 都被替换掉了 那么可用 ...

  4. 浅析Python3中的bytes和str类型 (转)

    原文出处:https://www.cnblogs.com/chownjy/p/6625299.html#undefined Python 3最重要的新特性之一是对字符串和二进制数据流做了明确的区分.文 ...

  5. webpack学习（三）

    前篇:webpack学习(二) jquery不需要在项目中自己下载,而是作为一个模块引入.jquery的存放路径是在 node_modules目录下.1.首先给项目安装jquery,npm insta ...

  6. Mysql 设置起始值

    alter table t_tszj_pet_activity AUTO_INCREMENT=10000;   设置 id 从10000 开始

  7. eas之去掉关闭eas页面时校验是否修改的提示

    EditUI-------> public boolean checkBeforeWindowClosing() {            boolean b = super.checkBefo ...

  8. 【剑指Offer】8、跳台阶

      题目描述:   一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果).   解题思路:   首先考虑最简单的情况,如果只有1级台阶, ...

  9. IE下自定义错误页面不显示的原因

    如果一个 404 页面的内容小于 512B,IE 会认为该 404 页面不够友好,在 IE 下将不会成功返回该 404 错误页面

  10. python爬虫03：那个叫做 Urllib 的库让我们的 python 假装是浏览器

    相信你已经摸清了 浏览器各种请求的套路 也知道了怎么在手机上进行请求和返回数据的抓取 那么接下来我们就开始来使用 python 了 代码 lu 起来 那么 怎么用 python 写各种请求呢? 今天要 ...