Transcript 모듈패턴

- Js 모듈 패턴 따라잡기 검색정보 플랫폼실 임채동
- Javascript, 개념이 없거나 또는 자유롭거나
• 0, undefined, null, ‘’, NaN 은 모두 false
• 암묵적 형변환 => 2 == ‘2’
• 세미콜론(;)이 없어도 에러가 발생하지 않음
• 멋대로 바뀌는 참조
• 등등 …
- Javascript의 객체
• {}, new Object();
• 캡슐화?
• 상속?
• 다형성?
Js의 객체지향은 설계되어진 것이 아니라
구현하는 것
.
.
모듈 패턴, 샌드박스 패턴 등등
모듈패턴을 구현해봅시다.
- 모듈패턴 구현하기 – function을 활용하자
• Js에서 지역변수 블락 설정이 가능한
유일한 영역
• 함수 내에 변수와 메소드(함수)를
선언
- 모듈패턴 구현하기 – private, public 설정
• 함수의 끝에 ()를 추가해서 즉시 실행
• 실행 결과로 public 변수, 함수를
return !
- 모듈패턴 구현하기 – 수행결과
- 잠깐 : 익명함수 즉시실행 패턴
- 잠깐 : closure
• 현재 함수의 외부에 선언된 변수를 참조 가능
• 외부 함수가 무언가를 리턴한 후에도 외부 함수에 선언된 변수를 참조 가능
• 외부 변수의 값을 변경하는 것도 가능
- 모듈패턴 구현하기 – 의존관계선언, 전역함수인자 추가
- 모듈패턴 구현하기 – 장점들 (현재의 me와 비교)
• 보다 나은 모듈화, 캡슐화
• 보다 명확한 의존성
• this의 사용을 줄임
• Js 파일 Compress 시에 함수명도 압축됨
끝?
- 모듈패턴 구현하기 – 이슈들
• 캡슐화는 되었지만..
- 모듈패턴 구현하기 – 이슈들
• 의존 관계 선언 시 이슈 (스크립트 로딩 순서에 따른 이슈)
ex.js
ex2.js
- 모듈패턴 구현하기 – 이슈들
• 의존 관계 선언 시 이슈 – 해결방안
ex.js
ex2.js
Q&A
질문 많이 하면 앙데영..