(자알쓰) 모듈화 Part. 1

'use strict';
// 내가 작성한 a.js
var num = 1;

// 내 부사수가 작성한 c.js
// 블라블라
var num = 2;
// 블라블라

// 내가 작성한 b.js
window.onload = function() {
  'use strict';
  var btnA = document.getElementById('a');
  var btnB = document.getElementById('b');
  btnA.onclick = function() {
    console.log(num);
  };
  btnB.onclick = function() {
    console.log(num);
  }
};

// 내가 작성할 a.js
var util = util || {};
util.num = util.num || 1;

// 부사수가 작성할 c.js
var util2 = util2 || {};
util2.num = util2.num || 2;

// 내가 작성할 b.js
window.onload = function() {
  'use strict';
  var btnA = document.getElementById('a');
  var btnB = document.getElementById('b');
  btnA.onclick = function() {
    console.log(util.num);
  };
  btnB.onclick = function() {
    console.log(util.num);
  }
};

// 내가 작성한 util 모듈
// util 이라는 1차 네임 스페이스
var util = util || {};
// array라는 2차 네임 스페이스
util.array = util.array || {};
util.array.getIdx = util.array.getIdx || function(val, array) { 
  // 블라블라
};


// 자바스크립트 파일이 너무 많아서 util이란 모듈이 존재하는지 모르고
// || 연산자(기본값 지정)을 사용하지 않고 util 모듈을 재정의할 경우
var util = {
  string: {
    getLastChar: function(str) {
      // 블라블라
    }
  }
}

// 내가 작성한 util 모듈을 쓴 다른 코드
var arr = [1, 4, 7];

// 부사수가 정의한 util 모듈에 의해 array 네임스페이스는 날아간 상태임.
// 따라서 오류가 발생함.
var midIdx = util.array.getIdx(7, arr);

// 내가 작성한 util 모듈
// util 이라는 1차 네임 스페이스
var util = util || {};
// array라는 2차 네임 스페이스
util.array = util.array || {};
util.array.getIdx = util.array.getIdx || function(val, array) { 
  // 블라블라
};


// 자바스크립트 파일이 너무 많아서 util이란 모듈이 존재할까봐 기본값 패턴을 써서 util 모듈을 정의한 경우
var util = util || {};
util.string = util.string || {};
util.string.getLastChar = function(str) {
  // 블라블라
};

// 따라서 util 모듈은 아래와 같은 형태를 띈다.
// 내가 작성한 util 모듈을 전혀 훼손시키지 않고 부사수의 모듈과 결합이 되었다.
// 뭐 사실 모듈 간에 이름은 최대한 겹치지 않고 작하는 게 맞는 것 같다.
util = {
  array: {
    getIdx: function(val, array) {}
  },
  string: {
    getLastChar: function(str) {}
  }
};

// 내가 작성한 util 모듈을 쓴 다른 코드
var arr = [1, 4, 7];

// 내가 작성한 util 모듈의 array 네임스페이스는 살아있음.
var midIdx = util.array.getIdx(7, arr);

// 함수를 임의로 만들면 된다.
// 근데 함수는 만든다고 실행하는 게 아니니 함수를 만들자마자 실행해야한다.
(function() { // 즉시 실행할 것이기 때문에 재호출할 일이 없으니 이름이 필요 없으니 익명함수로 작
  var a = 11;
  console.log(a);
})(); // 그 함수를 실행

// 이를 즉시 실행함수(IIFE: Immediately Invoked Function Expressions)라고 부른다.  
// 대개 1회성 함수, 한번만 쓰는 코드, 클로저 등등에 쓰는데
// 전역 스코프를 더럽히지 않는다는 장점 때문에 나는 무조건 쓴다.  
// 하지만 외부에서 참조해야하는 경우에는 네임스페이스 패턴을 이용해 모듈화를 진행해서 쓰는 편이다.
// 사실 ES2015+ 들어가면 이렇게 절대 안 쓰니 딥하게 파고들 필요는 없는 것 같다.
(function() {
  console.log(a); // a is not defined
}());