《javascript設(shè)計模式》學(xué)習(xí)筆記七：Javascript面向?qū)ο蟪绦蛟O(shè)計組合模式詳解
本文實例講述了Javascript面向?qū)ο蟪绦蛟O(shè)計組合模式。分享給大家供大家參考，具體如下：
概述
關(guān)于組合模式的定義：組合模式(Composite Pattern)有時候又叫做部分-整體模式，它使我們樹型結(jié)構(gòu)的問題中，模糊了簡單元素和復(fù)雜元素的概念，客戶程序可以向處理簡單元素一樣來處理復(fù)雜元素,從而使得客戶程序與復(fù)雜元素的內(nèi)部結(jié)構(gòu)解耦。來自百度百科：http://baike.baidu.com/view/3591789.htm
其實從面向?qū)ο笾逯?，與javascript本身關(guān)系不是很大，更重要的是設(shè)計模式的一些概念，只要了解javascript面向?qū)ο蟮囊话阒R，掌握設(shè)計模式的含義，代碼本身并不是很難。
這里簡單說一下組合模式，其實組合模式就是將一系列相似或相近的對象組合在一個大的對象，由這個大對象提供一些常用的接口來對這些小對象進行操作，代碼可重用，對外操作簡單。例如對于一個form里的元素，不考慮頁面設(shè)計的情況下，一般就剩下input了，對于這些input都有name和value的屬性，因此可以將這些input元素作為form對象的成員組合起來，form對象提供對外的接口，便可以實現(xiàn)一些簡單的操作，比如設(shè)置某個input的value，添加/刪除某個input等等……
正文
介紹：組合模式又叫部分整體模式，用于把一組相似的對象當(dāng)作一個單一的對象。組合模式依據(jù)樹形結(jié)構(gòu)來組合對象，用來表示部分以及整體層次
定義：組合多個對象形成樹形結(jié)構(gòu)以表示具有整體一部分關(guān)系的層次機構(gòu)。組合模式對單個對象（即葉子對象）和組合對象（即容器對象）的使用具有一致性，組合模式又可以成為整體一部分模式。
它是一種對象結(jié)構(gòu)型模式。
場景：我們對公司的人員架構(gòu)進行一下打印，假設(shè)所有管理崗和開發(fā)崗的區(qū)別只有一個，是不是有下級員工。我們來實現(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
這里我們簡單寫的這個demo，用來對公司組織架構(gòu)進行遍歷輸出。因為rd和leader具體職能的不同，我們把技術(shù)和管理分為兩大類。但是這樣的設(shè)計存在很多問題：
* 可擴展性差，當(dāng)一個新的職位產(chǎn)生，在對其歸類時是新增一個還是放到已有類目下面都是一個問題。
* 當(dāng)某一行為發(fā)生變化需要挨個修改leader類rd類，不符合開關(guān)原則。
接下來我們用組合模式實現(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
大家可以對比下兩段代碼的差異，我們用一個Employee類來替換leader和rd類，其實這就是組合模式的關(guān)鍵：
定義一個抽象類，它既可以代表leader也可以代表rd，添加、打印時也基于Employee類，而無需知道這個人是什么角色。可以對其進行統(tǒng)一處理。
組合模式總結(jié)：
優(yōu)點：
* 可以清楚的定義存在層次關(guān)系的復(fù)雜對象，讓客戶端開發(fā)過程中忽略層次的差異
* 全局修改時，只需修改一處位置
缺點：
* 無法對生成結(jié)果進行限制，不能像第一個例子一樣，所有的rd都沒有下級員工屬性，也沒有對應(yīng)方法。所以在使用時要注意這些約束
適用場景;
* 在一個面向?qū)ο蟮恼Z言開發(fā)系統(tǒng)中需要處理一個樹形結(jié)構(gòu)。
* 在具有整體和部分的結(jié)構(gòu)中，希望忽略掉二者差異，使客戶端一致對待。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
本文主要介紹了js實現(xiàn)前端分頁頁碼管理的具體方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細介紹了使用JS實現(xiàn)簡單的圖片切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
兼容FireFox 用javascript寫的一個畫圖函數(shù)
兼容FireFox 用javascript寫的一個畫圖函數(shù)...2007-08-08
2008-01-01
本篇文章主要是對JavaScript網(wǎng)頁定位進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
但是最近由于開發(fā)人手不夠,一個人開啟全棧,一邊寫接口一邊寫頁面,剛好項目中有一個需求,所以嘗試使用自定義組件開發(fā)這塊,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)之常用的視圖組件的相關(guān)資料,需要的朋友可以參考下2022-11-11
Webpack打包過程中處理ES6模塊的循環(huán)依賴問題小結(jié)
Webpack通過“暫時性引用”特性處理ES6模塊的循環(huán)依賴,即在模塊加載時創(chuàng)建占位符,確保模塊能夠正確加載,本文介紹Webpack打包過程中如何處理ES6模塊的循環(huán)依賴,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了js分頁工具及其具體用法,包括js與css的詳細實現(xiàn)代碼與使用方法,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了前端實現(xiàn)PDF預(yù)覽的三種方法,包括pdfjs-dist,react-pdf和pdf-viewer,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
javascript 三種方法實現(xiàn)獲得和設(shè)置以及移除元素屬性
獲得和設(shè)置以及移除元素屬性在操作dom的過程中會經(jīng)常遇到吧,為了提高工作的效率本文整理了一些快捷操作方法和大家一起分享，感興趣的朋友可以參考下哈2013-03-03