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

본 논문 의 사례 는 자바 script 디자인 모델 C 건설 자 모델 원리 와 응용 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
소개:건설 자 모델 은 생 성기 모델 이 라 고도 부 르 는데 비교적 복잡 하고 사용 빈도 가 상대 적 으로 낮은 생 성 모델 이다.건설 자 모델 이 클 라 이언 트 에 게 돌아 오 는 것 은 간단 한 제품 이 아니 라 여러 부품 으로 구 성 된 복잡 한 제품 이다.
정의:복잡 한 대상 의 구축 과 그의 표 시 를 분리 시 켜 같은 구축 과정 에서 서로 다른 표 시 를 만 들 수 있 도록 한다.건설 자 모드 는 대상 생 성 모드 입 니 다.
예시:

var Dialog = function (){
  this.type = '';
  this.name = '';
  this.element = '';
  this.show = function(){
    console.log(this.name + ': ' + this.type + this.element);
  }
}
 
var noticeBuilder = function(){
  this.dialog = new Dialog();
  this.setType = function(){
    this.dialog.type = 'notice';
  }
  this.setName = function(){
    this.dialog.name = '  ';
  }
  this.setElement = function(){
    this.dialog.element = '<div>notice</div>';
  }
  this.getDialog = function(){
    return this.dialog;
  }
}
 
var toastBuilder = function(){
  this.dialog = new Dialog();
  this.setType = function(){
    this.dialog.type = 'toast';
  }
  this.setName = function(){
    this.dialog.name = '  ';
  }
  this.setElement = function(){
    this.dialog.element = '<div>toast</div>';
  }
  this.getDialog = function(){
    return this.dialog;
  }
}
 
function construct(ab){
  ab.setType();
  ab.setName();
  ab.setElement();
  return ab.getDialog();
}
 
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = construct(notice);
var toastIns = construct(toast);
 
noticeIns.show(); //  : notice<div>notice</div>
toastIns.show(); //  : toast<div>toast</div>

건설 자 모델 에서 클 라 이언 트 는 지휘 류(construct 방법)를 통 해 한 걸음 한 걸음 완전한 제품 을 만들어 야 한다.같은 구조 과정 에서 전혀 다른 제품 을 만 들 수 있다.
건설 자 모델 은 복잡 한 대상 의 구축 을 표시 와 분리 시 킬 수 있 고 같은 구축 과정 을 사용 하면 서로 다른 표현 층 을 만 들 수 있 으 며 사용 자 는 건설 해 야 할 유형 만 지정 하면 되 며 구체 적 인 건설 과정 과 세부 사항 은 알 필요 가 없다.
시스템 구 조 를 간소화 하기 위해 construct 인 자 를 제거 하고 construct 를 builder 에 통합 할 수 있 습 니 다.

var Dialog = function (){
  this.type = '';
  this.name = '';
  this.element = '';
  this.show = function(){
    console.log(this.name + ': ' + this.type + this.element);
  }
}
var Construct = function(){
  this.construct = function(){
    this.setType();
    this.setName();
    this.setElement();
    return this.getDialog();
  }
}
 
var noticeBuilder = function(){
  this.dialog = new Dialog();
  this.setType = function(){
    this.dialog.type = 'notice';
  }
  this.setName = function(){
    this.dialog.name = '  ';
  }
  this.setElement = function(){
    this.dialog.element = '<div>notice</div>';
  }
  this.getDialog = function(){
    return this.dialog;
  }
}
 
var toastBuilder = function(){
  this.dialog = new Dialog();
  this.setType = function(){
    this.dialog.type = 'toast';
  }
  this.setName = function(){
    this.dialog.name = '  ';
  }
  this.setElement = function(){
    this.dialog.element = '<div>toast</div>';
  }
  this.getDialog = function(){
    return this.dialog;
  }
}
noticeBuilder.prototype = new Construct();
toastBuilder.prototype = new Construct();
 
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = notice.construct();
var toastIns = toast.construct();
 
noticeIns.show(); //  : notice<div>notice</div>
toastIns.show(); //  : toast<div>toast</div>

건설 자 모델 총화:
장점:
*건설 자 모드 에서 클 라 이언 트 는 제품 내부 구성의 세부 사항 을 알 필요 가 없 으 며 제품 을 사용 하여 디 결합 을 만 들 고 같은 생 성 과정 에서 서로 다른 제품 대상 을 만 들 수 있 습 니 다.
*모든 구체 적 인 건축 류 는 상대 적 으로 독립 적 이 고 교체 와 추가 가 편리 하 며 스위치 원칙 을 만족 시 킵 니 다.
단점:
*건축 자 모델 은 여러 제품 이 똑 같은 창설 절차 가 있어 야 하 며 제품 의 차이 가 크 면 건축 자 모델 이 적용 되 지 않 습 니 다.
*제품 내부 구조 가 복잡 하고 변화 가 많 으 면 이런 변 화 를 실현 하기 위해 많은 건축 류 를 정의 해 야 한다.시스템 이 커 질 수 있다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.