javascript 디자인 모델 C 단순 공장 모델 원리 와 응용 사례 분석

본 논문 의 사례 는 자바 script 디자인 모델 C 간단 한 공장 모델 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
소개:간단 한 공장 모델 은 가장 자주 사용 하 는 창설 형 디자인 모델 이다.그 중에서 간단 한 공장 모델 은 GoF 23 개의 전형 적 인 디자인 모델 에 속 하지 않 고 다른 공장 모델 을 배 우 는 기반 으로 여 겨 진다.
정의:공장 클래스 를 정의 합 니 다.매개 변수 에 따라 서로 다른 인 스 턴 스 를 되 돌 릴 수 있 습 니 다.만 든 인 스 턴 스 는 보통 같은 부모 클래스 를 가지 고 있 습 니 다.간단 한 공장 모델 에서 인 스 턴 스 를 만 드 는 방법 은 정적 방법 이기 때문에 간단 한 공장 모델 은 정적 공장 방법 모델 이 라 고도 부 르 고 클래스 생 성 모델 에 속 합 니 다.
장면:우 리 는 dialog 도구 류 를 써 야 합 니 다.프로젝트 초기 에 우 리 는 간단 한 팝 업 창 만 고려 해 야 합 니 다.프로젝트 가 지속 적 으로 교체 되면 각종 유형의 팝 업 창 이 파생 되 고 닫 기 버튼 이 있 으 며 확인 버튼 이 있 습 니 다.
제 가 가장 많이 본 방법 은 type 값 에 따라 현재 어떤 유형의 창 을 쳐 야 하 는 지 판단 하 는 것 입 니 다.이런 디자인 은 저 는 예전 에 문제 가 있다 고 생각 하지 않 았 지만 앞에서 소개 한 디자인 원칙 을 보고 저희 도 이렇게 하 는 단점 을 분석 하 겠 습 니 다.
1.여러 개의 if..else...코드 블록 이 존재 합 니 다.코드 가 지루 하고 읽 기 가 어렵 습 니 다.유지 가 어렵 고 테스트 가 어렵 습 니 다.시스템 성능 에 영향 을 줍 니 다.
2.dialog 류 의 직책 이 너무 무 겁 고 모든 팝 업 창 인 스 턴 스 를 초기 화 하 는 것 을 책임 지 며 단일 직책 원칙 을 위반 하여 재 활용 과 유지 에 불리 합 니 다.
3.새 팝 업 창 유형 이 필요 할 때 소스 코드 를 수정 해 야 하 며 스위치 원칙 을 위반 합 니 다.
4.서로 다른 종류의 팝 업 창 기본 스타일 이 같 으 면 중복 코드 가 대량으로 존재 할 수 있 습 니 다.
5.각종 팝 업 창의 생 성과 사용 은 모두 각 업무 논리 에 있 습 니 다.만약 에 제 가 생 성 방식 을 수정 하려 면 모든 업무 코드 를 수정 해 야 하고 스위치 원칙 을 위반 합 니 다.
예시:

var Dialog = (function(){
  var createNotice = function(){
    return '<div>notice</div>';
  }
  var createToast = function(){
    return '<div>toast</div>';
  }
  var createWarnin = function(){
 return '<div>warnin</div>';
  }
  var Dialog = function(){
 this.element = '';
 this.name = '';
 this.show = function(){
   console.log(this.name + ' is show -> ' + this.element);
 };
  }
 
  return {
 factory: function(arg){
   var _dialog;
   if(arg === 'notice'){
     _dialog = new Dialog();
     _dialog.element = createNotice();
     _dialog.name = 'notice';
     }else if(arg === 'toast'){
     _dialog = new Dialog();
     _dialog.element = createToast();
     _dialog.name = 'toast';
   }else if(arg === 'warnin'){
     _dialog = new Dialog();
     _dialog.element = createWarnin();
     _dialog.name = 'warnin';
   }
   return _dialog;
 }
  }
})();
 
var notice = Dialog.factory('notice');
var toast = Dialog.factory('toast');
var warnin = Dialog.factory('warnin');
toast.show(); //toast is show -> <div>toast</div>
notice.show(); //notice is show -> <div>notice</div>
warnin.show(); //warnin is show -> <div>warnin</div>

이상 의 해결 방안 은 스스로 이해 하고 쓴 것 입 니 다.자바 의 예제 에 따라 하 나 를 썼 습 니 다.실현 하 는 방식 은 여러 가지 가 있 습 니 다.원형 체인 으로 계승 하여 실현 할 수 있 습 니 다.우 리 는 주로 왜 이렇게 써 야 하 는 지 토론 한다.
이전에 우 리 는 5 가지 단점 을 열거 했다.우 리 는 주로 2,4,5 를 해 결 했 고 공 유 된 방법 속성 을 추출 하여 부류 에 쓰 고 중복 코드 를 줄 였 으 며 각 상황 특유 의 코드 를 추출 하여 단일 직책 원칙 에 부합 되 지 않 는 문 제 를 해결 했다.
중요 한 것 은 모든 팝 업 창 생 성 을 공장 류 에 집중 하 는 것 이다.수정 이 있 을 때 공장 류 만 수정 하면 되 고 업무 코드 에 영향 을 주지 않 는 다.
여기 서 우 리 는 생각 을 해 보 자.1.어떻게 그런 if..else 를 없 앨 수 있 을 까?2.error 형식의 팝 업 창 을 추가 하려 고 할 때 스위치 원칙 을 어떻게 만족 시 킵 니까?
내 가 직접 해 봤 는데:

var Dialog = function(){
  this.element = '';
  this.name = '';
  this.show = function(){
 console.log(this.name + ' is show -> ' + this.element);
  };
}
 
Dialog.createNotice = function(){ return '<div>notice</div>'; };
Dialog.createToast = function(){ return '<div>toast</div>'; };
Dialog.createWarnin = function(){ return '<div>warnin</div>'; };
Dialog.factory = function(arg){ 
  var _dialog = new Dialog();
  _dialog.element = Dialog[arg]();
  _dialog.name = arg;
  return _dialog;
};
 
var notice = Dialog.factory('createNotice');
var toast = Dialog.factory('createToast');
var warnin = Dialog.factory('createWarnin');
notice.show(); //createNotice is show -> <div>notice</div>
warnin.show(); //createWarnin is show -> <div>warnin</div>
toast.show(); //createToast is show -> <div>toast</div>

이렇게 하면 내 가 새로 추 가 했 을 때 하나의 설정 만 추가 하면 되 고 공고 내용 을 수정 하지 않 아 도 된다.스위치 원칙 에 대한 확장 지원 을 만족 시 켰 습 니 다.
간단 한 공장 모델 총화:
장점:
*단순 공장 모델 은 대상 생 성과 사용 의 분 리 를 실현
단점:
*공장 모델 은 모든 제품 의 구축 논리 에 집중 되 고 직책 이 너무 무 거 워 서 문제 가 발생 하면 전체 시스템 에 영향 을 줄 수 있 습 니 다.
적용 필드:
*창설 대상 이 비교적 적 고 창설 대상 이 적기 때문에 공장 방법의 업무 논리 가 너무 복잡 하지 않 음
*클 라 이언 트 는 공장 클래스 에 들 어 오 는 인자 만 알 고 대상 을 어떻게 만 드 는 지 에 관심 이 없습니다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.