JavaScript Design Patterns

번역 : https://seesparkbox.com/foundry/javascript_design_patterns

개발자들은 잘 확립 된 디자인 패턴을 사용하여 해결할 수있는 JavaScript의 코딩 문제를 종종 겪습니다. JavaScript는 전통적인 객체 지향 프로그래밍 언어가 아니기 때문에 디자인 패턴을 식별하기는 어렵지만 달성하기는 어렵지 않습니다.

디자인 패턴은 코드에서 직접 사용할 수있는 코드 스니펫이 아닙니다 (예 : 데이터 구조). 그보다는 소프트웨어 엔지니어링의 문제를 해결하는 방법에 대한 레시피 입니다. 디자인 패턴은 프로그래머가 응용 프로그램이나 시스템을 개발 (또는 디자인) 할 때 일반적인 문제를 해결하는 데 사용할 수있는 구조화 된 모범 사례입니다.

개발자가 바퀴를 재 발명하지 않도록 이러한 패턴을 올바르게 인식하고 적용 할 수 있어야합니다. JavaScript 세계에서 디자인 패턴을 사용할 수 있음을 보여주기 위해 JavaScript에서 일반적으로 사용되는 디자인 패턴을 자세히 설명하겠습니다.

Creational Patterns

Prototype

이것은 객체의 속성을 새로운 객체로 복제하기 위해 특별히 사용되는 디자인 패턴입니다. 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는 수업을 도입했지만 이것이 기존 프로토 타입 패턴보다 구문 설탕 이라는 것을 아는 것이 중요합니다.

Module

모듈 패턴은 프로토 타입 다음에 가장 일반적으로 사용되는 패턴 일 것입니다. 모듈은 즉시 호출되는 함수식 (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

Singleton

싱글 톤 객체의 생성은 자체 호출되어야합니다. 즉, 정의한 즉시 실행시키고 인스턴스를 저장합니다.

싱글 톤을 언제 사용해야합니까? 싱글 톤 패턴은 객체의 인스턴스를 정확히 하나만 원할 때 사용됩니다. 싱글 톤 인터페이스는 요청이있을 때마다 해당 인스턴스를 반환합니다.

예:

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

Behavioral Patterns

Observer

멋진 작업을 위해 JavaScript를 작성하는 경우 이미 관찰자 패턴을 사용하고있을 것입니다. 이벤트가 발생했을 때 함수가 실행되도록 이벤트 처리기를 만들면 이것이 관찰자 패턴입니다. 관찰자 패턴은 이벤트를 수신하도록 오브젝트를 지정하는 구독 모델입니다.

언제 사용합니까? 이렇게하면 밀접하게 연결된 코드를 방지 할 수 있습니다.

Example: http://www.dofactory.com/javascript/observer-design-pattern

Structural Patterns

Adapter

어댑터 패턴은 하나의 인터페이스에서 다른 인터페이스로의 추상화 또는 중간개체 입니다. 일반적으로 이는 API 응답 객체, 원시 API 데이터 (JSON, XML 등)를 사용 가능한 JavaScript 객체에 적용합니다.

언제 사용합니까? JavaScript에서는 어댑터를 작성하기 전에 명확한 데이터 모델을 사용하는 것이 좋습니다.

Example: http://www.dofactory.com/javascript/adapter-design-pattern

Cleaner, Clearer Code

개발자는 디자인 패턴을 적용하여보다 깔끔하고 체계적인 JavaScript를 작성할 수 있습니다. 디자인 패턴 (Ember, React, KnockoutJS)을 사용하는 프레임 워크의 사용과 인기가 높아짐에 따라 소프트웨어 디자인 패턴을 그 어느 때보 다 식별하고 활용할 수 있어야합니다. 개발자가 JavaScript에서 가능한 한 많은 디자인 패턴을 사용하도록 권장합니다. JavaScript에서 잘 고안된 디자인 패턴 예제 목록은 발견 경로를 계속 유지하는 데 유용한 리소스입니다.