javascript 디자인 모델 C 상태 모델 원리 와 용법 사례 분석

본 논문 의 사례 는 자바 script 디자인 모델 C 상태 모델 원리 와 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
소개:상태 모드 는 시스템 에서 복잡 한 대상 의 상태 전환 과 서로 다른 상태 에서 행위 의 패 키 징 문 제 를 해결 하 는 데 사용 된다.상태 모드 는 한 대상 의 상 태 를 이 대상 에서 분리 하여 대상 의 상 태 를 유연 하 게 변화 시 킬 수 있다.
정의:한 대상 이 내부 상태 가 바 뀔 때 행동 을 바 꿀 수 있 도록 합 니 다.대상 은 클래스 를 수정 한 것 처럼 보 입 니 다.별명 은 상태 대상 이 고 상태 모델 은 대상 행위 형 모델 입 니 다.
장면:많은 상황 에서 우리 의 페이지 는 등록 여부,로그 인 여부,나머지 금액 이 500 이상 인지 등 상 태 를 판단 해 야 한다.우 리 는 보통 구성 요소 에서 if..else 를 통 해 서로 다른 처 리 를 해 야 한다.이런 방식 의 결합 은 단일 직책 의 원래 규칙 을 심각하게 만족 시 키 지 못 한다.이 문 제 를 어떻게 해결 합 니까?이 절 에서 우 리 는 상태 모델 을 이용 하여 대상 의 상태 전환 을 해결 합 니 다.
예시:

var Dialog = function(){
  var _state = null;
 
  this.setState = function(state){
    _state = state;
  }
  this.getState = function(){
    return _state;
  }
}
 
var ShowState = function(){
  this.doAction = function(dialog){
    console.log(" Dialog      ：");
    dialog.setState(this);
  }
  this.toString = function(){
    console.log("   ......");
  }
}
 
var HideState = function(){
  this.doAction = function(dialog){
    console.log(" Dialog      ：");
    dialog.setState(this);
  }
  this.toString = function(){
    console.log("   ......");
  }
}
 
var dialog = new Dialog();
 
var showState = new ShowState();
var hideState = new HideState();
 
showState.doAction(dialog);
// Dialog      ：
dialog.getState().toString();
//   ......
hideState.doAction(dialog);
// Dialog      
dialog.getState().toString();
//   ......

이 예 에서 Dialog 대상 은 두 가지 상태 로 표시 하고 숨 깁 니 다.저 는 두 가지 상 태 를 추출 하여 상태의 관 리 를 더욱 원활 하 게 합 니 다.이 예 에서 Dialog 는 환경 류 라 고도 부 르 고 환경 류 는 문맥 류 라 고도 부 르 며 여러 가지 상 태 를 가지 고 있다.환경 클래스 내 부 는 현재 상 태 를 정의 하기 위해 state 대상 을 유지 해 야 합 니 다.Hide State,ShowState 를 상태 류 라 고 부 르 고 환경 류 의 구체 적 인 상태 에 대응 하 며 toString 을 상태 류 라 고 부 르 는 행 위 는 모든 상태 류 의 행위 가 다르다.
상태 모드 요약:
장점:
*상태의 변환 규칙 을 봉 하여 상태 모드 에서 상태의 변환 코드 를 환경 류 나 구체 적 인 상태 류 에 봉 하여 상태 변환 코드 를 관리 할 수 있 습 니 다.
*특정한 상태 와 관련 된 모든 행 위 를 하나의 유형 에 넣 고 서로 다른 상태 대상 만 주입 하면 환경 대상 이 서로 다른 행 위 를 할 수 있 습 니 다.
단점:
*상태 모드 의 사용 은 반드시 시스템 의 상태 클래스 의 수량 을 증가 시 켜 비용 이 커 집 니 다.
*구조 설 계 를 어떻게 전달 하 는 지,잘못 사용 하면 프로그램 구조 와 코드 가 혼 란 스 러 워 지고 시스템 설계 의 난이 도 를 높 일 수 있 습 니 다.
적용 필드:
*대상 의 행동 은 그 상태 에 의존 하 며,상태 변 화 는 행동 의 변 화 를 가 져 옵 니 다.
*코드 에 대상 상태 와 관련 된 조건문 이 대량으로 포함 되 어 있 음
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.