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 相关文章推荐
html超链接打开窗口大小的方法
Mar 05 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
vue-dialog的弹出层组件
May 25 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
php数组去重复数据示例
2014/02/25 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
浅析vue-router原理
2018/10/19 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
django基础之数据库操作方法(详解)
2017/05/24 Python
Python pandas常用函数详解
2018/02/07 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
基于python实现把图片转换成素描
2019/11/13 Python
浅析python中的del用法
2020/09/02 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
经理助理岗位职责
2015/02/02 职场文书
三潭印月的导游词
2015/02/12 职场文书
大学生读书笔记大全
2015/07/01 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js