《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解


Posted in Javascript onApril 08, 2020

本文实例讲述了Javascript面向对象程序设计组合模式。分享给大家供大家参考,具体如下:

概述

关于组合模式的定义:组合模式(Composite Pattern)有时候又叫做部分-整体模式,它使我们树型结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦。来自百度百科:http://baike.baidu.com/view/3591789.htm

其实从面向对象之五之后,与javascript本身关系不是很大,更重要的是设计模式的一些概念,只要了解javascript面向对象的一般知识,掌握设计模式的含义,代码本身并不是很难。

这里简单说一下组合模式,其实组合模式就是将一系列相似或相近的对象组合在一个大的对象,由这个大对象提供一些常用的接口来对这些小对象进行操作,代码可重用,对外操作简单。例如对于一个form里的元素,不考虑页面设计的情况下,一般就剩下input了,对于这些input都有name和value的属性,因此可以将这些input元素作为form对象的成员组合起来,form对象提供对外的接口,便可以实现一些简单的操作,比如设置某个input的value,添加/删除某个input等等……

正文

介绍:组合模式又叫部分整体模式,用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象,用来表示部分以及整体层次

定义:组合多个对象形成树形结构以表示具有整体一部分关系的层次机构。组合模式对单个对象(即叶子对象)和组合对象(即容器对象)的使用具有一致性,组合模式又可以成为整体一部分模式。
它是一种对象结构型模式。

场景:我们对公司的人员架构进行一下打印,假设所有管理岗和开发岗的区别只有一个,是不是有下级员工。我们来实现下:

示例:

var LEADER = function(name,dept){
  this._name = name || '';  //姓名
  this._dept = dept || '';  //职位
  this._subordinates = [];  //下属
 
  this.add = function(employee){
    this._subordinates.push(employee);
  }
 
  this.remove = function(employee){
    this._subordinates.splice(this._subordinates.indexOf(employee),1);
  }
 
  this.getSubordinates = function(){
    return this._subordinates;
  }
  this.toString = function(){
    console.log('姓名:'+this._name+',职位:'+this._dept)
  }
}
var JAVARD = function(name,dept){
  this._name = name || '';  //姓名
  this._dept = dept || '';  //职位
 
  this.toString = function(){
    console.log('姓名:'+this._name+',职位:'+this._dept)
  }
}
 
var FERD = function(name,dept){
  this._name = name || '';  //姓名
  this._dept = dept || '';  //职位
  this.toString = function(){
    console.log('姓名:'+this._name+',职位:'+this._dept)
  }
}
 
function addData(){
  var CEO = new LEADER('spancer','CEO');
 
  var CTO = new LEADER('zijian','CTO');
 
  var MANAGER = new LEADER('jiang','LEADER');
 
  var JAVA_LEADER = new LEADER('fei','JAVA_LEADER');
  var FE_LEADER = new LEADER('risker','FE_LEADER');
 
  var wh = new FERD('wanghui','FE');
  var si = new FERD('si','FE');
  var amy = new FERD('amy','FE');
 
  var wei = new JAVARD('wei','JAVA');
  var guo = new JAVARD('guo','JAVA');
  var yuan = new JAVARD('yuan','JAVA');
 
  CEO.add(CTO);
 
  CTO.add(MANAGER);
 
  MANAGER.add(JAVA_LEADER);
  MANAGER.add(FE_LEADER);
 
  FE_LEADER.add(wh);
  FE_LEADER.add(si);
  FE_LEADER.add(amy);
 
  JAVA_LEADER.add(wei);
  JAVA_LEADER.add(guo);
  JAVA_LEADER.add(yuan);
  return CEO;
}
var eachEmployee = function(employee){
  for(var employ of employee.getSubordinates()){
    employ.toString();
    if(employ.getSubordinates && employ.getSubordinates().length > 0){
      eachEmployee(employ);
    }
  }
}
 
var CEO = addData();
CEO.toString();
eachEmployee(CEO);
// 姓名:spancer,职位:CEO
// 姓名:zijian,职位:CTO
// 姓名:jiang,职位:LEADER
// 姓名:fei,职位:JAVA_LEADER
// 姓名:wei,职位:JAVA
// 姓名:guo,职位:JAVA
// 姓名:yuan,职位:JAVA
// 姓名:risker,职位:FE_LEADER
// 姓名:wanghui,职位:FE
// 姓名:si,职位:FE
// 姓名:amy,职位:FE

这里我们简单写的这个demo,用来对公司组织架构进行遍历输出。因为rd和leader具体职能的不同,我们把技术和管理分为两大类。但是这样的设计存在很多问题:

* 可扩展性差,当一个新的职位产生,在对其归类时是新增一个还是放到已有类目下面都是一个问题。
* 当某一行为发生变化需要挨个修改leader类rd类,不符合开关原则。

接下来我们用组合模式实现下:

var Employee = function(name, dept){
  this._name = name || '';  //姓名
  this._dept = dept || '';  //职位
  this._subordinates = [];  //下属
 
  this.add = function(employee){
    this._subordinates.push(employee);
  }
 
  this.remove = function(employee){
    this._subordinates.splice(this._subordinates.indexOf(employee),1);
  }
 
  this.getSubordinates = function(){
    return this._subordinates;
  }
  this.toString = function(){
    console.log('姓名:'+this._name+',职位:'+this._dept)
  }
}
 
function addData(){
  var CEO = new Employee('spancer','CEO');
 
  var CTO = new Employee('zijian','CTO');
 
  var LEADER = new Employee('jiang','LEADER');
 
  var JAVA_LEADER = new Employee('fei','JAVA_LEADER');
  var FE_LEADER = new Employee('risker','FE_LEADER');
 
  var wh = new Employee('wanghui','FE');
  var si = new Employee('si','FE');
  var amy = new Employee('amy','FE');
 
  var wei = new Employee('wei','JAVA');
  var guo = new Employee('guo','JAVA');
  var yuan = new Employee('yuan','JAVA');
 
  CEO.add(CTO);
 
  CTO.add(LEADER);
 
  LEADER.add(JAVA_LEADER);
  LEADER.add(FE_LEADER);
 
  FE_LEADER.add(wh);
  FE_LEADER.add(si);
  FE_LEADER.add(amy);
 
  JAVA_LEADER.add(wei);
  JAVA_LEADER.add(guo);
  JAVA_LEADER.add(yuan);
  return CEO;
}
var eachEmployee = function(employee){
  for(var employ of employee.getSubordinates()){
    employ.toString();
    if(employ.getSubordinates().length > 0){
      eachEmployee(employ);
    }
  }
}
 
var CEO = addData();
CEO.toString();
eachEmployee(CEO);
// 姓名:spancer,职位:CEO
// 姓名:zijian,职位:CTO
// 姓名:jiang,职位:LEADER
// 姓名:fei,职位:JAVA_LEADER
// 姓名:wei,职位:JAVA
// 姓名:guo,职位:JAVA
// 姓名:yuan,职位:JAVA
// 姓名:risker,职位:FE_LEADER
// 姓名:wanghui,职位:FE
// 姓名:si,职位:FE
// 姓名:amy,职位:FE

大家可以对比下两段代码的差异,我们用一个Employee类来替换leader和rd类,其实这就是组合模式的关键:
定义一个抽象类,它既可以代表leader也可以代表rd,添加、打印时也基于Employee类,而无需知道这个人是什么角色。可以对其进行统一处理。

组合模式总结:

优点:
* 可以清楚的定义存在层次关系的复杂对象,让客户端开发过程中忽略层次的差异
* 全局修改时,只需修改一处位置

缺点:
* 无法对生成结果进行限制,不能像第一个例子一样,所有的rd都没有下级员工属性,也没有对应方法。所以在使用时要注意这些约束

适用场景;
* 在一个面向对象的语言开发系统中需要处理一个树形结构。
* 在具有整体和部分的结构中,希望忽略掉二者差异,使客户端一致对待。

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

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

Javascript 相关文章推荐
JScript中的undefined和"undefined"的区别
Mar 08 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue开发移动端底部导航条功能
Apr 08 #Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 #Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 #Javascript
JS快速实现简单计算器
Apr 08 #Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 #Javascript
vue-cli3单页构建大型项目方案
Apr 07 #Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 #Javascript
You might like
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
python编写的最短路径算法
2015/03/25 Python
python 计算文件的md5值实例
2017/01/13 Python
Python变量和数据类型详解
2017/02/15 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
python合并同类型excel表格的方法
2018/04/01 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
pandas删除指定行详解
2019/04/04 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
Python中过滤字符串列表的方法
2020/12/22 Python
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
期末评语大全
2014/05/04 职场文书
2014年医生工作总结
2014/11/21 职场文书
泰山导游词
2015/02/02 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书