اعمل Widget للمتصفح بدون مكتبة: state، events، وواجهة يمكن تضمينها

الودجت الناجح ليس مجرد زر جميل؛ هو وحدة صغيرة لها مدخلات، حالة، مخرجات، وطريقة إلغاء أو خطأ. عندما تكون الوظيفة محدودة، يمكن لـVanilla JavaScript أن يقدم نتيجة أنظف من إضافة dependency جديدة. سنبني عداد مهام بسيطًا يمكن تضمينه داخل أي صفحة.

قسّم الودجت إلى ثلاثة أجزاء

الحالة تخزن البيانات، render يرسمها، والأحداث تغيّرها. لا تجعل event handler يعدّل عشرة عناصر متفرقة؛ غيّر state ثم استدع render. هذا الأسلوب يجعل السلوك قابلًا للاختبار.

const state = { count: 0 };
const root = document.querySelector('[data-widget]');
function render(){
  root.querySelector('[data-value]').textContent = String(state.count);
  root.querySelector('[data-minus]').disabled = state.count === 0;
}
root.addEventListener('click', (event) => {
  const action = event.target.closest('[data-action]')?.dataset.action;
  if (action === 'add') state.count += 1;
  if (action === 'remove' && state.count > 0) state.count -= 1;
  render();
});
render();

صمّم HTML يستطيع العيش وحده

ضع نصًا افتراضيًا داخل HTML، وليس داخل JavaScript فقط، حتى لا يرى المستخدم فراغًا طويلًا قبل التحميل. استخدم button حقيقيًا، وlabel واضحًا، وحالة disabled عندما لا يكون الإجراء صالحًا. لا تعتمد على اللون وحده لشرح الحالة.

الأحداث العامة

إذا كان الموقع الأب يحتاج معرفة التغيير، أطلق CustomEvent باسم موثق، وأرسل detail محدودًا. لا ترسل كائنات داخلية كاملة؛ اجعل العقد صغيرًا حتى تستطيع تغييره لاحقًا.

اختبر التضمين

ضع الودجت مرتين في الصفحة، وتأكد أن كل نسخة تملك state مستقلة. اختبر وجود عناصر ناقصة، وغياب JavaScript، وحجم شاشة ضيق. هذه الحالات تكشف افتراضات كثيرة لا تظهر في demo واحد.

مراجع رسمية

هذه الروابط الرسمية هي نقطة الرجوع عند اختلاف إصدار الأداة أو تغيّر سلوك المتصفح.