js 파일로 빼내지 않고, 서버 뷰 페이지를 사용하여 분할뷰나 include 를 사용하여 페이지 구성을
하고 있을 때 사용하기 적합하다.
모듈화는 주로 이런 용도가 아니라 객체를 대신하여, 하나의 유틸리티 같은 모듈을 만들때 사용되지만
서버뷰 페이지 jsp, asp.net, php 등의 경우 index라는 페이지 속을 영역별로 각각의 페이지로 쪼갰을 떄
index 페이지에 스크립트를 몰아 넣을때 용이하다.
-- 아래의 사용자는 가짜 사용자 데이터다 koreanjson 의 fake json 데이터를 가져다 사용하였다
아래의 예시가 Spring 에서 index.jsp안에 페이지를 분할했을 때의 예시다.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<h2>User Section</h2>
<c:import url="user.jsp" />
<h2>Todo Section</h2>
<c:import url="todo.jsp" />
<h2>Blog Section</h2>
<c:import url="blog.jsp" />
</body>
</html>
위 분할된 페이지에 대해 스크립트 모듈화 코드는 다음과 같다
- 스크립트 기능 실행은 모듈 밖에서 하였다
- 하지만 index 페이지 하나에 모듈을 넣고 하드코딩하면 가독성면에서 보기 좋을수 있다.
- Dog라는 페이지에 분할된 페이지로 Blog, User, Todo 라는 페이지를 분할 시켰다고 가정하자 .
- 아래의 코드를 복사하여 fiddle 하여 실행해보자
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script>
let Dog = {
init: function () {
let self = this;
$(document).ready(function() {
// 이곳에 초기화에 필요한 것을 넣는다
alert('초기화 완료');
});
},
/** 새로운 사용자 */
User: {
getList: function() {
$.ajax({
url: 'https://koreanjson.com/users',
success: function (data) {
// 5개만
data = data.slice(0, 5);
var html = '';
for (let i = 0; i < data.length; i++) {
html += '<tr>';
html += '<td>'+ data[i].name +'</td>';
html += '<td>'+ data[i].email +'</td>';
html += '<td>'+ data[i].province + data[i].district + data[i].street +'</td>';
html += '</tr>';
}
$('.userList').html(html);
}
});
}
},
/** 할일 */
Todo: {
getTodo: function () {
let self = Dog;
$.ajax({
url: 'https://koreanjson.com/todos',
success: function (data) {
data = data.slice(0, 5);
var html = '';
for (let i = 0; i < data.length; i++) {
html += '<tr>';
html += '<td>'+ self.Common.formatDate(data[i].updatedAt) +'</td>';
html += '<td>'+ data[i].title +'</td>';
html += '<td>'+ data[i].completed +'</td>';
html += '</tr>';
}
$('.todo').html(html);
}
});
}
},
/** 최신글 영역 */
Blog : {
getPost : function () {
let self = Dog;
$.ajax({
url: 'https://koreanjson.com/posts',
success: function (data) {
data = data.slice(0, 5);
var html = '';
for (let i = 0; i < data.length; i++) {
html += '<tr>';
html += '<td>'+ self.Common.shortenString(data[i].title, 10) +'</td>';
html += '<td>'+ self.Common.shortenString(data[i].content, 30) +'</td>';
html += '<td>'+ self.Common.formatDate(data[i].createdAt) +'</td>';
html += '</tr>';
}
$('.post').html(html);
}
});
}
},
/** 공통 유틸리티 */
Common : {
/** 말줄임 처리 */
shortenString : function(inputString, maxLength) {
if (inputString.length > maxLength) {
return inputString.substring(0, maxLength) + '...';
}
else {
return inputString;
}
},
/** 날짜포멧 텍스트 변환 (2019-02-24T16:17:47.000Z => 2019-02-25 01:17) */
formatDate: function(isoString) {
let date = new Date(isoString);
let year = date.getFullYear();
let month = ("0" + (date.getMonth() + 1)).slice(-2);
let day = ("0" + date.getDate()).slice(-2);
let hours = ("0" + date.getHours()).slice(-2);
let minutes = ("0" + date.getMinutes()).slice(-2);
return `${year}-${month}-${day} ${hours}:${minutes}`;
}
}
};
// 클래스를 인스턴스화하지 않고 바로 실행
Dog.init();
// 스크립트 실행
Dog.User.getList();
Dog.Todo.getTodo();
Dog.Blog.getPost();
</script>
</head>
<body>
<div class="col-md-8">
<div class="col">
<h1>새로운 사용자</h1>
<table class="table table-dark">
<thead>
<tr>
<th>이름</th>
<th>이메일</th>
<th>집주소</th>
</tr>
</thead>
<tbody class="userList"></tbody>
</table>
</div>
<div class="col">
<h1>할일</h1>
<table class="table table-dark">
<thead>
<tr>
<th>일시</th>
<th>제목</th>
<th>완료여부</th>
</tr>
</thead>
<tbody class="todo"></tbody>
</table>
</div>
<div class="col">
<h1>최신글</h1>
<table class="table table-dark">
<thead>
<tr>
<th>제목</th>
<th>내용</th>
<th>등록일</th>
</tr>
</thead>
<tbody class="post"></tbody>
</table>
</div>
</div>
</body>
</html>'Web > JS & jQuery' 카테고리의 다른 글
| 유효성 검사 (1) | 2024.09.03 |
|---|---|
| jQuery-Confirm 플러그인 (1) | 2024.09.01 |
| String.Format, String.IsNullOrEmpty, String.IsNullOrWhiteSpace (0) | 2024.08.30 |
| FAKE Ajax JSON 데이터가 필요할 때 jsonplaceholder (0) | 2024.08.30 |
| JavaScript 에서 StringBuilder 를 사용해 보자 (0) | 2024.08.29 |