关于组合模式的定义：组合模式(Composite Pattern)有时候又叫做部分-整体模式，它使我们树型结构的问题中，模糊了简单元素和复杂元素的概念，客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦。来自百度百科：
其实从面向对象之五之后，与javascript本身关系不是很大，更重要的是设计模式的一些概念，只要了解javascript面向对象的一般知识，掌握设计模式的含义，代码本身并不是很难。
这里简单说一下组合模式，其实组合模式就是将一系列相似或相近的对象组合在一个大的对象，由这个大对象提供一些常用的接口来对这些小对象进行操作，代码可重用，对外操作简单。例如对于一个form里的元素，不考虑页面设计的情况下，一般就剩下input了，对于这些input都有name和value的属性，因此可以将这些input元素作为form对象的成员组合起来，form对象提供对外的接口，便可以实现一些简单的操作，比如设置某个input的value，添加/删除某个input等等……
正文
介绍：组合模式又叫部分整体模式，用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象，用来表示部分以及整体层次
定义：组合多个对象形成树形结构以表示具有整体一部分关系的层次机构。组合模式对单个对象（即叶子对象）和组合对象（即容器对象）的使用具有一致性，组合模式又可以成为整体一部分模式。
它是一种对象结构型模式。
场景：我们对公司的人员架构进行一下打印，假设所有管理岗和开发岗的区别只有一个，是不是有下级员工。我们来实现下：
示例：
var LEADER = function(name,dept){ this._name = name || ''; //姓名 this._dept = dept || ''; //职位 this._subordinates = []; //下属 this.add = function(employee){ this._subordinates.push(employee); } this.remove = function(employee){ this._subordinates.splice(this._subordinates.indexOf(employee),1); } this.getSubordinates = function(){ return this._subordinates; } this.toString = function(){ console.log('姓名:'+this._name+',职位:'+this._dept) } } var JAVARD = function(name,dept){ this._name = name || ''; //姓名 this._dept = dept || ''; //职位 this.toString = function(){ console.log('姓名:'+this._name+',职位:'+this._dept) } } var FERD = function(name,dept){ this._name = name || ''; //姓名 this._dept = dept || ''; //职位 this.toString = function(){ console.log('姓名:'+this._name+',职位:'+this._dept) } } function addData(){ var CEO = new LEADER('spancer','CEO'); var CTO = new LEADER('zijian','CTO'); var MANAGER = new LEADER('jiang','LEADER'); var JAVA_LEADER = new LEADER('fei','JAVA_LEADER'); var FE_LEADER = new LEADER('risker','FE_LEADER'); var wh = new FERD('wanghui','FE'); var si = new FERD('si','FE'); var amy = new FERD('amy','FE'); var wei = new JAVARD('wei','JAVA'); var guo = new JAVARD('guo','JAVA'); var yuan = new JAVARD('yuan','JAVA'); CEO.add(CTO); CTO.add(MANAGER); MANAGER.add(JAVA_LEADER); MANAGER.add(FE_LEADER); FE_LEADER.add(wh); FE_LEADER.add(si); FE_LEADER.add(amy); JAVA_LEADER.add(wei); JAVA_LEADER.add(guo); JAVA_LEADER.add(yuan); return CEO; } var eachEmployee = function(employee){ for(var employ of employee.getSubordinates()){ employ.toString(); if(employ.getSubordinates && employ.getSubordinates().length > 0){ eachEmployee(employ); } } } var CEO = addData(); CEO.toString(); eachEmployee(CEO); // 姓名:spancer,职位:CEO // 姓名:zijian,职位:CTO // 姓名:jiang,职位:LEADER // 姓名:fei,职位:JAVA_LEADER // 姓名:wei,职位:JAVA // 姓名:guo,职位:JAVA // 姓名:yuan,职位:JAVA // 姓名:risker,职位:FE_LEADER // 姓名:wanghui,职位:FE // 姓名:si,职位:FE // 姓名:amy,职位:FE
这里我们简单写的这个demo，用来对公司组织架构进行遍历输出。因为rd和leader具体职能的不同，我们把技术和管理分为两大类。但是这样的设计存在很多问题：
* 可扩展性差，当一个新的职位产生，在对其归类时是新增一个还是放到已有类目下面都是一个问题。
* 当某一行为发生变化需要挨个修改leader类rd类，不符合开关原则。
接下来我们用组合模式实现下：
var Employee = function(name, dept){ this._name = name || ''; //姓名 this._dept = dept || ''; //职位 this._subordinates = []; //下属 this.add = function(employee){ this._subordinates.push(employee); } this.remove = function(employee){ this._subordinates.splice(this._subordinates.indexOf(employee),1); } this.getSubordinates = function(){ return this._subordinates; } this.toString = function(){ console.log('姓名:'+this._name+',职位:'+this._dept) } } function addData(){ var CEO = new Employee('spancer','CEO'); var CTO = new Employee('zijian','CTO'); var LEADER = new Employee('jiang','LEADER'); var JAVA_LEADER = new Employee('fei','JAVA_LEADER'); var FE_LEADER = new Employee('risker','FE_LEADER'); var wh = new Employee('wanghui','FE'); var si = new Employee('si','FE'); var amy = new Employee('amy','FE'); var wei = new Employee('wei','JAVA'); var guo = new Employee('guo','JAVA'); var yuan = new Employee('yuan','JAVA'); CEO.add(CTO); CTO.add(LEADER); LEADER.add(JAVA_LEADER); LEADER.add(FE_LEADER); FE_LEADER.add(wh); FE_LEADER.add(si); FE_LEADER.add(amy); JAVA_LEADER.add(wei); JAVA_LEADER.add(guo); JAVA_LEADER.add(yuan); return CEO; } var eachEmployee = function(employee){ for(var employ of employee.getSubordinates()){ employ.toString(); if(employ.getSubordinates().length > 0){ eachEmployee(employ); } } } var CEO = addData(); CEO.toString(); eachEmployee(CEO); // 姓名:spancer,职位:CEO // 姓名:zijian,职位:CTO // 姓名:jiang,职位:LEADER // 姓名:fei,职位:JAVA_LEADER // 姓名:wei,职位:JAVA // 姓名:guo,职位:JAVA // 姓名:yuan,职位:JAVA // 姓名:risker,职位:FE_LEADER // 姓名:wanghui,职位:FE // 姓名:si,职位:FE // 姓名:amy,职位:FE