$(document).ready بدون jQuery: البدائل الحديثة في 2025

لماذا في 2025 يجب التخلي عن jQuery من أجل $(document).ready؟

إذا كنت لا تزال تكتب $(document).ready(function() { ... }) — فأنت إما تعمل على مشروع قديم (legacy)، أو تفوتك إمكانيات JavaScript الحديثة. في عام 2025، jQuery يشبه هاتفًا بأزرار: يعمل، لكن الجميع انتقل منذ زمن إلى الشاشات التي تعمل باللمس.

على Stack Overflow، جمع سؤال $(document).ready equivalent without jQuery مئات الآلاف من المشاهدات. هذا يعني أن المطورين في جميع أنحاء العالم يبحثون عن طرق خفيفة وسريعة وحديثة لتنفيذ الكود بعد تحميل DOM. والإجابة بسيطة: الدعم الأصلي للمتصفحات يغطي منذ فترة طويلة 100% من الاحتياجات التي كان jQuery يحلها سابقًا.

في هذه المقالة، سنستعرض 3 طرق أفضل لاستبدال $(document).ready بـ JavaScript النقي، وسنناقش تفاصيل الأداء، ونعرض أمثلة كود حقيقية يمكنك استخدامها اليوم.

DOMContentLoaded — البطل الرئيسي بدون jQuery

البديل المباشر لـ $(document).ready هو حدث DOMContentLoaded. يتم تشغيله عندما يقوم المتصفح بتحميل وتحليل مستند HTML بالكامل، ولكن قبل تحميل الصور والأنماط والموارد الأخرى. هذا بالضبط ما كان يفعله jQuery تحت الغطاء.

إليك الشكل الأساسي للبناء:

document.addEventListener('DOMContentLoaded', function() {\n    // سيتم تنفيذ الكود الخاص بك بعد التحميل الكامل لـ DOM\n    console.log('تم تحميل DOM بالكامل وجاهز للعمل!');\n    document.querySelector('.header').style.color = '#2c3e50';\n});

لماذا هذا أفضل من jQuery؟

\n
• السرعة: لا حاجة لتحميل مكتبة بحجم 30+ كيلوبايت من أجل وظيفة واحدة.
\n
• التحكم: أنت تعرف بالضبط ما يحدث في لحظة التحميل.
\n
• التوافق: يعمل في جميع المتصفحات الحديثة (IE9+, Chrome, Firefox, Safari, Edge).
\n

لكن هناك فارق بسيط: إذا تم تضمين البرنامج النصي الخاص بك بعد تحميل DOM، فلن يعمل الحدث. الحل هو التحقق من document.readyState:

function ready(fn) {\n    if (document.readyState !== 'loading') {\n        fn(); // تم تحميل DOM بالفعل\n    } else {\n        document.addEventListener('DOMContentLoaded', fn);\n    }\n}\nready(function() {\n    console.log('سيتم التنفيذ بشكل مضمون بعد تحميل DOM');\n});

هذا النمط هو المعيار الذهبي لاستبدال $(document).ready في عام 2025.

الخاصية defer: الطريقة الأسهل بدون سطر كود واحد

ماذا لو أخبرتك أنه يمكنك عدم كتابة DOMContentLoaded على الإطلاق؟ الخاصية defer في وسم <script> تقوم بكل العمل نيابة عنك:

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

كيف يعمل هذا؟ يقوم المتصفح بتحميل البرنامج النصي بالتوازي مع HTML، ولكن ينفذه فقط بعد التحليل الكامل للمستند. هذا يعادل أن الكود بأكمله داخل script.js مغلف تلقائيًا في $(document).ready.

المزايا:

\n
• صفر كود إضافي — فقط أضف الخاصية.
\n
• البرامج النصية التي تحتوي على defer يتم تنفيذها بترتيب ظهورها في HTML.
\n
• يعمل في 97% من المتصفحات (بما في ذلك الإصدارات القديمة من Safari).
\n

متى تستخدمه؟ مثالي للبرامج النصية العادية التي يجب أن تعمل مع DOM ولكنها لا تمنع العرض. على سبيل المثال:

<script src="analytics.js" defer></script>\n<script src="app.js" defer></script>\n<!-- سيتم تنفيذ app.js بعد analytics.js، ولكن قبل window.onload -->

قارن مع jQuery: $(document).ready داخل app.js هو كود زائد. أما مع defer فأنت تكتب ببساطة:

// app.js — لا