溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何使用javascript中的組合模式，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
介紹：組合模式又叫部分整體模式，用于把一組相似的對象當作一個單一的對象。組合模式依據樹形結構來組合對象，用來表示部分以及整體層次
定義：組合多個對象形成樹形結構以表示具有整體一部分關系的層次機構。組合模式對單個對象（即葉子對象）和組合對象（即容器對象）的使用具有一致性，組合模式又可以成為整體一部分模式。
它是一種對象結構型模式。
場景：我們對公司的人員架構進行一下打印，假設所有管理崗和開發崗的區別只有一個，是不是有下級員工。我們來實現下：
示例：
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大家可以對比下兩段代碼的差異，我們用一個Employee類來替換leader和rd類，其實這就是組合模式的關鍵：
定義一個抽象類，它既可以代表leader也可以代表rd，添加、打印時也基于Employee類，而無需知道這個人是什么角色。可以對其進行統一處理。
組合模式總結：
優點：
* 可以清楚的定義存在層次關系的復雜對象，讓客戶端開發過程中忽略層次的差異
* 全局修改時，只需修改一處位置
缺點：
* 無法對生成結果進行限制，不能像第一個例子一樣，所有的rd都沒有下級員工屬性，也沒有對應方法。所以在使用時要注意這些約束
適用場景;
* 在一個面向對象的語言開發系統中需要處理一個樹形結構。
* 在具有整體和部分的結構中，希望忽略掉二者差異，使客戶端一致對待。
看完上述內容，是不是對如何使用javascript中的組合模式有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
