코드의 재활용성을 높이고 유지보수를 쉽게 할수 있는 방법에는 여러가지가 있다
그중에 하나가
하나의 코드를 여러개의 파일로 분리하는 것이다
장점은..
-자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다
-코드를 개선하면 이를 사용하는 모든 애플리케이션의 동작이 개선된다
-필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다
순수 자바스크립트에서는 모듈이라는 개념이 분명하게 있는건 아니지만
js가 구동되는 호스트환경(구동되는 환경)에 따라서 다른 모듈화 방법이 제공된다
여기 생활코딩에서 나오는건 웹브라우저에서 로직을 모듈화 하는 방법을 알아볼것임
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
function welcome(){
return 'Hello world'
}
alert(welcome());
</script>
</body>
</html>이런 코드가 있다고 가정하자
welcome 함수가 필요할때마다 정의해서 사용하는건 낭비가 된다
함수 welcome을 모듈화 해보자
greeting.js 라는 파일을 새로 만들었다
function welcome(){
return 'Hello world';
}그리고 main.html의 내용을 이렇게 바꾸었다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="greeting.js"></script>
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>script 태그 안에 있는 건 브라우저에 의해서 javascript로 인식이 된다
src 속성에 있는 파일을 다운받아 실행시킨다.
그래서 welcome 함수를 greeting.js에서 가져와서 실행 시킬수있다.
node.js에서 모듈을 로드하는 방법
node.cricle.js(로드될 대상)
var PI = Math.PI;
exports.area = function (r) {
return PI * r * r;
};
exports.circumference = function (r) {
return 2 * PI * r;
};node.demo.js (로드의 주체)
var circle = require('./node.circle.js');
console.log( 'The area of a circle of radius 4 is '
+ circle.area(4));require를 통해 불러와서 circle에 저장하고
출력한 모습이다
라이브러리
:모듈과 비슷한 개념, 자주 사용되는 로직을 재사용하기 편하도록 정리한 일련의 코드들의 집합
유명 라이브러리인 jQuery 를 사용하는 방법
jQuery 홈페이지에서 파일을 다운로드 받는다.
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
jQuery 메뉴얼을 이용해서 사용법을 파악한다.
jQuery API Documentation
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t
api.jquery.com
아래는 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들을 가리킴
})
</script>
</body>
</html>
참고 : 생활코딩 - 자바스크립트
