《JavaScript设计模式与开发实践》——第十章(组合模式)学习记录

回顾第十章的宏命令

var closeDoorCommand = {
    execute:function(){
        console.log("关门");
    }
}
var openPcCommand = {
    execute:function(){
        console.log("开电脑")
    }
}
var openQQCommand = {
    execute:function(){
        console.log("登录QQ")
    }
}
var MacroCommand = function(){
    return {
        commandsList:[],
        add:function(command){
            this.commandsList.push(command);
        },
        execute:function(){
            for (let i = 0,command; command = this.commandsList[i++];) {
                command.execute();
                
            }
        }
    }
}
var macroCommand = MacroCommand();
macroCommand.add(closeDoorCommand)
macroCommand.add(openPcCommand)
macroCommand.add(openQQCommand)

macroCommand.execute();

通过观察可以发现,宏命令中包含了一组子命令,它们组成了一个树形结构。其中MacroCommand被称为组合对象,closeDoorCommand、openPcCommand、openQQCommand都是叶对象。
组合模式将对象组合成树形结构,以表示“部分-整体”的层次结构。除了用来表示树形结构之外,组合模式的另一个好处是通过对象的多态性表现,使得用户对单个对象和组合对象的使用具有一致性。
在组合模式中,请求在树中传递的过程总是遵循一种逻辑。
以宏命令为例,请求从树最顶端的对象往下传递,如果当前处理请求的对象是叶对象(普通子命令),叶对象自身会对请求作出相应的处理;如果当前处理请求的对象是组合对象(宏命令),组合对象则会遍历它属下的子节点,将请求继续传递给这些子节点。

更强大的宏命令

上面的代码包含了关门、开电脑、登录QQ这3个命令。现在我们需要一个“超级万能遥控器”,可以控制家里所有的电器,这个遥控器拥有以下功能:

  1. 打开空调
  2. 打开电视和音响
  3. 关门、开电脑、登录QQ

首先在节点中放置一个按钮

<button id="button">超级命令</button>
var MacroCommand = function(){
      return {
          commandsList:[],
          add:function(command){
              this.commandsList.push(command);
          },
          execute:function(){
              for (let i = 0,command; command = this.commandsList[i++];) {
                  command.execute();
              }
          }
      }
  }
var openAcCommand = {
      execute:function(){
          console.log("打开空调")
      }
 }
 /**
  * 电视和音响是连接在一起的,所以可以用一个宏命令来组合打开电视和打开音响的命令
  **/
 var openTvCommand = {
      execute:function(){
          console.log("打开电视")
      }
 }
 var openSoundCommand = {
      execute:function(){
          console.log("打开音响")
      }
 }
 var macroCommand1 = MacroCommand();
 macroCommand1.add(openTvCommand);
 macroCommand1.add(openSoundCommand);
/**
* 关门、打开电脑和登录QQ的命令
**/
 var closeDoorCommand = {
     execute:function(){
         console.log("关门");
     }
 }
 var openPcCommand = {
     execute:function(){
         console.log("开电脑")
     }
 }
 var openQQCommand = {
     execute:function(){
         console.log("登录QQ")
     }
 }
 var macroCommand2 = MacroCommand();
 macroCommand2.add(closeDoorCommand);
 macroCommand2.add(openPcCommand);
 macroCommand2.add(openQQCommand);
 /**
  * 现在把所有的命令组合成一个“超级命令”
  **/
 var macroCommand = MacroCommand();
 macroCommand.add(openAcCommand);
 macroCommand.add(macroCommand1);
 macroCommand.add(macroCommand2);
 /**
  * 最后给遥控器绑定“超级命令”
  **/
 var setCommand = (function(command){
   document.getElementById('button').onclick = function(){
      command.execute();  
     }
 })(macroCommand);

在这里插入图片描述

组合模式的例子–扫描文件夹

分别定义好文件夹Folder和文件File这两类

   /************************ Folder ******************************/
var Folder = function(name){
    this.name = name;
    this.files = [];
}
Folder.prototype.add = function(file){
    this.files.push(file);
}
Folder.prototype.scan = function(){
    console.log('开始扫描文件夹'+this.name);
    for(var i = 0,file,files = this.files;file = files[i++];){
        file.scan();
    }
}
/************************ File ******************************/
var File = function(name){
    this.name = name;
}
File.prototype.add = function(file){
    throw new Error('文件下面不能再添加文件');
}
File.prototype.scan = function(){
    console.log('开始扫描文件:'+this.name);

}

接下来创建一些文件夹和文件对象,并且让它们组合成一棵树,这棵树就是的文件目录结构:

var folder = new Folder('学习资料');
var folder1 = new Folder('Javascript');
var folder2 = new Folder('jQuery');

var file1 = new File('Javascript设计模式');
var file2 = new File('精通jQuery');
var file3 = new File('重构与模式');

folder1.add(file1);
folder2.add(file2);

folder.add(folder1);
folder.add(folder2);
folder.add(file3);

现在我们得到了这些文件对象:

var folder3 = new Folder('Nodejs');
var file4 = new File('深入浅出Node.js');
folder3.add(file4);

var file5 = new File('Javascript语言精髓与编程实践');

接下来就是把这些文件都添加到原有的树中:

folder.add(folder3);
folder.add(file5);

运用了组合模式之后,扫描整个文件夹的操作也是轻而易举的,我们只需要操作树的最顶端对象:

folder.scan();

在这里插入图片描述

一些值得注意的地方

1.组合模式不是父子关系
组合模式是一种HAS-A(聚合)的关系,而不是IS-A。组合对象把请求委托给它所包含的所有叶对象,它们能够合作的关键是拥有相同的接口。

2.对叶对象操作的一致性
组合模式除了要求组合对象和叶对象拥有相同的接口之处,还有一个必要条件,就是对一组叶对象的操作必须具有一致性。

3.双向映射关系
比如说某公司要发放过节费,从公司到部门到各个小组再到每名员工,这是一个组合模式的好例子,但是如果有的员工属于多个组织架构,那么他就会收到多份过节费。
这种复合情况下我们必须给父节点和子节点建立双向映射关系,一个简单的方法是给小组和员工对象都增加集合来保存对方的引用。但是这种相互间的引用相当复杂,而且对象之间产生了过多的耦合性,修改或者删除一个对象都变得困难,此时我们可以引入中介者模式来管理这些对象。

4.用职责链模式提高组合模式性能
在组合模式中,如果树的结构比较复杂,节点数量很多,在遍历树的过程中,性能方面也许表现得不够理想。有时候我们确实可以借助一些技巧,在实际操作中避免遍历整棵树,有一种方案是助职责链模式。职责链模式一般需要我们手动去设置链条,但在组合模式中,父对象和子对象之间实际上形成了天然的职责链。让请求顺着链条从父对象往子对象传递,或者是反过来从子对象往父对象传递,直到遇到可以处理该请求的对象为止,这也是职责链模式的经典运用场景之一。

引用父对象

有时候我们需要在子节点上保持对父节点的引用,比如上面扫描文件的例子,有可能需要让请求从子节点往父节点上冒泡传递。还有当我们删除某个文件的时候,实际上是从这个文件所在的上层文件夹中删除该文件的。
接下来改写上面的代码,增加this.parent属性,并且在调用add方法的时候,正确设置文件或者文件夹的父节点:

var Folder = function(name){
    this.name = name;
    this.parent = null;//增加 this.parent 属性
    this.files = [];
}
Folder.prototype.add = function(file){
    file.parent = this;//设置父对象
    this.files.push(file);
}
Folder.prototype.scan = function(){
    console.log('开始扫描文件夹'+this.name);
    for(var i = 0,file,files = this.files;file = files[i++];){
        file.scan();
    }
}

接下来增加移除方法:

Folder.prototype.remove = function(){
    if(!this.parent){//根节点或者树外的游离节点
        return;
    }
    for(var files = this.parent.files,l = files.length-1;l>=0;l--){
        var file = files[l];
        if(file === this){
            files.splice(l,1);
        }
    }
} 

file类的实现基本一致:

var File = function(name){
    this.name = name;
    this.parent = null;
}
File.prototype.add = function(file){
    throw new Error('文件下面不能再添加文件');
}
File.prototype.scan = function(){
    console.log('开始扫描文件:'+this.name);

}
File.prototype.remove = function(){
    if(!this.parent){//根节点或者树外的游离节点
        return;
    }
    for(var files = this.parent.files,l = files.length-1;l>=0;l--){
        var file = files[l];
        if(file === this){
            files.splice(l,1);
        }
    }
}

先来添加文件,然后删除folder1文件夹:

var folder = new Folder('学习资料');
var folder1 = new Folder('Javascript');

var file1 = new File('Javascript设计模式');
var file2 = new File('精通jQuery');

folder1.add(file2);
folder.add(folder1);
folder.add(file1);
folder1.remove();//移除文件
folder.scan();

在这里插入图片描述

何时使用组合模式

组合模式如果运用得当,可以大大简化客户的代码。主要适用于这两种情况:

  1. 表示对象的部分-整体层次结构。组合模式可以方便地构造一棵树来表示对象的部分-整体结构。特别是我们在开发期间不确定这棵树到底存在多少层次的时候。在树的构造最终完成之后,只需要通过请求树的最顶层对象,便能对整棵树做统一的操作。在组合模式中增加和删除树的节点非常方便,并且符合开放-封闭原则。
  2. 客户希望统一对待树中的所有对象。组合模式使客户可以忽略组合对象和叶对象的区别,客户在面对这棵树的时候,不用关心当前正在处理的对象是组合对象还是叶对象,也就不用写一堆if、else语句来分别处理它们。组合对象和叶对象会各自做自己正确的事情,这是组合模式最重要的能力。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值