네임스페이스로 jQuery 코드 구조화하는 방법

 

JavaScript에서 네임스페이스는 전역 공간에 변수나 함수가 남발되지 않도록 기능 단위로 코드를 그룹화하는 방법이다.

 

네임스페이스는 MyApp.Tab, MyApp.Modal처럼 공간을 나눠 전역 충돌을 막는 방식으로

예를 들어 다음처럼 작성할 수 있다.

// 전역 네임스페이스 생성
var MyApp = MyApp || {}; //MyApp이라는 객체가 이미 존재하면 그걸 사용 없다면 빈 객체로 초기화
//이 구문이 없으면 나중에 같은 네임스페이스를 쓰려 할 때 덮어써버리는 문제가 생길 수 있다.

MyApp.UI = {
  init: function() {
    this.bindEvents();
  },
  bindEvents: function() {
    const self = this;

    if ($('.btn').length) {
      $('.btn').on('click', function() {
        self.toggleBox();
      });
    }
  },
  toggleBox: function() {
    $('.box').toggleClass('active');
  }
};

// 문서 준비 후 실행
$(function() {
  MyApp.UI.init();
});

 

• MyApp.UI라는 공간 안에 기능을 모아서 관리
• MyApp.UI.init()처럼 한정된 범위 내에서만 실행돼서 toggleBox()나 bindEvents() 같은 함수가 전역에 퍼지지 않음
• 재사용, 유지보수, 테스트에 용이함