本文實例講述了JavaScript組合模式。分享給大家供大家參考，具體如下：

首先：

使用一個例子來引入組合模式，需求為（1）有一個學校有2個班(一班,二班)（2）每個班級分2個小組(一班一組,一班二組,二班一組,二班二組)（3）學校計算機教室有限,每一個小組分著來上課

然后：根據(jù)需求我們可以簡單看出這里面涉及到 學校，班級，組，和學生總共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）現(xiàn)在我們倒著寫，從學生-->組->班級-->學校

//學生實例 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(); } } } } }

最后，我只是想安排一個都要寫這么多的代碼，那如何是一個學校有上千個班級，那么要瘋了。

這種一定不適合業(yè)務的擴展，為此我們使用組合模式來解決上述的問題。為啥要用設計模式呢？因為設計模式有如下的一些操作方式：（1）組合模式中把對象分為兩種(組合對象,和葉子對象)（2）組合對象和葉子對象實現(xiàn):同一批操作（3）對組合對象執(zhí)行的操作可以向下傳遞到葉子節(jié)點進行操作（4）這樣就會弱化類與類之間的耦合（5）他常用的手法是把對象組合成屬性結(jié)構的對象

接下來介紹：JavaScript組合設模式--改進上述引入的例子

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設計有所幫助。