This article is currently in the process of being translated into Arabic (~98% done).
The ready event
كما ذكرنا في الفصل السابق، من الممارسات الجيدة الانتظار حتى يتم تحميل المستند بالكامل وجاهزيته، قبل العمل به. يتيح لك هذا أيضًا الحصول على كود JavaScript الخاص بك قبل نص المستند، في قسم الرأس، إما بشكل مباشر أو من خلال رابط إلى ملف JavaScript خارجي. يمكنك القيام بذلك عن طريق وضع الكود الخاص بك داخل حدث جاهز للمستند. سوف نستخدم نفس المثال كما في "Hello, World!" الفصل، ولكن هذه المرة الكود موجود داخل الحدث الجاهز:
<div id="divTest1"></div>
<script type="text/javascript">
function DocumentReady()
{
$("#divTest1").text("Hello, world!");
}
$(document).ready(DocumentReady);
</script>
ما نفعله هنا هو أننا ننشئ دالة تسمى DocumentReady، والتي يجب تشغيلها بمجرد أن يصبح المستند جاهزًا لمعالجة DOM. في السطر الأخير، نستخدم التابع Ready() لتعيين وظيفتنا للحدث الجاهز، لإخبار jQuery أنه بمجرد أن يصبح المستند جاهزًا، نريد منه استدعاء وظيفتنا.
ومع ذلك، يمكننا اختصار ذلك قليلاً باستخدام وظيفة مجهولة المصدر في JavaScript بدلاً من ذلك. هذا يعني في الأساس أنه بدلاً من الإعلان عن الوظيفة وإعطائها اسمًا، نقوم بإنشائها ببساطة ثم نقوم بتمرير المرجع على الفور إلى الوظيفة الجاهزة (). إذا كنت جديدًا في استخدام JavaScript، فقد يبدو هذا معقدًا للغاية، ولكن عندما تعتاد عليه، قد تعجبك ضغطات المفاتيح الأقل والمساحة الأقل اللازمة لإنجاز الأمر نفسه:
<div id="divTest2"></div>
<script type="text/javascript">
$(document).ready(function()
{
$("#divTest2").text("Hello, world!");
});
</script>
لكن بالطبع، لم يكن هذا قصيرًا بدرجة كافية لفريق jQuery، لذلك قرروا إنشاء نسخة (تحميل زائد) من مُنشئ jQuery الذي يأخذ دالة جاهزة كمعلمة، لجعلها أقصر:
<div id="divTest3"></div>
<script type="text/javascript">
$(function()
{
$("#divTest3").text("Hello, world!");
});
</script>
في المثال الأخير، تم تمرير وظيفتنا المجهولة مباشرة إلى منشئ jQuery، الذي يعينها للحدث الجاهز. كما سترون عند اختبار الكود، يتم إطلاق الحدث بمجرد تحميل الصفحة، وفي معظم الأحيان يتم ذلك بسرعة كبيرة لدرجة أنك لن تدرك ذلك.
كما هو موضح سابقًا، يعد تغليف التعليمات البرمجية الخاصة بك في وظيفة الحدث الجاهز أفضل ممارسة للعمل مع jQuery في مستندك، وبالتالي ستشاهد هذا البرنامج التعليمي باستخدام هذا النهج في معظم الأمثلة، ما لم يتم تخطيه للحفاظ على أحجام الأمثلة منخفضة.