首页 >> js开发 >> js代码JavaScript组合模式---引入案例分析
js代码JavaScript组合模式---引入案例分析
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了JavaScript组合模式。分享给大家供大家参考，具体如下：首先：首先：使用一个例子来引入组合模式，需求为
（1）有一个学校有2个班(一班,二班)
（2）每个班级分2个小组(一班一组,一班二组,二班一组,二班二组)
（3）学校计算机教室有限,每一个小组分着来上课然后：根据需求我们可以简单看出这里面涉及到
学校，班级，组，和学生总共4个类然后：根据需求我们可以简单看出这里面涉及到
学校，班级，组，和学生总共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;
}
}
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;
}
};
//班级类
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;
}
};
//组
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+": 终于下课了");
}
};
//学生类
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 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
if(classes[i].name=="一班"){
for(var j=0;j
if(classes[i].classes[i].getGroups()[j]=="一组"){
var students=classes[i].classes[i].getGroups()[j].geStudent();
for(var k=0;k
students[k].gotoClass();
}
}
}
}
}
var classes=usSchool.getClass();//班级
for(var i=0;i
if(classes[i].name=="一班"){
for(var j=0;j
if(classes[i].classes[i].getGroups()[j]=="一组"){
var students=classes[i].classes[i].getGroups()[j].geStudent();
for(var k=0;k
students[k].gotoClass();
}
}
}
}
}
最后，我只是想安排一个都要写这么多的代码，那如何是一个学校有上千个班级，那么要疯了。最后这种一定不适合业务的扩展，为此我们使用组合模式来解决上述的问题。
为啥要用设计模式呢？
因为设计模式有如下的一些操作方式：
（1）组合模式中把对象分为两种(组合对象,和叶子对象)
（2）组合对象和叶子对象实现:同一批操作
（3）对组合对象执行的操作可以向下传递到叶子节点进行操作
（4）这样就会弱化类与类之间的耦合
（5）他常用的手法是把对象组合成属性结构的对象接下来介绍：JavaScript组合设模式--改进上述引入的例子JavaScript组合设模式--改进上述引入的例子感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
（1）有一个学校有2个班(一班,二班)
（2）每个班级分2个小组(一班一组,一班二组,二班一组,二班二组)
（3）学校计算机教室有限,每一个小组分着来上课然后：根据需求我们可以简单看出这里面涉及到
学校，班级，组，和学生总共4个类然后：根据需求我们可以简单看出这里面涉及到
学校，班级，组，和学生总共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;
}
}
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;
}
};
//班级类
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;
}
};
//组
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+": 终于下课了");
}
};
//学生类
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 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
if(classes[i].name=="一班"){
for(var j=0;j
if(classes[i].classes[i].getGroups()[j]=="一组"){
var students=classes[i].classes[i].getGroups()[j].geStudent();
for(var k=0;k
students[k].gotoClass();
}
}
}
}
}
var classes=usSchool.getClass();//班级
for(var i=0;i
if(classes[i].name=="一班"){
for(var j=0;j
if(classes[i].classes[i].getGroups()[j]=="一组"){
var students=classes[i].classes[i].getGroups()[j].geStudent();
for(var k=0;k
students[k].gotoClass();
}
}
}
}
}
最后，我只是想安排一个都要写这么多的代码，那如何是一个学校有上千个班级，那么要疯了。最后这种一定不适合业务的扩展，为此我们使用组合模式来解决上述的问题。
为啥要用设计模式呢？
因为设计模式有如下的一些操作方式：
（1）组合模式中把对象分为两种(组合对象,和叶子对象)
（2）组合对象和叶子对象实现:同一批操作
（3）对组合对象执行的操作可以向下传递到叶子节点进行操作
（4）这样就会弱化类与类之间的耦合
（5）他常用的手法是把对象组合成属性结构的对象接下来介绍：JavaScript组合设模式--改进上述引入的例子JavaScript组合设模式--改进上述引入的例子感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
相关文章:
- jsvue+element-ui JYAdmin后台管理系统模板解析js大全
- js谈一谈vue请求数据放在created好还是mounted里好js大全
- js解决vue页面渲染但dom没渲染的操作js大全
- js解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题js大全
- jsVue组件跨层级获取组件操作js大全
- js代码处理JavaScript值为undefined的7个小技巧
- jsvuex中store存储store.commit和store.dispatch的用法js大全
- jsJS的时间格式化和时间戳转换函数示例详解js大全
- jsVue中的this.$options.data()和this.$data用法说明js大全
- jsvue键盘事件点击事件加native操作js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
