모듈

|

############# 모듈(module) ############# 
수 많은 로직을 재사용할 수 있는 단위로 나누어,
별도의 모듈이 라는 형태로 떼어내 다른 프로그램에 부품으로 사용하는 기법.
그 기법을 모듈화(Modularization), 결과물을 모듈이라 한다.

-----main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="greeting.js"></script> // 모듈화
</head>
<body>
    <script>
        alert(welcome());
    </script>
</body>
</html>

-----greeting.js

function welcome(){
    return 'Hello world';
}


############# 호스트 환경 ############# 
javascript가 구동되는 환경.
웹브라우저를 위한 언어로 시작했지만(클라이언트), 서버측에서 실행되는 javascript도 있다(서버사이드).
또한 구글의 App위에서도 돌아가는 것이 있으므로, 호스트 환경에 따라 모듈화 하는 방법을 알아야 한다.

#############  모듈과 라이브러리의 차이 ############# 
모듈이 프로그램의 작은 부품이라 하면,
라이브러리는 자주 사용되는 부품을 재사용하기 편하게 잘 정리한 코드의 집합.
특히 라이브러리는 많은사람들의 노력과 돈, 노우하우를 집중해 만들어 놓아 아주 완성도가 높다.

#############  라이브러리를 쓰는 이유 ############# 
자기혼자서 만드는 것이 여러가지 이유로 필연적이지 않으면,
다른사람이 이미 만들어 놓은것을 부품으로 조립해서 만들어 가는것이 소프트웨어를 만드는 '기본중의 기본'이다.

------------아래는 jQuery를 이용한 예제이다.



<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
     $('#execute_btn').click(function(){
        $('#list li').text('coding everybody');
     })
    </script>
</body>
</html>

-------------  다음은 jQuery를 이용하지 않고 동일한 기능을 구현한 예제이다.

<!DOCTYPE html>
<html>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
    function addEvent(target, eventType,eventHandler, useCapture) {
        if (target.addEventListener) { // W3C DOM
            target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
        } else if (target.attachEvent) {  // IE DOM
            var r = target.attachEvent("on"+eventType, eventHandler);
        }
    }
    function clickHandler(event) {
        var nav = document.getElementById('list');
        for(var i = 0; i < nav.childNodes.length; i++) {
            var child = nav.childNodes[i];
            if(child.nodeType==3)
                continue;
            child.innerText = 'Coding everybody';
        }
    }
    addEvent(document.getElementById('execute_btn'), 'click', clickHandler);
    </script>
</body>
</html>

 

And