javascript 디자인 모델 C 조합 모델 원리 와 응용 사례 분석

본 논문 의 사례 는 자바 script 디자인 모델 C 조합 모델 의 원리 와 응용 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
소개:조합 모델 은 일부 전체 모델 이 라 고도 부 르 는데 비슷 한 대상 을 하나의 대상 으로 삼 는 다.조합 모델 은 나무 구조 에 따라 대상 을 조합 하여 부분 과 전체적인 차원 을 나타 낸다.
정의:여러 대상 을 조합 하여 트 리 구 조 를 형성 하여 전체적인 관 계 를 가 진 차원 기 구 를 나타 낸다.조합 모델 은 하나의 대상(즉 잎 대상)과 조합 대상(즉 용기 대상)의 사용 에 일치 성 을 가지 고 조합 모델 은 전체적인 모델 이 될 수 있다.
그것 은 대상 구조 형 모델 이다.
장면:우 리 는 회사 의 인원 구조 에 대해 인쇄 를 하고 모든 관리 직책 과 개발 직책 의 차이 가 하나 밖 에 없다 고 가정 하면 하급 직원 이 있 는 것 이 아 닙 니까?우리 가 실현 해 보 자.
예시:

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 는 하급 직원 속성 도 없고 대응 방법 도 없습니다.그래서 사용 할 때 이런 구속 에 주의해 야 한다.
필드 적용 하기;
*대상 을 대상 으로 하 는 언어 개발 시스템 에서 트 리 구 조 를 처리 해 야 합 니 다.
*전체 와 부분 을 가 진 구조 에서 이들 의 차 이 를 무시 하고 클 라 이언 트 를 일치 시 키 고자 합 니 다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.