[设计模式][组合模式][Javascript]

hersion 发布于2019-08-21 10:18 / 2864人阅读

摘要：简化了父和子之间的关系。对于子节点来说也是一样的，过多的接口暴露有时候也是一种滥用，同时也减少了对外部的依赖。

The Composite Pattern is a partitioning design pattern. The composite pattern describes that a group of objects is to be treated in the same way as a single instance of object. The intent of a composite is to "compose" objects into tree structures to represent part-whole hierarchies. Implementing the composite pattern lets client treat individual objects and compositions uniformly.
From http://en.wikipedia.org/wiki/Composite_pattern

定义

组合模式的目标是解耦客户程序与复杂元素内部架构，使得客户程序对待所有子元素都一视同仁

每个子节点都可以使复杂的存在，对于父节点来说，不需要知道子节点的复杂性或者实现子节点的复杂性，只需要关注子节点的特定方法，便可以使用子节点。简化了父和子之间的关系。

对于子节点来说也是一样的，过多的接口暴露有时候也是一种滥用，同时也减少了对外部的依赖。

需求

按钮组需求：

有这样一组按钮，他们横向的进行排列，根据当前用户权限设置有哪些按钮被显示

按钮可以分成subgroup，按特定的功能进行划分subgroup

类图

角色

AbstractButton (Component) 定义一组公共的接口

Button (Leaf) 表示叶子节点的对象，叶子节点没有自己的子节点

ButtonGroup (Composite) 定义有枝节点行为，用来存储子部件，在Component接口中实现与子部件有关操作

实现

var prototype = require("prototype");

var AbstractButton = prototype.Class.create({
  render: function() {
    throw new Error("method must be override!");
  }
});

var Button = prototype.Class.create(AbstractButton, {
  initialize: function(id, group) {
    this.id = id;
    this.group = group;
  },

  render: function () {
    console.log("render: Button的ID是:"+this.id+", group是:"+this.group);
  }
});

var ButtonGroup = prototype.Class.create(AbstractButton, {
  initialize: function () {
    this.buttons = [];
  },

  add: function (btn) {
    if (btn instanceof Button) {
      this.buttons.push(btn);
    }
  },

  remove: function (id) {
    for (var i = this.buttons.length - 1; i >= 0; i--) {
      if(this.buttons[i].id === id){
        this.buttons.splice(i, 1);
      }
    }
  },

  getChild: function (id) {
    var search = [];
    for (var i = this.buttons.length - 1; i >= 0; i--) {
      if(this.buttons[i].id === id){
        search.push(this.buttons[i]);
      }
    }

    return search;
  },

  render: function () {
    for (var i = this.buttons.length - 1; i >= 0; i--) {
      this.buttons[i].render();
    }
  }
});

var Main = function () {

  var editBtn = new Button("editbtn", "edit");
  var deleteBtn = new Button("deletebtn", "edit");
  var manageBtn = new Button("managebtn", "edit");

  var btngroup = new ButtonGroup();
  btngroup.add(editBtn);
  btngroup.add(deleteBtn);
  btngroup.add(manageBtn);


  btngroup.render();
}

Main();

注：继承采用了PrototypeJS提供的Class来做的，使用了Prototype.Node，关于prototype如何使用参考Prototype Doc

参考

http://en.wikipedia.org/wiki/Composite_pattern

http://www.cnblogs.com/peida/archive/2008/09/09/1284686.html

http://sourcemaking.com/design_patterns/composite

http://baike.baidu.com/view/3591789.htm?fr=aladdin

GPU云服务器云服务器组合模式 javascript设计模式 javascript命令模式 javascript严格模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85274.html

听飞狐聊JavaScript设计模式系列12

摘要：，对组合对象执行的操作可以向下传递到叶子节点进行操作。组合模式之图片库图片库可以有选择地隐藏或显示图片库的全部或某一部分单独的或是部分的。本回内容介绍上一回，聊了桥接模式，做了一道计算题；介一回，聊组合模式（Composite），官方描述组合模式将对象组合成树形结构以表示部分-整体的层次结构，组合模式使得用户对单个对象和组合对象的使用具有一致性。组合模式特性这里我理了一下，就组...

HitenDev 2019-08-19 17:13 评论0 收藏0
JavaScript设计模式-第一部分：单例模式、组合模式和外观模式

摘要：但是，这并不是采用单例的唯一原因。使用命名空间单例模式也被称为模块设计模式。函数内部声明了一些局部函数和或变量。紧随函数声明放置即可立即执行外部函数，并将所得的对象文字费赔给变量。 JavaScript设计模式-第一部分：单例模式、组合模式和外观模式设计模式是一些可靠的编程方式，有助于保证代码更加易于维护、扩展及分离，所有设计模式在创建大型JavaScript应用程序时均不可或缺单...

betacat 2019-08-20 13:38 评论0 收藏0
js设计模式--组合模式

摘要：文章系列设计模式单例模式设计模式策略模式设计模式代理模式设计模式迭代器模式设计模式发布订阅模式设计模式命令模式概念组合模式就是用小的子对象来构建更大的对象，而这些小的子对象本身也许是由更小的孙对象构成的。前言本系列文章主要根据《JavaScript设计模式与开发实践》整理而来，其中会加入了一些自己的思考。希望对大家有所帮助。文章系列 js设计模式--单例模式 js设计模式--策略...

blankyao 2019-08-23 14:31 评论0 收藏0
JavaScript设计模式（八）：组合模式

摘要：不同于其它静态编程语言，实现组合模式的难点是保持树对象与叶对象之间接口保持统一，可借助定制接口规范，实现类型约束。误区规避组合不是继承，树叶对象并不是父子对象组合模式的树型结构是一种聚合的关系，而不是。 showImg(https://segmentfault.com/img/bVbu79V?w=800&h=600); 组合模式：又叫部分整体模式，将对象组合成树形结构，以表示部分...

leon 2019-08-26 18:36 评论0 收藏0
javascript 组合模式

摘要：开始扫描文件夹文件下不能添加其他文件夹或文件开始扫描文件根文件加技术栈权威小王子组合模式 **// 组合模式在对象间形成树形结构// 组合模式中基本对象和组合对象被一致对待// 无须关心对象有多少层调用时只需要在根部进行调用**结合了命令模式和组合模式的具体实现: const MacroCommand = function () { return { ...

Carson 2019-08-26 10:42 评论0 收藏0
JavaScript设计模式之结构型设计模式

摘要：享元模式通过分析应用程序的对象，将其解析为内在数据和外在数据，减少对象数量，从而提高程序的性能。通过这种方式进行事件绑定，可以减少事件处理程序的数量，这种方式叫做事件委托，也是运用了享元模式的原理。事件处理程序是公用的内在部分，每个菜单项各 github 全文地址： YOU-SHOULD-KNOW-JS JavaScript设计模式之外观模式概念外观模式：为一组复杂子系统接口提...

xiaoqibTn 2019-08-21 18:24 评论0 收藏0