원래는 templateList와 templateHTML이라는 함수를 정의해서 인자를 받고 그것을 토대로 html 코드를 만들어서 뷰페이저에 사용했다.
var template = {
HTML:function(title, list, body, control){
return `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
${control}
${body}
</body>
</html>
`;
},list:function(filelist){
var list = '<ul>';
var i = 0;
while(i < filelist.length){
list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
i = i + 1;
}
list = list+'</ul>';
return list;
}
}하지만 template 객체를 만들고 그 객체의 필드로 각각 두 메소드를 정의하면 template.list()와 같이 더 편리하게 사용할 수 있다.
이렇게 객체화 하면 코드의 복잡성이 많이 감소한다.
이렇게 동작방식은 똑같이 유지하면서 내부 구조는 더 간단하게 하는 것을 리팩토링 이라 한다.
모듈
mpart.js에 다음과 같이 객체 M을 정의한다
그리고 module.exports = M;으로 M을 외부에서 사용할 수 있게 한다.
module.exports는 약속된 문법이다.
이렇게 require를 통해 모듈을 가져와서 변수에 저장하고 사용할 수 있다.
민든 어플리케이션의 구조도 이렇게 단순화 할 수 있다.
