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验证表单大全
Nov 25 Javascript
js变换显示图片的实例
Apr 16 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
微信小程序开发之左右分栏效果的实例代码
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
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
PHP实现简单日历类编写
2020/08/28 PHP
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
浅析python连接数据库的重要事项
2021/02/22 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
策划主管的工作职责
2013/11/24 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
三方协议书范本
2014/04/22 职场文书
经验交流材料格式
2014/12/30 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
火烧圆明园观后感
2015/06/03 职场文书
最美乡村教师观后感
2015/06/11 职场文书
师德师风培训感言
2015/08/03 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP