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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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
jquery序列化方法实例分析
2015/06/10 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
js实现微博发布小功能
2017/01/12 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Mac 上切换Python多版本
2017/06/17 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
毕业生自我鉴定
2013/12/04 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
导师对论文的学术评语
2015/01/04 职场文书
机关保密工作承诺书
2015/05/04 职场文书
鲁冰花观后感
2015/06/10 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis