javascript 모듈화 방법과 예시

자바스크립트 모듈 작성시 코드 순서

Javascript로 SPA(Sing Page Application)를 구현할  때, 다음과 같은 순서의 코드로 모듈을 작성하게 되면 협업하는 개발자들에게 집약되고 일관된 코드를 제공하여 많은 도움이 될 것입니다.

 

여기서 잠깐 SPA 란?

• 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미

 

이렇게 코드의 순서를 정하는 이유는 집약되고 일관된 코드를 제공하는데 있으므로 코드의 순서는 개발상황과 모듈용도에 맞춰가며 조정하고 추가 및 삭제될 수도 있습니다. 아래 순서는 단지 코드작성 순서의 예일뿐입니다.

1. 모듈 스코프 내에서 사용할 변수 작성

2. 유틸리티 메소드 작성

3. DOM 조작 메소드 작성

4. 이벤트 핸들러 작성

5. Public 메소드 작성

// SPA 모듈 작성 순서 예시
var app = (function() {
 
    // 1. 모듈 스코프 내에서 사용할 변수 작성
    var scopeVar = {};
    var utilMethod;
    var manipulateDom;
    var eventHandle;
    var initModule;
 
    // 2. 유틸리티 메소드 작성
    utilMethod = function() {
        // 실행코드
    };
 
    // 3. DOM 조작 메소드 작성
    manipulateDom = function() {
        // 실행코드
    };
 
    // 4. 이벤트 핸들러 작성
    eventHandle = function() {
        // 실행코드
    };
 
    // Public 메소드 작성
    initModule = function() {
        // 실행코드
    };
 
    return {
        init : initModule
    };
}());