프런트엔드용 MVC 서비스 알아보기: VanillaJS
65009 단어 mvcjavascript
소개하다.
이 글은 MVC 구조가 어떻게 전방 응용 프로그램을 만드는지 이해할 수 있는 세 편의 문장 중 첫 번째 문장이다.이 시리즈의 목적은 자바스크립트를 스크립트 언어로 사용하는 웹 페이지를 자바스크립트를 대상 언어로 사용하는 응용 프로그램으로 발전시켜 전방 응용 프로그램을 구축하는 방법을 알아보는 것이다.
이 문서의 첫 번째 기사에서 응용 프로그램은 VanillaJS를 사용하여 구축될 것이다.따라서 본고는 DOM과 관련된 대량의 코드를 개발할 것이다.그러나 응용 프로그램의 모든 부분이 어떻게 서로 관련되고 어떻게 구성되는지 이해하는 것은 매우 중요하다.
두 번째 기사에서는 JavaScript 코드를 TypeScript 버전으로 변환하여 향상합니다.
마지막으로 이전 글에서 우리는 코드를 바꾸어 Angular 프레임워크와 통합시킬 것이다.
프로젝트 구조
우리가 구축하고자 하는 내용을 이해하는 데 도움을 줄 수 있는 그림은 한 장도 없다. 다음은 GIF 그림으로 우리가 구축하고자 하는 응용 프로그램을 보여 준다.
이 프로그램은 문서의 DOM을 수정하고 모든 작업을 수행하는 단일 자바스크립트 파일로 구축할 수 있지만, 이것은 강력한 결합 코드이기 때문에 본문에 적용하지 않으려고 합니다.
MVC 아키텍처란?MVC는
색인html 파일은 화포를 충당하고 전체 응용 프로그램은 그 위에 루트 요소를 사용하여 동적 구축을 할 것이다.또한 이 파일은 html 파일 자체에 링크되기 때문에 모든 파일을 불러오는 프로그램을 충당할 것이다.
마지막으로 파일 아키텍처는 다음 JavaScript 파일로 구성됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>User App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="root"></div>
<script src="models/user.model.js"></script>
<script src="services/user.service.js"></script>
<script src="controllers/user.controller.js"></script>
<script src="views/user.view.js"></script>
<script src="app.js"></script>
</body>
</html>
모형(빈혈)
이 예에서 구축된 첫 번째 클래스는 응용 프로그램 모델user입니다.모델js, 이것은 클래스 속성과 무작위 id를 생성하는 개인적인 방법으로 구성되어 있습니다. (이 id들은 서버의 데이터베이스에서 나올 수 있습니다.)
모델에는 다음 필드가 포함됩니다.
/**
* @class Model
*
* Manages the data of the application.
*/
class User {
constructor({ name, age, complete } = { complete: false }) {
this.id = this.uuidv4();
this.name = name;
this.age = age;
this.complete = complete;
}
uuidv4() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(
c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
).toString(16)
);
}
}
우리 클래스의 구조 함수는 다음과 같다.
constructor() {
const users = JSON.parse(localStorage.getItem('users')) || [];
this.users = users.map(user => new User(user));
}
다음에, 우리는 서비스에서 우리가 개발하고자 하는 모든 조작을 정의해야 한다.다음은 TypeScript의 행 대신 ECMAScript를 사용하여 이러한 작업을 보여 줍니다.
add(user) {
this.users.push(new User(user));
this._commit(this.users);
}
edit(id, userToEdit) {
this.users = this.users.map(user =>
user.id === id
? new User({
...user,
...userToEdit
})
: user
);
this._commit(this.users);
}
delete(_id) {
this.users = this.users.filter(({ id }) => id !== _id);
this._commit(this.users);
}
toggle(_id) {
this.users = this.users.map(user =>
user.id === _id ? new User({ ...user, complete: !user.complete }) : user
);
this._commit(this.users);
}
bindUserListChanged(callback) {
this.onUserListChanged = callback;
}
_commit(users) {
this.onUserListChanged(users);
localStorage.setItem('users', JSON.stringify(users));
}
bindUserListChanged 방법의 정의와 같습니다.이 리셋 함수는 화면에 있는 사용자 목록을 리셋하는 데 있어서 보기에서 나온다고 말할 수 있습니다.파일 사용자입니다.서비스구체적으로 다음과 같다.
/**
* @class Service
*
* Manages the data of the application.
*/
class UserService {
constructor() {
const users = JSON.parse(localStorage.getItem('users')) || [];
this.users = users.map(user => new User(user));
}
bindUserListChanged(callback) {
this.onUserListChanged = callback;
}
_commit(users) {
this.onUserListChanged(users);
localStorage.setItem('users', JSON.stringify(users));
}
add(user) {
this.users.push(new User(user));
this._commit(this.users);
}
edit(id, userToEdit) {
this.users = this.users.map(user =>
user.id === id
? new User({
...user,
...userToEdit
})
: user
);
this._commit(this.users);
}
delete(_id) {
this.users = this.users.filter(({ id }) => id !== _id);
this._commit(this.users);
}
toggle(_id) {
this.users = this.users.map(user =>
user.id === _id ? new User({ ...user, complete: !user.complete }) : user
);
this._commit(this.users);
}
}
constructor() {
this.app = this.getElement('#root');
this.form = this.createElement('form');
this.createInput({
key: 'inputName',
type: 'text',
placeholder: 'Name',
name: 'name'
});
this.createInput({
key: 'inputAge',
type: 'text',
placeholder: 'Age',
name: 'age'
});
this.submitButton = this.createElement('button');
this.submitButton.textContent = 'Submit';
this.form.append(this.inputName, this.inputAge, this.submitButton);
this.title = this.createElement('h1');
this.title.textContent = 'Users';
this.userList = this.createElement('ul', 'user-list');
this.app.append(this.title, this.form, this.userList);
this._temporaryAgeText = '';
this._initLocalListeners();
}
bindAddUser(handler) {
this.form.addEventListener('submit', event => {
event.preventDefault();
if (this._nameText) {
handler({
name: this._nameText,
age: this._ageText
});
this._resetInput();
}
});
}
bindDeleteUser(handler) {
this.userList.addEventListener('click', event => {
if (event.target.className === 'delete') {
const id = event.target.parentElement.id;
handler(id);
}
});
}
bindEditUser(handler) {
this.userList.addEventListener('focusout', event => {
if (this._temporaryAgeText) {
const id = event.target.parentElement.id;
const key = 'age';
handler(id, { [key]: this._temporaryAgeText });
this._temporaryAgeText = '';
}
});
}
bindToggleUser(handler) {
this.userList.addEventListener('change', event => {
if (event.target.type === 'checkbox') {
const id = event.target.parentElement.id;
handler(id);
}
});
}
/**
* @class View
*
* Visual representation of the model.
*/
class UserView {
constructor() {
this.app = this.getElement('#root');
this.form = this.createElement('form');
this.createInput({
key: 'inputName',
type: 'text',
placeholder: 'Name',
name: 'name'
});
this.createInput({
key: 'inputAge',
type: 'text',
placeholder: 'Age',
name: 'age'
});
this.submitButton = this.createElement('button');
this.submitButton.textContent = 'Submit';
this.form.append(this.inputName, this.inputAge, this.submitButton);
this.title = this.createElement('h1');
this.title.textContent = 'Users';
this.userList = this.createElement('ul', 'user-list');
this.app.append(this.title, this.form, this.userList);
this._temporaryAgeText = '';
this._initLocalListeners();
}
get _nameText() {
return this.inputName.value;
}
get _ageText() {
return this.inputAge.value;
}
_resetInput() {
this.inputName.value = '';
this.inputAge.value = '';
}
createInput(
{ key, type, placeholder, name } = {
key: 'default',
type: 'text',
placeholder: 'default',
name: 'default'
}
) {
this[key] = this.createElement('input');
this[key].type = type;
this[key].placeholder = placeholder;
this[key].name = name;
}
createElement(tag, className) {
const element = document.createElement(tag);
if (className) element.classList.add(className);
return element;
}
getElement(selector) {
return document.querySelector(selector);
}
displayUsers(users) {
// Delete all nodes
while (this.userList.firstChild) {
this.userList.removeChild(this.userList.firstChild);
}
// Show default message
if (users.length === 0) {
const p = this.createElement('p');
p.textContent = 'Nothing to do! Add a user?';
this.userList.append(p);
} else {
// Create nodes
users.forEach(user => {
const li = this.createElement('li');
li.id = user.id;
const checkbox = this.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = user.complete;
const spanUser = this.createElement('span');
const spanAge = this.createElement('span');
spanAge.contentEditable = true;
spanAge.classList.add('editable');
if (user.complete) {
const strikeName = this.createElement('s');
strikeName.textContent = user.name;
spanUser.append(strikeName);
const strikeAge = this.createElement('s');
strikeAge.textContent = user.age;
spanAge.append(strikeAge);
} else {
spanUser.textContent = user.name;
spanAge.textContent = user.age;
}
const deleteButton = this.createElement('button', 'delete');
deleteButton.textContent = 'Delete';
li.append(checkbox, spanUser, spanAge, deleteButton);
// Append nodes
this.userList.append(li);
});
}
}
_initLocalListeners() {
this.userList.addEventListener('input', event => {
if (event.target.className === 'editable') {
this._temporaryAgeText = event.target.innerText;
}
});
}
bindAddUser(handler) {
this.form.addEventListener('submit', event => {
event.preventDefault();
if (this._nameText) {
handler({
name: this._nameText,
age: this._ageText
});
this._resetInput();
}
});
}
bindDeleteUser(handler) {
this.userList.addEventListener('click', event => {
if (event.target.className === 'delete') {
const id = event.target.parentElement.id;
handler(id);
}
});
}
bindEditUser(handler) {
this.userList.addEventListener('focusout', event => {
if (this._temporaryAgeText) {
const id = event.target.parentElement.id;
const key = 'age';
handler(id, { [key]: this._temporaryAgeText });
this._temporaryAgeText = '';
}
});
}
bindToggleUser(handler) {
this.userList.addEventListener('change', event => {
if (event.target.type === 'checkbox') {
const id = event.target.parentElement.id;
handler(id);
}
});
}
}
파일 사용자입니다.제어기.js는 다음과 같습니다.
/**
* @class Controller
*
* Links the user input and the view output.
*
* @param model
* @param view
*/
class UserController {
constructor(userService, userView) {
this.userService = userService;
this.userView = userView;
// Explicit this binding
this.userService.bindUserListChanged(this.onUserListChanged);
this.userView.bindAddUser(this.handleAddUser);
this.userView.bindEditUser(this.handleEditUser);
this.userView.bindDeleteUser(this.handleDeleteUser);
this.userView.bindToggleUser(this.handleToggleUser);
// Display initial users
this.onUserListChanged(this.userService.users);
}
onUserListChanged = users => {
this.userView.displayUsers(users);
};
handleAddUser = user => {
this.userService.add(user);
};
handleEditUser = (id, user) => {
this.userService.edit(id, user);
};
handleDeleteUser = id => {
this.userService.delete(id);
};
handleToggleUser = id => {
this.userService.toggle(id);
};
}
app.js라고 부른다.응용 프로그램은 서로 다른 요소를 만들어서 실행한다. UserService, UserView, UserController, app.js 와 같다.const app = new UserController(new UserService(), new UserView());
매우 중요한 것은 이 글의 교수 방법은 프로젝트가 서로 다른 파일에서의 구조와 서로 다른 책임을 이해하고 보기가 모델/서비스와 컨트롤러에 어떻게 완전히 독립하는지를 이해하는 것이다.
다음 기사에서는 TypeScript를 사용하여 JavaScript를 강화할 것입니다. 이것은 웹 응용 프로그램 개발에 더욱 강력한 언어를 제공할 것입니다.JavaScript를 사용한다는 사실 때문에 DOM 관리를 위해 지루하고 반복되는 코드가 많이 작성되었습니다. (Angular 프레임워크를 사용하면 최소화할 수 있습니다.)
이 글의 GitHub 분기는 https://github.com/Caballerog/VanillaJS-MVC-Users입니다.
Reference
이 문제에 관하여(프런트엔드용 MVC 서비스 알아보기: VanillaJS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/carlillo/understanding-mvc-services-for-frontend-vanillajs-335h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
