JavaScript组合设计模式--改进引入案例分析

本文实例讲述了javascript组合设计模式--改进引入案例。分享给大家供大家参考，具体如下：

对于组合设计模式：

 （1）组合模式中把对象分为两种(组合对象,和叶子对象)
 （2）组合对象和叶子对象实现:同一批操作
 （3）对组合对象执行的操作可以向下传递到叶子节点进行操作
 （4）这样就会弱化类与类之间的耦合
 （5）他常用的手法是把对象组合成属性结构的对象

根据组合模式的这些特性我们改写代码如下：

由于用到了接口检验所以我们先引入接口文件代码

//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
var interface=function (name,methods) {//name：接口名字
  if(arguments.length<2){
    alert("必须是两个参数")
  }
  this.name=name;
  this.methods=[];//定义一个空数组装载函数名
  for(var i=0;i<methods.length;i++){
    if(typeof methods[i]!="string"){
      alert("函数名必须是字符串类型");
    }else {
      this.methods.push( methods[i]);
    }
  }
};
interface.ensureimplement=function (object) {
  if(arguments.length<2){
    throw new error("参数必须不少于2个")
    return false;
  }
  for(var i=1;i<arguments.length;i++){
    var inter=arguments[i];
    //如果是接口就必须是interface类型
    if(inter.constructor!=interface){
      throw new error("如果是接口类的话，就必须是interface类型");
    }
    //判断接口中的方法是否全部实现
    //遍历函数集合
    for(var j=0;j<inter.methods.length;j++){
      var method=inter.methods[j];//接口中所有函数

      //object[method]传入的函数
      //最终是判断传入的函数是否与接口中所用函数匹配
      if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
        throw new error("实现类中没有完全实现接口中的所有方法")
      }
    }
  }
}

（1）统一接口

var composite=new interface("composite",["getchildbyname","add"]);//侧重点获取子
var student=new interface("composite",["gotoclass","finishclass"]);//侧重点为每个对象的实现

（2）定义组合类

 var compositeobj=function (name) {
         this.name=name;
         this.type="com";//默认是组合类
         var childs=new array();
        //得到相关的所有孩子节点
         this.getchildbyname=function (name) {
           //涉及到递归
           var tochilds=new array();
           if(!name){
             for(var i=0;i<childs.length;i++){
                if(childs[i].type=="com"){
                  tochilds=tochilds.concat(childs[i].getchildbyname())
                }else {
                  tochilds.push(childs[i]);
                }
             }
           }else {
             for (var i = 0; i < childs.length; i++){
               if(childs[i].name==name){
                 if(childs[i].type=="com"){
                   tochilds=tochilds.concat(childs[i].getchildbyname());
                   break;
                 }else {
                   tochilds.push(childs[i]);
                   break;
                 }
               }else {
                 if(childs[i].type == "com"){
                   tochilds =tochilds.concat(childs[i].getchildbyname(name));
                 }
               }
             }
               }
               return tochilds;
         };
         //增加子节点
         this.add=function (child) {
           childs.push(child);
           return this;
         };
         //去上课
        this.gotoclass=function (name) {
        var tochilds=this.getchildbyname(name);
         for(var i=0;i<tochilds.length;i++){
              tochilds[i].gotoclass();
         }
      };
          //下课
         this.finishclass=function (name) {
      var tochilds=this.getchildbyname(name);
      for(var i=0;i<tochilds.length;i++){
        tochilds[i].finishclass();
      }
    };
    interface.ensureimplement(this,composite,student);
    };

（3）定义叶子类

  var studentobj=function (name) {
    this.name=name;
    this.type="student";//默认是叶子
    //得到所有孩子节点
   this.getchildbyname=function (name) {
     if(this.name==name){
       return this;
     }else {
       return null;
     }
   }
   //增加子节点
    this.add=function (child) {
      throw new error("add 不成被初始化(在叶子了中)")
    }
    //去上课
    this.gotoclass = function(name){
      document.write(this.name +" 去上课<br>");
    }
    //下课
    this.finishclass = function(name){
      document.write(this.name +" 下课<br>");
    }
    interface.ensureimplement(this,composite,student);
  }

（4）应用---将学校，班级，组，学生关联起来

 var astudent=new studentobj("我是a同学");
  var bstudent=new studentobj("我是b同学");
  var cstudent=new studentobj("我是c同学");
  var dstudent=new studentobj("我是d同学");
  var estudent=new studentobj("我是e同学");
  var fstudent=new studentobj("我是f同学");
  var gstudent=new studentobj("我是g同学");
  var hstudent=new studentobj("我是h同学");
  var istudent=new studentobj("我是i同学");

  var one = new compositeobj("一班");
  var oneone = new compositeobj("一班一组");
  oneone.add(astudent).add(bstudent);
  var onetwo = new compositeobj("一班二组");
  onetwo.add(cstudent).add(dstudent);

  one.add(oneone).add(onetwo);
  var two = new compositeobj("二班");
  var twoone = new compositeobj("二班一组");
  twoone.add(estudent).add(fstudent);
  var twotwo = new compositeobj("二班二组");
  twotwo.add(gstudent).add(hstudent).add(istudent)
  two.add(twoone).add(twotwo);
  var uspcat = new compositeobj("组合设计模式培训学校");
  uspcat.add(one).add(two);

（5）客户端调用api,只需要简单的安排去上课即可，也就是客户端只需要写去上课的代码即可

uspcat.gotoclass();
document.write("-------------------------<br>");
uspcat.gotoclass("一班");
document.write("-------------------------<br>");
uspcat.gotoclass("二班一组");

感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。