javascript設計模式 – 組合模式原理與應用實例分析

更新時間：2020年04月14日 08:34:41 作者：李小強

這篇文章主要介紹了javascript設計模式 – 組合模式,結合實例形式分析了javascript組合模式相關概念、原理、應用場景及相關使用注意事項,需要的朋友可以參考下

本文實例講述了javascript設計模式 – 組合模式原理與應用。分享給大家供大家參考，具體如下：

介紹：組合模式又叫部分整體模式，用于把一組相似的對象當作一個單一的對象。組合模式依據樹形結構來組合對象，用來表示部分以及整體層次

定義：組合多個對象形成樹形結構以表示具有整體一部分關系的層次機構。組合模式對單個對象（即葉子對象）和組合對象（即容器對象）的使用具有一致性，組合模式又可以成為整體一部分模式。
它是一種對象結構型模式。

場景：我們對公司的人員架構進行一下打印，假設所有管理崗和開發(fā)崗的區(qū)別只有一個，是不是有下級員工。我們來實現下：

示例：

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具體職能的不同，我們把技術和管理分為兩大類。但是這樣的設計存在很多問題：

* 可擴展性差，當一個新的職位產生，在對其歸類時是新增一個還是放到已有類目下面都是一個問題。
* 當某一行為發(fā)生變化需要挨個修改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類，而無需知道這個人是什么角色?？梢詫ζ溥M行統(tǒng)一處理。

組合模式總結：

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

缺點：
* 無法對生成結果進行限制，不能像第一個例子一樣，所有的rd都沒有下級員工屬性，也沒有對應方法。所以在使用時要注意這些約束

適用場景;
* 在一個面向對象的語言開發(fā)系統(tǒng)中需要處理一個樹形結構。
* 在具有整體和部分的結構中，希望忽略掉二者差異，使客戶端一致對待。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

Bootstrap 過渡效果Transition 模態(tài)框（Modal）
這篇文章主要介紹了Bootstrap 過渡效果Transition 模態(tài)框（Modal）,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
Webpack介紹和基本使用指南
Webpack 本身功能比較少,只能處理 js 資源,一旦遇到 css 等其他資源就會報錯,本文給大家講解Webpack介紹和基本使用指南,感興趣的朋友一起看看吧
2024-02-02
關于Ajax的原理以及代碼封裝詳解
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），相信大家對ajax都很熟悉，下面這篇文章主要給大家介紹了關于Ajax原理以及代碼封裝的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09
整理一下常見的IE錯誤
多年以來，IE一直都是最難于調試JavaScript 錯誤的瀏覽器。IE給出的錯誤消息一般很短又語焉不詳。而且上下文信息也很少，有時甚至一點都沒有。下面幾小節(jié)將分別探討一些在IE中難于調試的JavaScript 錯誤
2016-11-11
基于bootstrap-datetimepicker.js不支持IE8的快速解決方法
下面小編就為大家?guī)硪黄赽ootstrap-datetimepicker.js不支持IE8的快速解決方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
JavaScript實現登錄窗體
這篇文章主要為大家詳細介紹了JavaScript實現登錄窗體，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
javascript如何定義對象數組
本文主要介紹javascript如何定義對象數組，兩種方法，比較實用，希望能給大家做一個參考。
2016-06-06
JavaScript獲取DOM元素的11種方法總結
這篇文章主要介紹了JavaScript獲取DOM元素的11種方法總結,本文用分4大類11個方法總結如何獲取DOM元素,需要的朋友可以參考下
2015-04-04
JS簡單的輪播的圖片滾動實例
JS簡單的輪播的圖片滾動實例，需要的朋友可以參考一下
2013-06-06
javascript中mouseenter與mouseover的異同
javascript中mouseover和mouseenter的區(qū)別主要在于監(jiān)聽對象的子元素是否觸發(fā)事件。mouseover：鼠標移入監(jiān)聽對象中，或者從監(jiān)聽對象的一個子元素移入另一個子元素中時觸發(fā)該事件。mouseenter：鼠標移入監(jiān)聽對象時觸發(fā)，在監(jiān)聽對象內移動不會觸發(fā)。
2017-06-06