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 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
php分页示例代码
2007/03/19 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
javascript中的一些注意事项 更新中
2010/12/06 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
jqTransform美化表单
2015/10/10 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python教程之全局变量用法
2016/06/27 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
postman传递当前时间戳实例详解
2019/09/14 Python
Python 列表的清空方式
2020/01/13 Python
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
C语言笔试集
2012/07/24 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
中学家长会邀请函
2014/01/17 职场文书
安全生产责任书
2014/03/12 职场文书
教师自我鉴定范文
2014/03/20 职场文书
预备党员公开承诺书
2014/05/28 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
php引用传递
2021/04/01 PHP
MYSQL如何查看操作日志详解
2022/05/30 MySQL