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 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
js实现延迟加载的方法
Jun 24 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
js实现图片实时时钟
Jan 15 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
vue实现放大镜效果
Sep 17 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
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
php缓存技术详细总结
2013/08/07 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
jQuery的一些注意
2006/12/06 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
vue-router 权限控制的示例代码
2017/09/21 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
3分钟学会一个Python小技巧
2018/11/23 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
python支持多线程的爬虫实例
2019/12/21 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
三月雷锋月活动总结
2014/07/03 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
地球一小时活动总结
2015/02/27 职场文书
校长个人总结
2015/03/03 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android