2020/05/09 - [web/javascript] - javascript : 객체와 실습코드
javascript : 객체와 실습코드
객체지향프로그래밍 python, C++ 등등 객체를 지향하는 프로그래밍 언어에서 보통 class로 틀을 만들고, 객체를 생성하여 code의 재사용률을 높이자는 취지가 바로 객체지향프로그래밍이다. javascript�
mambo-coding-note.tistory.com
지난 포스팅에서 javascript의 객체란 무엇이고, 이 객체를 어떻게 구성하는지에 대해 적었다.
오늘은 이런 function들을 담고 있는 객체들을 어떻게 관리하고 이를 모듈화 시킬 것인지에 대해 포스팅하겠다.
module
우선 모듈이 무엇인가? 를 살펴보면, 만약 html 안에 내가 정의하고 싶은 function, data들을 막 정의를 해두면, 분명 html page는 굉장히 길어지고, 만약 내가 다른 웹페이지를 만드는데, 전 웹페이지에서 썼던 function들을 쓰고 싶다면, 다시 복사 붙여넣기를 해야하는 굉장히 짜증나는 상황이 벌어진다.
이런 상황이 벌어지기 전에, 이를 .js 라는 javascript 파일에 넣어서 하나로 캡슐화를 진행해서, code의 재사용을 높이자는 것이 module의 중요성이다.
example
greeting.js
function welcome(){
return 'Hello World!';
}html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="greeting.js"></script>
<title>Document</title>
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>위는 greeting.js라는 파일 안에 Hello World를 return하는 welcome이라는 함수를 정의해서 module화를 진행한 것이다.
전 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="greeting.js"></script>
<title>Document</title>
</head>
<body>
<script>
function welcome(){
return 'Hello World!';
}
alert(welcome());
</script>
</body>
</html>html과 전 html을 보더라도 확실히 모듈화를 한 것이 분리되어있어 html과 js 따로 볼 수있고, 나중에 페이지가 굉장히 복잡해진다면 debugging에도 쉽지 않을 것이다.
따라서 우리는 javascript를 쓸 때, js 파일에 내가 원하는 function을 구현해서 module화 하고, 원할 때 module을 불러오는 방식으로 진행해야 재사용률을 높일 수 있다.
'대학원 공부 > programming language' 카테고리의 다른 글
| HTML : form (0) | 2020.05.10 |
|---|---|
| Web : 무료 html template (0) | 2020.05.10 |
| javascript : 객체와 실습코드 (0) | 2020.05.09 |
| Javascript : 기본적인 function (0) | 2020.05.09 |
| JSP vs Javascript (0) | 2020.05.09 |
댓글