javascript 디자인 모델 C 원형 모델 원리 와 응용 사례 분석
소개:일상적인 개발 과정 에서 우 리 는 전단 템 플 릿 엔진 을 이용 하여 페이지 렌 더 링 을 자주 합 니 다.왜냐하면 많은 페이지 구조 가 같 고 내용 이 다른 장면 이 존재 하기 때 문 입 니 다.이런 장면 은 js 차원 에서 도 만 날 수 있다.
많은 구성 요소 가 같 거나 유사 합 니 다.중복 되 는 생 성 은 시스템 의 소 모 를 초래 할 수 있 으 므 로 원형 모드 를 사용 해 야 합 니 다.비슷 한 내용 을 원형 류 로 추출 하고 구체 적 인 유형 을 만 들 때 원형 류 를 복사 한 다음 확장 해 야 합 니 다.
주의해 야 할 것 은 복 제 된 대상 이 수정 할 때 원형 류 에 영향 을 주지 않 고 서로 독립 된다 는 것 이다.
정의:프로 토 타 입 인 스 턴 스 를 사용 하여 생 성 대상 의 종 류 를 지정 하고 이 프로 토 타 입 을 복제 하여 새로운 대상 을 만 듭 니 다.프로 토 타 입 모드 는 대상 생 성 모드 입 니 다.
장면:저 희 는 Dialog 류 를 바탕 으로 원형 모델 을 실현 합 니 다.저 는 모든 팝 업 창 에 있 는 속성 방법 을 추출 하고 만 들 때마다 기본 속성 을 복사 하여 이 를 바탕 으로 보완 한 다음 에 새로운 대상 으로 돌아 갑 니 다.
예시:
var Dialog = function(){
this.init = function(arg){
this.element = arg.element;
this.name = arg.name;
}
this.show = function(){
console.log(this.name + ' is show -> ' + this.element);
}
};
var createDialog = function(arg){
var _dialog = function(){};
_dialog.prototype = new Dialog();
var resDia = new _dialog();
resDia.init(arg);
return resDia;
}
var notice = createDialog({name:'notice',element:'<div>notice</div>'});
var toast = createDialog({name:'toast',element:'<div>toast</div>'});
var warnin = createDialog({name:'warnin',element:'<div>warnin</div>'});
notice.show(); //notice is show -> <div>notice</div>
toast.show(); //toast is show -> <div>toast</div>
warnin.show(); //warnin is show -> <div>warnin</div>
원형 모드 요약:장점:
*새로운 대상 인 스 턴 스 를 만 드 는 것 이 복잡 할 때 원형 모델 을 사용 하면 대상 의 생 성 과정 을 간소화 할 수 있 고 기 존 인 스 턴 스 를 복사 하면 새로운 인 스 턴 스 의 생 성 효율 을 높 일 수 있 습 니 다.
*확장 성 이 좋 음
단점:
*기 존 클래스 를 개조 할 때 소스 코드 를 수정 해 야 하 며 스위치 원칙 에 어 긋 납 니 다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.