本文實(shí)例講述了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)組合模式。分享給大家供大家參考，具體如下：

概述

關(guān)于組合模式的定義：組合模式(Composite Pattern)有時(shí)候又叫做部分-整體模式，它使我們樹(shù)型結(jié)構(gòu)的問(wèn)題中，模糊了簡(jiǎn)單元素和復(fù)雜元素的概念，客戶程序可以向處理簡(jiǎn)單元素一樣來(lái)處理復(fù)雜元素,從而使得客戶程序與復(fù)雜元素的內(nèi)部結(jié)構(gòu)解耦。來(lái)自百度百科：http://baike.baidu.com/view/3591789.htm

其實(shí)從面向?qū)ο笾逯螅cjavascript本身關(guān)系不是很大，更重要的是設(shè)計(jì)模式的一些概念，只要了解javascript面向?qū)ο蟮囊话阒R(shí)，掌握設(shè)計(jì)模式的含義，代碼本身并不是很難。

這里簡(jiǎn)單說(shuō)一下組合模式，其實(shí)組合模式就是將一系列相似或相近的對(duì)象組合在一個(gè)大的對(duì)象，由這個(gè)大對(duì)象提供一些常用的接口來(lái)對(duì)這些小對(duì)象進(jìn)行操作，代碼可重用，對(duì)外操作簡(jiǎn)單。例如對(duì)于一個(gè)form里的元素，不考慮頁(yè)面設(shè)計(jì)的情況下，一般就剩下input了，對(duì)于這些input都有name和value的屬性，因此可以將這些input元素作為form對(duì)象的成員組合起來(lái)，form對(duì)象提供對(duì)外的接口，便可以實(shí)現(xiàn)一些簡(jiǎn)單的操作，比如設(shè)置某個(gè)input的value，添加/刪除某個(gè)input等等……

正文

介紹：組合模式又叫部分整體模式，用于把一組相似的對(duì)象當(dāng)作一個(gè)單一的對(duì)象。組合模式依據(jù)樹(shù)形結(jié)構(gòu)來(lái)組合對(duì)象，用來(lái)表示部分以及整體層次

定義：組合多個(gè)對(duì)象形成樹(shù)形結(jié)構(gòu)以表示具有整體一部分關(guān)系的層次機(jī)構(gòu)。組合模式對(duì)單個(gè)對(duì)象（即葉子對(duì)象）和組合對(duì)象（即容器對(duì)象）的使用具有一致性，組合模式又可以成為整體一部分模式。它是一種對(duì)象結(jié)構(gòu)型模式。

場(chǎng)景：我們對(duì)公司的人員架構(gòu)進(jìn)行一下打印，假設(shè)所有管理崗和開(kāi)發(fā)崗的區(qū)別只有一個(gè)，是不是有下級(jí)員工。我們來(lái)實(shí)現(xiàn)下：

示例：

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

這里我們簡(jiǎn)單寫(xiě)的這個(gè)demo，用來(lái)對(duì)公司組織架構(gòu)進(jìn)行遍歷輸出。因?yàn)閞d和leader具體職能的不同，我們把技術(shù)和管理分為兩大類(lèi)。但是這樣的設(shè)計(jì)存在很多問(wèn)題：

* 可擴(kuò)展性差，當(dāng)一個(gè)新的職位產(chǎn)生，在對(duì)其歸類(lèi)時(shí)是新增一個(gè)還是放到已有類(lèi)目下面都是一個(gè)問(wèn)題。* 當(dāng)某一行為發(fā)生變化需要挨個(gè)修改leader類(lèi)rd類(lèi)，不符合開(kāi)關(guān)原則。

接下來(lái)我們用組合模式實(shí)現(xiàn)下：

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

大家可以對(duì)比下兩段代碼的差異，我們用一個(gè)Employee類(lèi)來(lái)替換leader和rd類(lèi)，其實(shí)這就是組合模式的關(guān)鍵：定義一個(gè)抽象類(lèi)，它既可以代表leader也可以代表rd，添加、打印時(shí)也基于Employee類(lèi)，而無(wú)需知道這個(gè)人是什么角色。可以對(duì)其進(jìn)行統(tǒng)一處理。

組合模式總結(jié)：

優(yōu)點(diǎn)：* 可以清楚的定義存在層次關(guān)系的復(fù)雜對(duì)象，讓客戶端開(kāi)發(fā)過(guò)程中忽略層次的差異* 全局修改時(shí)，只需修改一處位置

缺點(diǎn)：* 無(wú)法對(duì)生成結(jié)果進(jìn)行限制，不能像第一個(gè)例子一樣，所有的rd都沒(méi)有下級(jí)員工屬性，也沒(méi)有對(duì)應(yīng)方法。所以在使用時(shí)要注意這些約束

適用場(chǎng)景;* 在一個(gè)面向?qū)ο蟮恼Z(yǔ)言開(kāi)發(fā)系統(tǒng)中需要處理一個(gè)樹(shù)形結(jié)構(gòu)。* 在具有整體和部分的結(jié)構(gòu)中，希望忽略掉二者差異，使客戶端一致對(duì)待。

感興趣的朋友可以使用在線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ì)有所幫助。