IIFE 와 javascript 모듈

java 는 클래스가 익숙하지만,  

javascript 로 모듈을 만드려고 할 땐 정신이 몽롱해진다;;

개인적으로 간단한 웹개발에서는 아래와 같은 구조로 사용한다.

(function($) {
    // Non-DOM-ready-required code here (scope-safe) ---- (1)
    $(function() 
      //...
      // DOM-ready-required code here ---- (2)
      //...
    });
   var a = function() {...}
   return {afunc : a} --- (3)
 })(jQuery);

(1) dom-ready 이전에 실행될 자바 스크립트 코드를 넣는다.

    jquery 로 이벤트 핸들러를 등록하면 실행안됨.

(2) 여기에 dom-ready 이후 실행할 코드들을 ..

(3) retrun 을 통해 변수, 메소드를 외부로 노출 

    (단, 위에서 var 을 뺀다면, a 는 전역함수가 된다.)

혹, 뭔가 좀 더 적극적으로 namespace 까지 쓰려면 아래와 같이 사용하면된다.

var namespace = (function(namespace, $, undefined){
    var i  = 0;
 
    function func1(){ //내부 함수 private
        alert(i);      
    };
    namespace.func2 = function(){ //외부 노출 함수 public
        alert(i);      
    };
   
    return namespace; //리턴을 해야함 
})(window.namespace || {},jQuery); //객체 없으면 생성

기타, jQuery 와 기본 javascript 표기로 혼동할 수 있는 표현법 3가지.

$(document).ready() == $(function(){}) == document.ready(function(){}) 

는 모두 같은 표현이다. 모두, dom-ready 이후의 코드를 입력하는 곳이다.

물론 image load 까지는 실행되지 않은 상태다.

이미지까지 로드된 이후에 실행시키고자 하는 javascript code 는

window.onload(function(){}) == $(window).onload(function(){}) 를 사용하면 된다.

참고) 

http://stackoverflow.com/questions/31634281/iife-inside-document-ready-or-the-other-way-around

http://leejiheg.tistory.com/24