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 相关文章推荐
JS 实现完美include载入实现代码
Aug 05 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
vue生命周期实例小结
Aug 15 Javascript
react-navigation之动态修改title的内容
Sep 26 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
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
公司司机岗位职责范本
2014/03/03 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA