-
Notifications
You must be signed in to change notification settings - Fork 13
JavaScript Design Patterns_merlin
번역 : https://seesparkbox.com/foundry/javascript_design_patterns
개발자들은 잘 확립 된 디자인 패턴을 사용하여 해결할 수있는 JavaScript의 코딩 문제를 종종 겪습니다. JavaScript는 전통적인 객체 지향 프로그래밍 언어가 아니기 때문에 디자인 패턴을 식별하기는 어렵지만 달성하기는 어렵지 않습니다.
디자인 패턴은 코드에서 직접 사용할 수있는 코드 스니펫이 아닙니다 (예 : 데이터 구조). 그보다는 소프트웨어 엔지니어링의 문제를 해결하는 방법에 대한 레시피 입니다. 디자인 패턴은 프로그래머가 응용 프로그램이나 시스템을 개발 (또는 디자인) 할 때 일반적인 문제를 해결하는 데 사용할 수있는 구조화 된 모범 사례입니다.
개발자가 바퀴를 재 발명하지 않도록 이러한 패턴을 올바르게 인식하고 적용 할 수 있어야합니다. JavaScript 세계에서 디자인 패턴을 사용할 수 있음을 보여주기 위해 JavaScript에서 일반적으로 사용되는 디자인 패턴을 자세히 설명하겠습니다.
이것은 객체의 속성을 새로운 객체로 복제하기 위해 특별히 사용되는 디자인 패턴입니다. JavaScript는 새로운 객체를 생성하여 이를 수행하므로 고유한 프로토 타입을 설정하는 것은 특히 JavaScript에서 알아야 할 중요한 디자인 패턴입니다.
예:
function Hello (greeting) {
this.greeting = greeting || 'Hello World!';
}
Hello.prototype.speak = function(somethingElse) {
var message = somethingElse || this.greeting; console.log(message);
}
var hi = new Hello('Just saying hi!'); hi.speak();
hi.speak('Something different');
var hello = new Hello();
hello.speak();
hello.speak('Yep');
See the example on gist.github.com
왜 프로토 타입을 사용합니까? JavaScript에서 클래스를 원할 경우 이 방법으로 얻을 수 있습니다. ES6는 수업을 도입했지만 이것이 기존 프로토 타입 패턴보다 구문 설탕 이라는 것을 아는 것이 중요합니다.
모듈 패턴은 프로토 타입 다음에 가장 일반적으로 사용되는 패턴 일 것입니다. 모듈은 즉시 호출되는 함수식 (IIFE)이어야합니다. 모든 모듈 코드는 클로저 내에 존재합니다. 함수 실행을 통해 값을 전달하여 변수를 가져옵니다. 객체를 반환하여 변수 (노출 변수)를 내 보냅니다.
왜 모듈을 사용합니까? 단일 함수 JavaScript 이외의 모든 시스템에서 모듈을 사용해야합니다. 전역 네임 스페이스를 오염시키지 않고 함수를 가져오고 내보낼 수 있도록 유지하는 것이 좋습니다.
var options = {
username: 'blah',
server: '127.0.0.1'
};
var ConfigObject = (function(params) {
var username = params.username || '',
server = params.server || '',
password = params.password || '';
function _checkPassword() {
if (this.password === '') {
console.log('no password!');
return false;
}
return true;
}
function _checkUsername() {
if (this.username === '') {
console.log('no username!');
return false;
}
return true;
}
function login() {
if (_checkPassword() && _checkUsername()) {
// perform login
}
}
return { login: login }
})(options);
See the example on gist.github.com
싱글 톤 객체의 생성은 자체 호출되어야합니다. 즉, 정의한 즉시 실행시키고 인스턴스를 저장합니다.
싱글 톤을 언제 사용해야합니까? 싱글 톤 패턴은 객체의 인스턴스를 정확히 하나만 원할 때 사용됩니다. 싱글 톤 인터페이스는 요청이있을 때마다 해당 인스턴스를 반환합니다.
예:
var GlobalConfigurationObject = (function() {
var instance;
function createInstance() {
return new ConfigObject();
};
var getInstance = function() {
if (!instance) {
instance = createInstance();
}
return instance;
}
return { getInstance: getInstance }
})();
See example on gist.github.com
멋진 작업을 위해 JavaScript를 작성하는 경우 이미 관찰자 패턴을 사용하고있을 것입니다. 이벤트가 발생했을 때 함수가 실행되도록 이벤트 처리기를 만들면 이것이 관찰자 패턴입니다. 관찰자 패턴은 이벤트를 수신하도록 오브젝트를 지정하는 구독 모델입니다.
언제 사용합니까? 이렇게하면 밀접하게 연결된 코드를 방지 할 수 있습니다.
Example: http://www.dofactory.com/javascript/observer-design-pattern
어댑터 패턴은 하나의 인터페이스에서 다른 인터페이스로의 추상화 또는 중간개체 입니다. 일반적으로 이는 API 응답 객체, 원시 API 데이터 (JSON, XML 등)를 사용 가능한 JavaScript 객체에 적용합니다.
언제 사용합니까? JavaScript에서는 어댑터를 작성하기 전에 명확한 데이터 모델을 사용하는 것이 좋습니다.
Example: http://www.dofactory.com/javascript/adapter-design-pattern
개발자는 디자인 패턴을 적용하여보다 깔끔하고 체계적인 JavaScript를 작성할 수 있습니다. 디자인 패턴 (Ember, React, KnockoutJS)을 사용하는 프레임 워크의 사용과 인기가 높아짐에 따라 소프트웨어 디자인 패턴을 그 어느 때보 다 식별하고 활용할 수 있어야합니다. 개발자가 JavaScript에서 가능한 한 많은 디자인 패턴을 사용하도록 권장합니다. JavaScript에서 잘 고안된 디자인 패턴 예제 목록은 발견 경로를 계속 유지하는 데 유용한 리소스입니다.
일부 의역이 들어간 경우도 있으므로 해당 원문의 내용과 조금 다를 수 있습니다.
문제가 될 소지가 있다거나 혹은 수정이 필요한 사항이 있다면 있다면 issues 보내주세요.
기술문서
- 호출스택
- 원시자료형
- 값타입과 참조타입
- 명시적 변환, 암시적 변환, Nominal, 구조화, 덕 타이핑
- == vs === vs typeof
- 함수 범위, 블록 범위, 렉시컬(lexical) 범위
- 식(expression) vs 문(statement)
- IIFF, Modules, Namespaces
- 메세지큐와 이벤트루프
- setTimeout, setInterval, requestAnimationFrame
- 자바스크립트 엔진
- 비트 연산자, 형식화 배열, 버퍼(배열)
- DOM과 Layout Trees
- 팩토리와 클래스
- this, call, apply, bind
- new, 생성자, instanceof, 인스턴스
- 프로토타입의 상속과 체인
- Object.create와 Object.assign
- map, reduce, filter
- 순수함수, 부수효과, 상태변이
- Closure
- 고차함수
- 재귀
- 컬렉션과 생성기
- Promise
- async, await
- 자료구조
- 함수 성능과 빅 오 표기법
- 알고리즘
- 상속, 다형성, 코드의 재사용성
- 설계패턴
- 부분 어플리케이션, 커링, Compose, Pipe
- 클린코드