[필기 1] 초보 자 를 위 한 필수 자 바스 크 립 트 디자인 패턴

최근 에 Essential JavaScript Design Patterns For Beginners 를 보고 있 습 니 다.
원본 주소:http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/
스스로 필 기 를 좀 했다.아래 와 같이 발췌 하 다.
1. 디자인 모델 에 필요 한 부분:
(1) 이름과 설명 Pattern Name and description
(2) 콘 텐 츠 알림 context outline - 사용자 의 어떤 요구 에 대한 응답
(3) 문제 진술 - 해결 중인 문제 의 성명 으로 다른 사람 이 모델 의 의 도 를 이해 할 수 있 도록 한다.
(4) 해결 방안 - 사용자 의 문제 가 어떻게 해결 되 었 는 지 이해 할 수 있 는 목록 을 제시 합 니 다. 절차 와 생각 을 포함 합 니 다.
(5) 디자인 방안 - 모델 디자인 에 대한 설명, 특히 사용자 의 상호작용 에 대한 행위 설명
(6) 실현 - 모델 이 어떻게 실시 되 는 지 에 대한 지침
(7) 삽화 - 패턴 의 시각 적 설명
(8) 예 - 가장 간단 한 형식 으로 이 루어 진 예
(9) 필요 한 조건 - 이 모델 에 필요 한 다른 모델 지원
(10) 관계 - 이 모델 은 어떤 모델 과 유사 합 니까?얘 가 다른 모드 를 따라 한 거 야?
(11) 이미 알 고 있 는 사용 - 이 모드 는 이미 다른 사람 이 사용 하고 있 습 니까?만약 그렇다면, 어디 에 있 습 니까?어떻게 사 용 했 어 요?
(12) 토론 - 팀 과 작가 가 이 모델 에 대한 생각
2. 일정한 시간 을 들 여 서로 다른 디자인 모델 을 흡수 하고 당신 에 게 의미 있 는 부분 을 섭취 해 야 합 니 다. 이것 은 당신 이 자신의 목 표를 실현 하 는 데 도움 이 될 것 입 니 다.기 존의 디자인 모델 배우 기 (즉 소 를 경 배 하 는 것 ~!)
3. 자신의 디자인 모델 을 구축 하 는 힌트:
(1) 머 릿 속 에서 그 실용성 을 확인 하 라. 당신 의 모델 은 임시 적 인 해결 방안 이 아니 라 반복 되 는 문 제 를 해결 하 는 것 이다.
(2) 가장 좋 은 방법 을 참고 하도록 확보한다. 당신 이 한 디자인 은 가장 좋 은 실천 에서 이해 하 는 원칙 을 바탕 으로 해 야 한다.
(3) 당신 의 디자인 모델 은 사용자 에 게 투명 해 야 합 니 다. 디자인 모델 은 모든 유형의 사용자 에 게 투명 해 야 합 니 다.
(4) 기억 해!독창성 은 디자인 모델 에서 가장 관건 적 인 것 이 아니다. 자신의 모델 을 쓸 때 독창적 인 해결 방법 을 사용 할 필요 도 없고 다른 모델 에서 작은 부품 과 겹 치 는 것 도 걱정 할 필요 도 없다.당신 의 모델 이 충분 하고 광범 위 하 게 운용 된다 면 적당 한 모델 로 여 겨 질 기회 가 있 을 것 입 니 다.
(5) 모델 과 디자인 간 의 차 이 를 파악 한다. 하나의 디자인 모델 은 보통 검 증 된 가장 좋 은 실천 에서 비롯 되 고 디자이너 로 서 문 제 를 해결 하 는 모델 이다.모델 의 역할 은 디자이너 에 게 지 도 를 제공 하여 디자이너 로 하여 금 더욱 좋 은 디자인 선택 을 하여 사용자 의 수 요 를 만족 시 키 는 것 이다.
(6) 좋 은 모델 설명 역시 강력 한 예 를 들 어 그의 성공 적 인 운용 을 증명 해 야 한다.광범 위 한 응용 을 보 여 주 려 면 이상 적 인 예 는 좋 은 디자인 원칙 을 나 타 낼 수 있다.
4. 반 모드 는 좋 지 않 은 디자인 으로 자 바스 크 립 트 에서 다음 과 같은 몇 가지 반 모드 가 있 습 니 다.
(1) 대량의 전역 변 수 를 정의 하여 네 임 스페이스 를 오염 시킨다.
(2) 함수 가 아 닌 문자열 을 전달 하여 setTimeOut () 과 setInterval 이 내부 에서 eval () 을 사용 하도록 촉발 합 니 다.
(3) Prototyping against the Object object (this is a particularly bad anti-pattern)？？대상 의 반 원형?(이것 은 나 쁜 반 모드 이다)
(4) 내 연 형식의 JavaScript 사용
(5) document. write 를 사용 하고 document. createElement 는 비교적 적합 한 대체 품 입 니 다.document. write 는 이미 여러 해 동안 남용 되 었 습 니 다. 페이지 를 불 러 온 후에 사용 하면 실제로 페이지 를 덮어 쓸 수 있 고 document. createElement 는 그렇지 않 습 니 다.할 수 있다,...http://jsfiddle.net/addyosmani/6T9vX/ 여기 서 생생 한 예 를 볼 수 있다.또한 XHTML 에서 사용 할 수 없 는 것 도 document. createElement 를 사용 하 는 것 을 권장 하 는 이유 입 니 다.비고:http://jsfiddle.net/ 이거 괜 찮 은 것 같은 데.많이 테스트 할 수 있 습 니 다.
5. 몇 가지 모델 에 대한 간단 한 설명
(1) 생 성 모델: 대상 이 만 든 기본 적 인 방법 은 한 프로젝트 에 복잡성 을 증가 시 킬 수 있 습 니 다. 일부 모델 을 만들어 서 이 문 제 를 해결 할 수 있 습 니 다. 이러한 생 성 모델 은 factory (공장), abstract (추상), prototype (원형), singleton (단일) 과 builder (건설 자) 가 있 습 니 다.
(2) 구조 형 모델: 이런 모델 의 중점 은 유형 과 대상 의 구성 구조 이다.구조 적 인 'class' 의 생 성 모드 는 계승 을 사용 하여 인 터 페 이 스 를 쓰 고' object '모드 정의 방법 으로 대상 을 만 들 고 새로운 기능 을 얻 습 니 다.있다: Decorator (장식 자), Fa ç ade (외관), Composite (조합), Adapter (적합) and Bridge (브리지)
(3) 행위 모델: 이런 모델 의 초점 은 유형 중의 대상 간 의 통신 에 있다.그들의 목적 은 더욱 유연 하 게 통신 을 실현 하 는 기능 에 대한 것 이다.포함: Iterator (교체), Mediator (조정), Observer (관찰) 및 Visitor (방문).
1. 생 성 모드
이것 은 다른 모델 의 기초 이 고 이해 하기 쉽다.생 성 모드 는 응용 프로그램 에서 생 성 된 대상 을 처리 하 는 것 입 니 다.JavaScript 에서 전통 적 인 대상 을 만 드 는 방식 (이름 / 값 쌍 의 집합) 은 다음 과 같 습 니 다.

var newObject = new Object();
var newObject = {};

newObject['someValue'] = 'Hello World';

(주: 좋 은 쓰기 방법 은 var new Object = {} 이 고 대상 의 직접 쓰기 입 니 다.)