javascript 设计模式之组合模式原理与应用详解


Posted in Javascript onApril 08, 2020

本文实例讲述了javascript 设计模式之组合模式原理与应用。分享给大家供大家参考,具体如下:

组合模式说明

组合模式用于简单化,一致化对单组件和复合组件的使用;其实它就是一棵树;

这棵树有且只有一个根,访问入口,如果它不是一棵空树,那么由一个或几个树枝节点以及子叶节点组成,每个树枝节点还包含自己的子树枝以及子叶节点;

在面向对象编程中,叶子以及复杂对象(树枝节点)都继承一个接口或抽象类分别实现;

这个抽象定义一般三个部分组成,组件的基本信息,Add方法,Remove方法;

叶子节点只包含本身的数据,Add, Remove 基本为空操作;

树枝节点实现组件时,一般包含一个数组定义,用于存储子叶或树枝节点,还包括一个获取所有子节点的方法: 如GetList;

实例场景:

1>. 自然界中的各种树,树长在大地人,树头(树根),即是入口点,这棵树头向上生长,即有自己的叶子,又有自己的子树枝,某树枝还有自己的叶子,跟子树枝;

2>. 操作系统目录结构、公司部门组织架构、国家省市县、宇宙万物都有单独元物质以及物物包含的现象,像这么看起来复杂的现象,都可以使用组合模式,即部分-整体模式来操作;

一棵树:

javascript 设计模式之组合模式原理与应用详解

 组合模式结构图:

javascript 设计模式之组合模式原理与应用详解

实例源码

1. Component 组件;

function Component() {
  this.name = '';
}

Component.prototype = {
  Add: function(comp) {
    //rewrite
  },
  Remove: function(name) {
    //rewrite
  },
  set: function(name) {
    this.name = name;
  },
  operate: function() {
    //...
  }
}
var comp = new Component();

2. Leaf 叶子节点;

function Leaf() {
  
}

Leaf.prototype = Object.create(comp, {});

Leaf.prototype.get = function() {
  return this.name;
}

3. 树枝节点:

function Composite() {
  this.list = [];
}

Composite.prototype = Object.create(comp, {});

Composite.prototype = {
  Add: function(comp) {
    this.list.push(comp);
  },
  Remove: function(name) {
    for (i in this.list) {
      var cmp = this.list[i];
      if (cmp.name == name) {
        delete this.list[i];
        break;
      }
    }
  },
  operate: function() {
    //do...
  },
  getList: function(name) {
    var cmp;
    for (i in this.list) {
      cmp = this.list[i];
      if (cmp.name == name) {
        break;
      }
    }
    return cmp;
  }
}

叶子节点基本可以直接使用 Component 的结构,或是直接以 Component 来创建,Composite 树枝节点,就必须重写 Add , Remove, operate 等方法;

使用方法:

var root = new Composite();
root.set("root");

//叶子
var leaf = new Leaf();
leaf.set('顶级叶子');

root.Add(leaf);

//树枝节点;
var child = new Composite();
child.set('child');

var childschild = new Composite();
childschild.set('cchild');

child.Add(childschild);

root.Add(child);

root.operate();

其他说明

组合模式,是一种结构型的设计模式,主要用于一致化处理简单元素和复杂元素操作,使得客户端使用可以与复合结构复杂的情况相解藕;客户端使用时,搜索递归到需要的节点或位置,都可以使用统一方法,不管是叶子节点或是树枝节点进行一致操作;在面向对象动态语言里,其实Javascript 也差不多,就可以无需知道元素结构,进行查询,添加,删除的操作;

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
AngularJS实现多级下拉框
Mar 25 Javascript
JS async 函数的含义和用法实例总结
Apr 08 #Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 #Javascript
JS co 函数库的含义和用法实例总结
Apr 08 #Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 #Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 #Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 #Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 #Javascript
You might like
PHP初学入门
2006/11/19 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP7常量数组用法分析
2016/09/26 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
理解python多线程(python多线程简明教程)
2014/06/09 Python
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
详解Python3中的 input() 函数
2020/03/18 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
美国在线购物频道:Shop LC
2019/04/21 全球购物
申请任职学生会干部自荐书范文
2014/02/13 职场文书
成龙洗发水广告词
2014/03/14 职场文书
青春演讲稿范文
2014/05/08 职场文书
商业门面租房协议书
2014/11/25 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
银行稽核岗位职责
2015/04/13 职场文书
2015年幼师工作总结
2015/04/28 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
详解Python魔法方法之描述符类
2021/05/26 Python
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis