2016년 10월 18일 화요일

Javascript 모듈 & 라이브러리

모듈화 : 코드의 재활용성을 높이고, 유지보수를 쉽게할 수 있게 코드를 분리해서
           필요한 곳에 가져다 쓸 수 있도록 하는 것
         

모듈화의 긍정적인 면

  • 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
  • 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
  • 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
  • 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
  • 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)

모듈이란?

순수한 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지는 않는다. 하지만 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다. 때문에 환경에 따른 모듈화 방법을 알 필요가 있다.
※ 호스트 환경: Javascript가 구동되는 환경을 뜻 함 

라이브러리?

 모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다고 할 수 있다. 어떠한 목적을 위한 코드들의 집합
(ex) 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'); // id가 list인 태그의 자식 중 li 태그의 text(innerHTML) 를 click하면
     })
    </script>
</body>

</html>

댓글 없음:

댓글 쓰기