모듈화로 jQuery 코드 구조 정리하기

 

모듈화는 기능별로 코드를 나누고, 각 기능을 파일 또는 객체 단위로 구성하는 전략이다.

예) tab.js, modal.js, form.js 식으로 나눔

 

var MyApp = MyApp || {};

MyApp.Tab = {
  init: function() {
    if (!$('.tab').length) return;
    this.bind();
  },
  bind: function() {
    $('.tab').on('click', function() {
      // 탭 기능
    });
  }
};

 

메인 진입 파일에서는 이렇게 구성

$(function() {
  MyApp.Tab.init();
  MyApp.Modal.init();
});

 

• 유지보수 용이
• 재사용 가능
• 팀 개발에 적합한 구조
• 각 기능마다 init(), bind(), destroy() 같은 메서드로 구조화