JavaScript组合模式---引入案例分析

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。