43- آموزش جاوااسکریپت | پروژه عملی :قسمت 5 از 6 -تبدیل پروژه Book List از ES5 به کلاس‌های ES6

در این بخش، پروژه Book List را که پیش‌تر با ساختار شی‌گرایی ES5 و prototype پیاده‌سازی شده بود، با استفاده از کلاس‌های ES6 بازنویسی می‌کنیم. هدف این است که بدون تغییر در منطق برنامه، ساختار کد را خواناتر و مدرن‌تر کنیم.

ابتدا باید در فایل HTML، آدرس فایل جاوااسکریپت را از نسخه قبلی به فایل جدید تغییر دهیم تا کدهای مبتنی بر کلاس را در فایل جداگانه بنویسیم.

<script src="appes6.js"></script>

تعریف کلاس Book

در نسخه قبلی، برای ساخت شیء کتاب از تابع سازنده استفاده می‌کردیم. اکنون همان ساختار را با class و constructor پیاده‌سازی می‌کنیم.

class Book {
  constructor(title, author, isbn) {
    this.title = title;
    this.author = author;
    this.isbn = isbn;
  }
}

در این کلاس فقط به constructor نیاز داریم، چون وظیفه Book صرفاً نگهداری اطلاعات کتاب است.

تعریف کلاس UI

تمام متدهایی که به رابط کاربری مربوط هستند، در کلاس UI قرار می‌گیرند. این متدها همان متدهایی هستند که قبلاً روی UI.prototype تعریف کرده بودیم.

class UI {
  addBookToList(book) {
    const list = document.getElementById('book-list');
    const row = document.createElement('tr');

    row.innerHTML = `
      <td>${book.title}</td>
      <td>${book.author}</td>
      <td>${book.isbn}</td>
      <td><a href="#" class="delete">X</a></td>
    `;

    list.appendChild(row);
  }

  showAlert(message, className) {
    const div = document.createElement('div');
    div.className = `alert ${className}`;
    div.appendChild(document.createTextNode(message));

    const container = document.querySelector('.container');
    const form = document.querySelector('#book-form');

    container.insertBefore(div, form);

    setTimeout(function() {
      document.querySelector('.alert').remove();
    }, 3000);
  }

  deleteBook(target) {
    if (target.className === 'delete') {
      target.parentElement.parentElement.remove();
    }
  }

  clearFields() {
    document.getElementById('title').value = '';
    document.getElementById('author').value = '';
    document.getElementById('isbn').value = '';
  }
}

رویداد ثبت فرم

در بخش مدیریت فرم، تقریباً هیچ تفاوتی نسبت به نسخه ES5 وجود ندارد. همچنان مقادیر ورودی را دریافت می‌کنیم، یک شیء از کلاس Book می‌سازیم، سپس یک نمونه از UI ایجاد می‌کنیم و عملیات اعتبارسنجی و افزودن کتاب را انجام می‌دهیم.

document.getElementById('book-form').addEventListener('submit', function(e) {
  const title = document.getElementById('title').value;
  const author = document.getElementById('author').value;
  const isbn = document.getElementById('isbn').value;

  const book = new Book(title, author, isbn);
  const ui = new UI();

  if (title === '' || author === '' || isbn === '') {
    ui.showAlert('لطفاً همه فیلدها را پر کنید', 'error');
  } else {
    ui.addBookToList(book);
    ui.showAlert('کتاب اضافه شد', 'success');
    ui.clearFields();
  }

  e.preventDefault();
});

رویداد حذف کتاب

برای حذف کتاب نیز همان رویکرد قبلی را حفظ می‌کنیم. چون دکمه‌های حذف به‌صورت داینامیک ایجاد می‌شوند، باید از Event Delegation استفاده کنیم.

document.getElementById('book-list').addEventListener('click', function(e) {
  const ui = new UI();

  ui.deleteBook(e.target);
  ui.showAlert('کتاب حذف شد', 'success');

  e.preventDefault();
});

بررسی نتیجه

پس از این بازنویسی، برنامه دقیقاً مانند نسخه ES5 عمل می‌کند:

• اعتبارسنجی فرم همچنان فعال است.
• کتاب‌ها به‌درستی به لیست اضافه می‌شوند.
• حذف کتاب بدون مشکل انجام می‌شود.
• پیام‌های موفقیت و خطا همچنان نمایش داده می‌شوند.

نکته مهم درباره کلاس‌های ES6

اگرچه ظاهر کد با استفاده از class ساده‌تر و تمیزتر شده است، اما در پشت صحنه همچنان از prototype استفاده می‌شود. یعنی متدهایی که داخل کلاس UI تعریف کرده‌ایم، در واقع روی prototype آن قرار می‌گیرند.

به همین دلیل، کلاس‌های ES6 را معمولاً نوعی «قند نحوی» یا Syntactic Sugar می‌دانند؛ یعنی روشی ساده‌تر و خواناتر برای نوشتن همان ساختار پروتوتایپی.

جمع‌بندی

در این آموزش، پروژه Book List را از ساختار ES5 به کلاس‌های ES6 تبدیل کردیم، بدون اینکه رفتار برنامه تغییر کند. این بازنویسی نشان می‌دهد که کلاس‌های ES6 بیشتر برای خوانایی و نظم بهتر کد هستند و در پشت صحنه همچنان بر پایه prototype کار می‌کنند.