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 面向对象与原型
Apr 10 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
swiper自定义分页器的样式
Sep 14 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/25 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
python 日志 logging模块详细解析
2020/03/31 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
会计应聘求职信范文
2013/12/17 职场文书
给实习单位的感谢信
2014/02/01 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
争先创优心得体会
2014/09/12 职场文书
三十年同学聚会感言
2015/07/30 职场文书