معماری JavaScript

نمای کلی

flowchart TB
  html[HTML x-data]
  alpine[alpine.js defer]
  core[novira.js]
  shared[noviraShared]
  pageMod[novira-cart.js / novira-fashion.js / ...]
  mainJs[main.js]
  swiper[swiper-bundle.min.js]

  html --> alpine
  core --> shared
  pageMod --> shared
  alpine --> pageMod
  mainJs --> swiper
  mainJs --> alpine

فایل هسته: novira.js

توابع سراسری

تابع	نقش
`noviraShared()`	state مشترک همه صفحات (منو، سبد، فوتر، ...)
`novira()`	داده و متدهای صفحه اصلی
`productImgFor()`	ساخت مسیر تصویر محصول
`formatPrice()`	فرمت قیمت فارسی
`dsIsLoggedIn()`	بررسی ورود mock
`comingSoonHref()`	لینک صفحات به‌زودی

noviraShared() چه چیزی دارد؟

mobileMenuOpen, cartOpen, megaOpen, supportOpen
cartItems, cartCount, cartTotal
footerColumns, supportFaqs
متدهای toggleCart(), addToCart(), init() و ...

ماژول‌های صفحه

هر ماژول یک تابع Alpine برمی‌گرداند که noviraShared() را spread می‌کند:

// novira-fashion.js
function noviraFashion() {
  return {
    ...noviraShared(),
    fashionTrending: [...],
    initFashion() { ... }
  };
}

فهرست ماژول‌ها

فایل	تابع	x-init
`novira.js`	`novira()`	`init()`
`novira-fresh.js`	`noviraFresh()`	`initFresh()`
`novira-fashion.js`	`noviraFashion()`	`initFashion()`
`novira-cart.js`	`noviraCart()`	`init()`
`novira-product.js`	`noviraProduct()`	`init()`
`novira-profile.js`	`noviraProfile(nav)`	`init()`
`novira-shipping.js`	`noviraShipping()`	`init()`
`novira-payment.js`	`noviraPayment()`	`init()`
`novira-blog.js`	`noviraBlog()`	`initBlog()`
`novira-blog-post.js`	`noviraBlogPost()`	`initPost()`
`novira-faq.js`	`noviraFaq()`	`initFaq()`
`novira-auth.js`	`noviraAuth()`	`init()`
`novira-coming-soon.js`	`noviraComingSoon()`	`init()`
`novira-demo.js`	`noviraDemo()`	—

ترتیب لود اسکریپت (ضروری)

اگر novira.js بعد از ماژول صفحه لود شود → خطای noviraShared is not defined.

اگر alpine.js قبل از novira.js لود شود → خطای novira is not defined.

main.js

فقط مسئول Swiper است:

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('[data-swiper]').forEach((el) => {
    const options = el.dataset.swiper ? JSON.parse(el.dataset.swiper) : {};
    el.swiperInstance = new Swiper(el, options);
  });
});

اتصال به API واقعی

مراحل پیشنهادی:

توابع fetch در novira.js یا فایل جدید api.js اضافه کنید
آرایه‌های mock را با پاسخ API جایگزین کنید
init() هر صفحه را async کنید و داده را await کنید
dsIsLoggedIn() را با token/cookie واقعی جایگزین کنید

افزودن صفحه جدید

mypage.html بسازید — x-data="noviraMyPage()"
assets/js/novira-mypage.js — function noviraMyPage() { return { ...noviraShared(), ... }; }
CSS اختیاری: novira-mypage.css
اسکریپت‌ها را طبق ترتیب بالا لود کنید