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

首先：

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

然后：根據(jù)需求我們可以簡單看出這里面涉及到 學(xué)校，班級，組，和學(xué)生總共4個類

使用程序模擬 這4個類為，

（1）學(xué)校類

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）學(xué)生類

//學(xué)生類 var student=function (name) { this.name=name; this.gotoClass=function () { document.write(name+'：我是學(xué)生，我要去上課 ') }; this.finishClass=function () { document.write(name+': 終于下課了'); } };

其次，測試需滿足如下為：

（1）每個班級分2個小組(一班一組,一班二組,二班一組,二班二組)（2）學(xué)校計算機(jī)教室有限,每一個小組的學(xué)生分著來上課（3）現(xiàn)在我們倒著寫，從學(xué)生-->組->班級-->學(xué)校

//學(xué)生實例 var astudent=new student('我是a同學(xué)'); var bstudent=new student('我是b同學(xué)'); var cstudent=new student('我是c同學(xué)'); var dstudent=new student('我是d同學(xué)'); var estudent=new student('我是e同學(xué)'); var fstudent=new student('我是f同學(xué)'); var gstudent=new student('我是g同學(xué)'); var hstudent=new student('我是h同學(xué)'); var istudent=new student('我是i同學(xué)');//班級實例(1) var class1=new classes('一班'); //組1 var oneOne=new group('一班一組'); //組中添加學(xué)生 oneOne.addStudents(astudent).addStudents(bstudent); //組2 var oneTwo=new group('一班二組'); //組中添加學(xué)生 oneTwo.addStudents(cstudent).addStudents(dstudent); class1.addGroup(oneOne).addGroup(oneTwo); //班級實例2 var class2=new classes('二班'); //組1 var towOne=new group('二班一組'); //組中添加學(xué)生 towOne.addStudents(estudent).addStudents(fstudent); //組2 var towTwo=new group('二班二組'); //組中添加學(xué)生 towTwo.addStudents(gstudent).addStudents(hstudent).addStudents(istudent); // class2.addGroup(towOne).addGroup(towTwo); //學(xué)校實例 var usSchool=new school('組合模式學(xué)校');

最后，開學(xué)了，我們準(zhǔn)備按照要求去上課吧，

安排為：一班一組去上課 學(xué)校-->班級-->組-->學(xué)生

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(); } } } } }

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

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

接下來介紹：JavaScript組合設(shè)模式--改進(jìn)上述引入的例子

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

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

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