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

در بخش قبل رابط کاربری پروژه را آماده کردیم. اکنون نوبت به نوشتن منطق برنامه با استفاده از رویکرد شی‌گرای کلاسیک جاوااسکریپت (ES5) است.

تعریف سازنده‌ها (Constructors)

ابتدا دو سازنده اصلی تعریف می‌کنیم:

1. Book: برای ساخت شیء کتاب و نگهداری اطلاعات آن (عنوان، نویسنده، ISBN).
2. UI: برای مدیریت متدهای مربوط به نمایش کتاب‌ها، حذف آن‌ها و نمایش پیام‌ها.

// سازنده کتاب
function Book(title, author, isbn) {
  this.title = title;
  this.author = author;
  this.isbn = isbn;
}

// سازنده رابط کاربری (UI)
function UI() {}

مدیریت رویدادها (Event Listeners)

برای ثبت کتاب، باید به رویداد submit فرم گوش دهیم. ابتدا فرم را انتخاب کرده و رفتار پیش‌فرض آن (ارسال به سرور) را متوقف می‌کنیم. سپس مقادیر فیلدها را دریافت کرده و یک نمونه جدید از Book ایجاد می‌کنیم.

// گوش دادن به رویداد Submit فرم
document.getElementById('book-form').addEventListener('submit', function(e) {
  // دریافت مقادیر فیلدها
  const title = document.getElementById('title').value,
        author = document.getElementById('author').value,
        isbn = document.getElementById('isbn').value;

  // ساخت یک نمونه جدید از کلاس کتاب
  const book = new Book(title, author, isbn);

  // ساخت یک نمونه جدید از کلاس UI
  const ui = new UI();

  // افزودن کتاب به لیست (استفاده از متد پروتوتایپ)
  ui.addBookToList(book);

  // پاکسازی فیلدها
  ui.clearFields();

  e.preventDefault();
});

افزودن متدها به Prototype

برای اینکه کد ما بهینه باشد، متدها را به جای قرار دادن مستقیم در سازنده، به prototype اضافه می‌کنیم.

متد افزودن کتاب به لیست

این متد یک سطر جدید (tr) در جدول ایجاد کرده و اطلاعات کتاب را در آن قرار می‌دهد.

UI.prototype.addBookToList = function(book) {
  const list = document.getElementById('book-list');
  // ایجاد عنصر سطر (tr)
  const row = document.createElement('tr');

  // درج ستون‌ها (td) با استفاده از Template Literal
  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);
};

متد پاکسازی فیلدها

پس از افزودن کتاب، باید فیلدهای ورودی را خالی کنیم تا فرم برای ثبت کتاب بعدی آماده باشد.

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

جمع‌بندی

در این بخش، ساختار کلاسیک ES5 را برای مدیریت داده‌ها و تعامل با DOM پیاده‌سازی کردیم. با استفاده از متدهای prototype، کدی تمیز و قابل‌ فهم ایجاد کردیم که منطق برنامه را از ساختار داده‌ها جدا می‌کند. در بخش بعدی، قابلیت اعتبارسنجی (Validation) و نمایش پیام‌های خطا را به این پروژه اضافه خواهیم کرد.