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 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
自己的js工具 Event封装
2009/08/21 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
react-router实现按需加载
2017/05/09 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
js实现简易ATM功能
2020/10/27 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python client使用http post 到server端的代码
2013/02/10 Python
Python变量作用范围实例分析
2015/07/07 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
python3.5绘制随机漫步图
2018/08/27 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
详解Python中的测试工具
2019/06/09 Python
python中count函数简单用法
2020/01/05 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
组织关系转移介绍信
2014/01/16 职场文书
优秀学生获奖感言
2014/02/15 职场文书
财务负责人任命书
2014/06/06 职场文书
车辆工程专业求职信
2014/06/14 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
人力资源部工作计划
2019/05/14 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技