التعامل بكفاءة مع دوال جافا سكريبت متعددة في أحداث النقر

إنّ التعامل مع إجراءات متعددة تُفعّل بنقرة واحدة يُعدّ مهمة شائعة في تطوير الويب. تستعرض هذه المقالة أفضل الممارسات لتنفيذ العديد من دوال جافا سكريبت استجابةً لحدث onclick، مع التركيز على وضوح الشفرة وقابليتها للصيانة.

محتويات

• استخدام دالة مُغلفة
• استخدام مُستمعي الأحداث (جافا سكريبت غير مُتطفل)
• فهم مُشغّلي && و || (متقدّم وأقل توصية)

استخدام دالة مُغلفة

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

function function1() {
  console.log("تم تنفيذ الدالة 1");
  // ... شفرتك ...
}

function function2() {
  console.log("تم تنفيذ الدالة 2");
  // ... شفرتك ...
}

function combinedFunction() {
  function1();
  function2();
}

// HTML
<button onclick="combinedFunction()">انقر هنا</button>

تُعدّ combinedFunction() دالة مُغلفة، تضمن تنفيذ function1() و function2() بشكل تسلسلي. هذا يعزز القابلية للقراءة ويُبسّط الصيانة، خاصةً للمشاريع الكبيرة.

استخدام مُستمعي الأحداث (جافا سكريبت غير مُتطفل)

يُعدّ جافا سكريبت غير المُتطفل مبدأً رئيسيًا لفصل جافا سكريبت عن HTML، وتحسين تنظيم الشفرة، وقابليتها للصيانة، وإمكانية الوصول إليها. توفر مُستمعي الأحداث طريقة فعّالة لتحقيق ذلك.

function function1() {
  console.log("تم تنفيذ الدالة 1");
  // ... شفرتك ...
}

function function2() {
  console.log("تم تنفيذ الدالة 2");
  // ... شفرتك ...
}

const myButton = document.getElementById("myButton");

myButton.addEventListener("click", function1);
myButton.addEventListener("click", function2);

// HTML
<button id="myButton">انقر هنا</button>

تسمح هذه الطريقة بإضافة العديد من الدوال إلى نفس الحدث. يحدد ترتيب إرفاق المُستمع ترتيب التنفيذ (function1 قبل function2 في هذا المثال). هذا هو النهج المُفضّل للمشاريع الكبيرة نظرًا لتنظيمه المُتميّز وقابليته للصيانة.

فهم مُشغّلي && و || (متقدّم وأقل توصية)

على الرغم من إمكانية استخدام مُشغّلي && (AND) و || (OR) داخل سمة onclick لسلسلة دعوات الدوال، إلا أنّه يُنصح عمومًا بتجنّب ذلك نظرًا لانخفاض قابلية القراءة واحتمالية حدوث سلوك غير متوقع.

&& (AND): تُنفّذ جميع الدوال فقط إذا أعادت جميع الدوال السابقة قيمة صحيحة.

<button onclick="function1() && function2()">انقر هنا</button>

|| (OR): يتوقّف التنفيذ عند أول دالة تُعيد قيمة صحيحة.

<button onclick="function1() || function2()">انقر هنا</button>

يُقترن هذا النهج ارتباطًا وثيقًا بين جافا سكريبت و HTML، مما يُعيق القابلية للقراءة وقد يؤدي إلى نتائج غير متوقعة إذا أعادت الدوال قيمًا خاطئة (0، false، null، undefined، ""). من الأفضل تجنّبه ما لم تكن في أبسط السيناريوهات وفقط عندما تفهم تمامًا آثارها.

الخلاصة: تُوصى بشدة بطريقة الدالة المُغلفة وطرق مُستمعي الأحداث للتعامل مع دوال متعددة داخل أحداث onclick.فهي تُعطي الأولوية لوضوح الشفرة، وقابليتها للصيانة، وفصل الاهتمامات بشكل نظيف، مما يؤدي إلى تطبيقات ويب أكثر قوة وموثوقية.