SNS의 정신은 감동, 배려, 책임이다. 기술이 아니다, 자바스크립트를 행복하게 사용하려면 모듈단위의 개발이 되어야 한다. 모듈 패턴을 알아보자.
종류
- 견고한 애플리케이션을 개발하기 위하여 모듈단위 개발이 필요하다
- 모듈을 구현하기 위한 방법
> The Module pattern
> Object literal notation
> AMD modules
> CommonJS modules
> ECMAScript Harmony modules
Object Literals
- curly braces {} 를 사용한다
- new 키워드가 필요없다
- 오브젝트에 프로퍼티의 동적 추가가 가능하다. 예) myObjectLiteral.sencondKey = value;
var myObjectLiteral = {
variableKey: variableValue,
functionKey: function() {...},
someObject: {...}
}
Module Pattern
- class처럼 private, public를 캡슐화 하여 정의하는 방법이다
- 별도 name space 사용으로 global scope의 오염을 방지한다
- Closure와 IIFE (Immediately Invoked Function Expression) 을 사용한다
var testModule = (function() {
var counter = 0;
return { // Closure
incrementCounter: function() {
return counter++;
},
resetCounter: function() {
console.log('counter is', counter);
counter = 0;
}
};
})(); // IIFE
testModule.incrementCounter();
testModule.resetCounter();
// output : counter is 1
- 예제에서 counter는 global scope에서 숨겨져이다. 즉, private variable같다, counter 접근은 두개의 method로만 가능하다. 물론 function도 private 으로 정의가능하다
var myNamespace = (function () {
var myPrivateVar, myPrivateMethod;
// A private counter variable
myPrivateVar = 0;
// A private function which logs any arguments
myPrivateMethod = function( foo ) {
console.log( foo );
};
return {
// A public variable
myPublicVar: "foo",
// A public function utilizing privates
myPublicFunction: function( bar ) {
// Increment our private counter
myPrivateVar++;
// Call our private method using bar
myPrivateMethod( bar );
}
};
})();
Module Pattern 변형
- Import mixins : global scope의 변수를 module에 import 하는 방법
jQuery 와 Underscore 객체를 익명함수의 파라미터로 받아서 import 한다
// Global module var myModule = (function ( jQ, _ ) { function privateMethod1(){ jQ(".container").html("test"); } function privateMethod2(){ console.log( _.min([10, 5, 100, 2, 1000]) ); } return{ publicMethod: function(){ privateMethod1(); } }; // Pull in jQuery and Underscore }( jQuery, _ ));
myModule.publicMethod();
- Export : global module 만들기
var module = {} 객체를 만들어서 return 하여 export 한다
// Global module
var myModule = (function () {
// Module object
var module = {},
privateVariable = "Hello World";
function privateMethod() {
// ...
}
module.publicProperty = "Foobar";
module.publicMethod = function () {
console.log( privateVariable );
};
return module;
}());
<참조>
- 원문 : 모듈패턴
'Languages > JavaScript' 카테고리의 다른 글
| [JavaScript] Design Pattern - Observer Pattern (0) | 2013.09.07 |
|---|---|
| [JavaScript] Design Pattern - Singleton Pattern (0) | 2013.09.07 |
| [JavaScript] Design Pattern - Constructor Pattern (0) | 2013.09.07 |
| [JavaScript] 피해야하는 사용 패턴들 (Anti-Patterns) (0) | 2013.08.30 |
| [JavaScript] 김영보선생님의 객체지향 이야기 (0) | 2013.06.28 |
