快捷導(dǎo)航

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

更新時(shí)間：2020年05月23日 09:49:04 作者：WFaceBoss

這篇文章主要介紹了JavaScript組合模式,結(jié)合具體案例形式分析了JavaScript組合模式定義、應(yīng)用與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

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

首先：

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

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

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

（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）班級(jí)類

//班級(jí)類
 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+": 終于下課了");
   }
  };

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

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

最后，開學(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è)都要寫這么多的代碼，那如何是一個(gè)學(xué)校有上千個(gè)班級(jí)，那么要瘋了。

這種一定不適合業(yè)務(wù)的擴(kuò)展，為此我們使用組合模式來解決上述的問題。
為啥要用設(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ì)弱化類與類之間的耦合
（5）他常用的手法是把對(duì)象組合成屬性結(jié)構(gòu)的對(duì)象

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

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

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

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

您可能感興趣的文章: