در این مقاله قصد داریم با استفاده از جاوااسکریپت خالص، یک برنامه‌ی ساده را با الگوی MVC انجام دهیم. این برنامه، عملیات CRUD را پیاده سازی میکند و تنها به سه فایل index.html , script.js , style.css نیاز دارد و از هیچ کتابخانه یا فریم ورک دیگری در آن استفاده نمیکنیم.
- M مخفف Model میباشد و کار مدیریت داده‌ها را بر عهده دارد.
- V مخفف View میباشد و وظیفه‌ی نمایش داده‌ها به کاربر را بر عهده دارد.
- C مخفف Controller میباشد و پل ارتباطی بین Model و View میباشد و مدیریت درخواست‌ها را بر عهده دارد.
در برنامه‌ی جاری همه چیز با جاوا اسکریپت هندل میشود و فایل index.html فقط دارای یک المنت با آیدی مشخصی است. کد زیر ساختار فایل index.html میباشد:
<!DOCTYPE html>
<html>
<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>الگوی MVC در جاوااسکریپت</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="script.js"></script>
</body>
</html> فایل style.css آن نیز دارای دستورات ساده‌ای است و یا میتوان از
Normalize.css به همراه استایل دلخواه استفاده کرد و یا از فریم ورکهای مطرح دیگر استفاده نمود. کدهای فایل sytle.css آن نیز به شکل زیر خواهد بود:
*,
*::before,
*::after {
box-sizing: border-box
}
html {
color: #444;
}
#root {
max-width: 450px;
margin: 2rem auto;
padding: 0 1rem;
}
form {
display: flex;
margin-bottom: 2rem;
}
[type="text"],
button {
display: inline-block;
-webkit-appearance: none;
padding: .5rem 1rem;
border: 2px solid #ccc;
border-radius: 4px;
}
button {
cursor: pointer;
background: #007bff;
color: white;
border: 2px solid #007bff;
margin: 0 .5rem;
}
[type="text"] {
width: 100%;
}
[type="text"]:active,
[type="text"]:focus {
outline: 0;
border: 2px solid #007bff;
}
[type="checkbox"] {
margin-right: 1rem;
}
h1 {
color: #222;
}
ul {
padding: 0;
}
li {
display: flex;
align-items: center;
padding: 1rem;
margin-bottom: 1rem;
background: #f4f4f4;
border-radius: 4px;
}
li span {
display: inline-block;
padding: .5rem;
width: 250px;
border-radius: 4px;
border: 2px solid transparent;
}
li span:hover {
background: rgba(179, 215, 255, 0.52);
}
li span:focus {
outline: 0;
border: 2px solid #007bff;
background: rgba(179, 207, 255, 0.52)
}
فایلهای HTML و CSS را برای شروع کار آماده نمودیم و از این پس با فایل script.js، ادامه کار را پیش می‌بریم. برای جداسازی هر قسمت از اجزای MVC، کلاسی خاص را تدارک می‌بینیم. پس سه کلاس خواهیم داشت بهنامهای Model , View , Controller و در سازنده کلاس کنترلر، دو شی از View و Model را بعنوان ورودی دریافت میکنیم. همانطور که پیشتر توضیح داده شد، قسمت Controller، پل ارتباطی بین View و Model میباشد. کد فایل script.js را به شکل زیر تغییر میدهیم:
class Model {
constructor() {}
}
class View {
constructor() {}
}
class Controller {
constructor(model, view) {
this.model = model
this.view = view
}
}
const app = new Controller(new Model(), new View()) در ادامه کار در کلاس Model شروع به کدنویسی میکنیم و متدهای مد نظر را برای عملیات CRUD، در آن اضافه میکنیم. چهار تابع را به کلاس Model بهنامهای addTodo ، editTodo ، deleteTodo ، toggleTodo اضافه میکنیم. در کد زیر، در بالای هر تابع، توضیحی در مورد عملکرد تابع ذکر شده است:
class Model {
constructor() {
// یک آرایه از اطلاعات پیش فرض
this.todos = [{
id: 1,
text: 'Run a marathon',
complete: false
},
{
id: 2,
text: 'Plant a garden',
complete: false
},
]
}
// متدی برای افزودن آیتم جدید به آرایه
addTodo(todoText) {
const todo = {
id: this.todos.length > 0 ? this.todos[this.todos.length - 1].id + 1 : 1,
text: todoText,
complete: false,
}
this.todos.push(todo)
}
// متدی برای بروزسانی آیتم مورد نظر
editTodo(id, updatedText) {
this.todos = this.todos.map(todo =>
todo.id === id ? {
id: todo.id,
text: updatedText,
complete: todo.complete
} : todo
)
}
// انجام میدهد filter با استفاده از متد id تابعی که عملیات حذف را بوسیله فیلد
deleteTodo(id) {
this.todos = this.todos.filter(todo => todo.id !== id)
}
// متدی که در آن مشخص میکنیم کار مد نظرانجام شده یا خیر
toggleTodo(id) {
this.todos = this.todos.map(todo =>
todo.id === id ? {
id: todo.id,
text: todo.text,
complete: !todo.complete
} : todo
)
}
} میتوانیم برای تست و نحوه عملکرد آن با استفاده از شیء app، با دستور زیر، آیتمی را به آرایه اضافه کنیم و در کنسول آن را نمایش دهیم:
app.model.addTodo('Take a nap')
console.log(app.model.todos) 
در حال حاضر با هر بار reload شدن صفحه، فقط اطلاعات پیش فرض، درون آرایه todos قرار میگیرد؛ ولی در ادامه آن را در local storage ذخیره میکنیم.
برای ساختن قسمت View، از جاوااسکریپت استفاده میکنیم و DOM را تغییر میدهیم. البته اینکار را بدون استفاده از JSX و یا یک templating language انجام خواهیم داد. قسمت‌های دیگر برنامه مانند Controller و Model نباید درگیر تغییرات DOM یا CSS یا عناصر HTML باشند و تمام این موارد توسط View هندل میشود. کد View به نحو زیر خواهد بود:
class View {
constructor() {}
// ایجاد یک المنت با کلاسهای استایل دلخواه
createElement(tag, className) {
const element = document.createElement(tag)
if (className) element.classList.add(className)
return element
}
// DOM انتخاب و گرفتن آیتمی خاص از
getElement(selector) {
const element = document.querySelector(selector)
return element
}
} سپس قسمت سازنده کلاس View را تغییر میدهیم و تمام المنت‌های مورد نیاز را در آن ایجاد میکنیم:
- ارجاعی به المنتی با آیدی root
- تگ h1 برای عنوان
- یک form، input و دکمه‌ای برای افزودن آیتمی جدید به آرایه‌ی todos
- یک المنت ul برای نمایش آیتمهای todos
سپس کلاس View به شکل زیر خواهد بود:
constructor() {
// root ارجاعی به المنتی با آیدی
this.app = this.getElement('#root')
// عنوان برنامه
this.title = this.createElement('h1')
this.title.textContent = 'Todos'
// فرم ، اینپوت ورودی و دکمه
this.form = this.createElement('form')
this.input = this.createElement('input')
this.input.type = 'text'
this.input.placeholder = 'Add todo'
this.input.name = 'todo'
this.submitButton = this.createElement('button')
this.submitButton.textContent = 'Submit'
// برای نمایش عناط آرایه یا همان لیست کارها
this.todoList = this.createElement('ul', 'todo-list')
// افزودن اینپوت ورودی و دکمه به فرم
this.form.append(this.input, this.submitButton)
// ایجاد شده است app که اینجا ارجاعی به آن بنام root اضافه کردن تمام آیتمهای بالا در المنتی با آیدی
this.app.append(this.title, this.form, this.todoList)
} در قسمت View، دو تابع هم برای getter و setter داریم که از underscore در اول نام آنها استفاده شده که نشان دهنده این است، توابع از خارج از کلاس در دسترس نیستند (شبیه private در سی شارپ؛ البته این یک قرارداد هست یا convention)
get _todoText() {
return this.input.value
}
_resetInput() {
this.input.value = ''
} در ادامه این کلاس، یک تابع دیگر هم برای نمایش آرایه داریم که هر زمان عناصر آن تغییر کردند، بتواند نمایش به‌روز اطلاعات را نشان دهد:
displayTodos(todos){
//...
} متد displayTodos یک المنت ul و liهایی را به تعداد عناصر todos ایجاد میکند و آنها را نمایش میدهد. هر زمانکه تغییراتی مانند اضافه شدن، حذف و ویرایش در todos صورت گیرد، این متد دوباره فراخوانی میشود و لیست جدید را نمایش میدهد. محتوای متد dispayTodos به شکل زیر خواهد بود:
displayTodos(todos) {
// حذف تمام نودها
while (this.todoList.firstChild) {
this.todoList.removeChild(this.todoList.firstChild)
}
// اگر هیچ آیتمی در آرایه نبود این پاراگراف با متن پیش فرض نمایش داده میشود
if (todos.length === 0) {
const p = this.createElement('p')
p.textContent = 'Nothing to do! Add a task?'
this.todoList.append(p)
} else {
// وعناصرمربوطه را ایجاد میکند liاگه درون آرایه آیتمی قرار دارد پس به ازای آن یک عنصر
todos.forEach(todo => {
const li = this.createElement('li')
li.id = todo.id
const checkbox = this.createElement('input')
checkbox.type = 'checkbox'
checkbox.checked = todo.complete
const span = this.createElement('span')
span.contentEditable = true
span.classList.add('editable')
if (todo.complete) {
const strike = this.createElement('s')
strike.textContent = todo.text
span.append(strike)
} else {
span.textContent = todo.text
}
const deleteButton = this.createElement('button', 'delete')
deleteButton.textContent = 'Delete'
li.append(checkbox, span, deleteButton)
// نود ایجاد شده به لیست اضافه میکند
this.todoList.append(li)
})
}
// برای خطایابی و نمایش در کنسول
console.log(todos)
}
در نهایت قسمت Controller را که پل ارتباطی بین View و Model میباشد، کامل میکنیم. اولین تغییراتی که در کلاس Controller ایجاد میکنیم، استفاده از متد displayTodos در سازنده‌ی این کلاس میباشد و با هر بار تغییر این متد، دوباره فراخوانی میشود:
class Controller {
constructor(model, view) {
this.model = model
this.view = view
// نمایش اطلاعات پیش فرض
this.onTodoListChanged(this.model.todos)
}
onTodoListChanged = todos => {
this.view.displayTodos(todos)
}
}
چهار تابعی را که در قسمت Model ایجاد نمودیم و کار ویرایش، حذف، افزودن و اتمام کار را انجام میدادند، در کلاس کنترلر آنها را هندل میکنیم و زمانیکه کاربر دکمه‌ای را برای افزودن یا تیک حذف آیتمی، زد، تابع مربوطه توسط کنترلر در Model فراخوانی شود:
handleAddTodo = todoText => {
this.model.addTodo(todoText)
}
handleEditTodo = (id, todoText) => {
this.model.editTodo(id, todoText)
}
handleDeleteTodo = id => {
this.model.deleteTodo(id)
}
handleToggleTodo = id => {
this.model.toggleTodo(id)
} چون کنترلر نمیتواند بصورت مستقیم فراخوانی شود و این توابع باید درون DOM تنظیم شوند تا به ازای رخدادهایی همچون click و change، فراخوانی شوند. پس از این توابع در قسمت View استفاده میکنیم و به کلاس View، موارد زیر را اضافه میکنیم:
bindAddTodo(handler) {
this.form.addEventListener('submit', event => {
event.preventDefault()
if (this._todoText) {
handler(this._todoText)
this._resetInput()
}
})
}
bindDeleteTodo(handler) {
this.todoList.addEventListener('click', event => {
if (event.target.className === 'delete') {
const id = parseInt(event.target.parentElement.id)
handler(id)
}
})
}
bindToggleTodo(handler) {
this.todoList.addEventListener('change', event => {
if (event.target.type === 'checkbox') {
const id = parseInt(event.target.parentElement.id)
handler(id)
}
})
}
برای bind کردن این متدها در کلاس Controller، کدهای زیر را اضافه میکنیم:
this.view.bindAddTodo(this.handleAddTodo)
this.view.bindDeleteTodo(this.handleDeleteTodo)
this.view.bindToggleTodo(this.handleToggleTodo)
برای ذخیره اطلاعات در local storage، در سازنده کلاس Model، کد زیر را اضافه میکنیم:
this.todos = JSON.parse(localStorage.getItem('todos')) || [] متد دیگری هم در کلاس Model برای به‌روز رسانی مقادیر local storage قرار میدهیم:
_commit(todos) {
this.onTodoListChanged(todos)
localStorage.setItem('todos', JSON.stringify(todos))
} متدی هم برای تغییراتی که هر زمان بر روی todos اتفاق می‌افتد، فراخوانی شود:
deleteTodo(id) {
this.todos = this.todos.filter(todo => todo.id !== id)
this._commit(this.todos)
}
در پایان میتوانید سورس کد مقاله جاری را از
اینجا دانلود نمایید.
این مقاله صرفا جهت آشنایی و نمونه کدی از پیاده سازی الگوی MVC در جاوااسکریپت میباشد.
