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 相关文章推荐
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
javascript 命名空间以提高代码重用性
Nov 13 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
让你30分钟快速掌握vue3教程
Oct 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
php文件缓存类汇总
2014/11/21 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
Javascript的闭包
2009/12/31 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
Python性能优化技巧
2015/03/09 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
keras中的backend.clip用法
2020/05/22 Python
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
打架检讨书100字
2014/01/08 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
大雁塔导游词
2015/02/04 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015年新农合工作总结
2015/03/30 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python