JavaScript组合模式---引入案例分析


Posted in Javascript onMay 23, 2020

本文实例讲述了JavaScript组合模式。分享给大家供大家参考,具体如下:

首先:

使用一个例子来引入组合模式,需求为
(1)有一个学校有2个班(一班,二班)
(2)每个班级分2个小组(一班一组,一班二组,二班一组,二班二组)
(3)学校计算机教室有限,每一个小组分着来上课

然后:根据需求我们可以简单看出这里面涉及到   学校,班级,组,和学生总共4个类

使用程序模拟  这4个类为,

(1)学校类

var school=function (name) {
  this.name=name;
  var classes=new Array();
   this.addClasses=function (cla) {
   classes.push(classe);
   }
   this.getClass=function () {
    return classes;
   }
 }

(2)班级类

//班级类
 var classes=function (name) {
  this.name = name;
  var groups = new Array();
  this.addGroup = function (group) {
   groups.push(group);
   return this;
  };
  this.getGroups = function () {
   return groups;
  }
 };

(3)组类

//组
 var group=function (name) {
  this.name=name;
  var students=new Array();
  var addStudents=function (student) {
   students.push(student);
   return this;
  }
   this.geStudent=function () {
    return students;
   }
 };

(4)学生类

//学生类
  var student=function (name) {
   this.name=name;
   this.gotoClass=function () {
    document.write(name+":我是学生,我要去上课 ")
   };
   this.finishClass=function () {
    document.write(name+": 终于下课了");
   }
  };

其次,测试需满足如下为:

(1)每个班级分2个小组(一班一组,一班二组,二班一组,二班二组)
(2)学校计算机教室有限,每一个小组的学生分着来上课
(3)现在我们倒着写,从学生-->组->班级-->学校

//学生实例
 var astudent=new student("我是a同学");
 var bstudent=new student("我是b同学");
 var cstudent=new student("我是c同学");
 var dstudent=new student("我是d同学");
 var estudent=new student("我是e同学");
 var fstudent=new student("我是f同学");
 var gstudent=new student("我是g同学");
 var hstudent=new student("我是h同学");
 var istudent=new student("我是i同学");

//班级实例(1)
  var class1=new classes("一班");
  //组1
 var oneOne=new group("一班一组");
  //组中添加学生
 oneOne.addStudents(astudent).addStudents(bstudent);
 //组2
 var oneTwo=new group("一班二组");
 //组中添加学生
 oneTwo.addStudents(cstudent).addStudents(dstudent);

 class1.addGroup(oneOne).addGroup(oneTwo);
 //班级实例2
 var class2=new classes("二班");
 //组1
 var towOne=new group("二班一组");
 //组中添加学生
 towOne.addStudents(estudent).addStudents(fstudent);

 //组2
 var towTwo=new group("二班二组");
 //组中添加学生
 towTwo.addStudents(gstudent).addStudents(hstudent).addStudents(istudent);
 //
 class2.addGroup(towOne).addGroup(towTwo);

 //学校实例
 var usSchool=new school("组合模式学校");

最后,开学了,我们准备按照要求去上课吧,

安排为:一班一组去上课 学校-->班级-->组-->学生

var classes=usSchool.getClass();//班级
  for(var i=0;i<classes.length;i++){
   if(classes[i].name=="一班"){
    for(var j=0;j<classes[i].getGroups().length;j++){
     if(classes[i].classes[i].getGroups()[j]=="一组"){
      var students=classes[i].classes[i].getGroups()[j].geStudent();
      for(var k=0;k<students.length;k++){
       students[k].gotoClass();
      }
     }
    }
   }
  }

最后,我只是想安排一个都要写这么多的代码,那如何是一个学校有上千个班级,那么要疯了。

这种一定不适合业务的扩展,为此我们使用组合模式来解决上述的问题。
为啥要用设计模式呢?
因为设计模式有如下的一些操作方式:
(1)组合模式中把对象分为两种(组合对象,和叶子对象)
(2)组合对象和叶子对象实现:同一批操作
(3)对组合对象执行的操作可以向下传递到叶子节点进行操作
(4)这样就会弱化类与类之间的耦合
(5)他常用的手法是把对象组合成属性结构的对象

接下来介绍:JavaScript组合设模式--改进上述引入的例子

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

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

Javascript 相关文章推荐
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
js验证框架实现代码分享
May 18 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
Vue的props父传子的示例代码
May 20 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 #Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 #Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 #Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 #Javascript
微信小程序点击滚动到指定位置的实现
May 22 #Javascript
使用JavaScript通过前端发送电子邮件
May 22 #Javascript
uni-app微信小程序登录授权的实现
May 22 #Javascript
You might like
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
简单学习Python time模块
2016/04/29 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
德国户外商店:eXXpozed
2020/07/25 全球购物
个性婚礼策划方案
2014/05/17 职场文书
护理专业自荐书
2014/06/04 职场文书
农村门前三包责任书
2014/07/25 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
PHP解决高并发问题
2021/04/01 PHP
python单元测试之pytest的使用
2021/06/07 Python
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB