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

首先：

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

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

使用程序模擬 這4個(gè)類(lèi)為，

（1）學(xué)校類(lèi)

var school=function (name) { this.name=name; var classes=new Array(); this.addClasses=function (cla) { classes.push(classe); } this.getClass=function () { return classes; } }

（2）班級(jí)類(lèi)

//班級(jí)類(lèi) 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）組類(lèi)

//組 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é)生類(lèi)

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

其次，測(cè)試需滿(mǎn)足如下為：

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

//學(xué)生實(shí)例 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é)');//班級(jí)實(shí)例(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); //班級(jí)實(shí)例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é)校實(shí)例 var usSchool=new school('組合模式學(xué)校');

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

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

var classes=usSchool.getClass();//班級(jí) 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(); } } } } }

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

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

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

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

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

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