إذا لم تتمكن من فهم آلية الجري للغة JavaScript ، أو ببساطة ، فلا يمكنك إتقان ترتيب التنفيذ لـ JavaScript ، فأنت مثل البول الذي لا يمكنه التحكم حول.
فكيف تحليل جافا سكريبت؟ ما هو أمر التنفيذ الخاص به؟ قبل أن نفهم هذه ، دعونا أولاً نفهم بعض المصطلحات المهمة:
1. كتلة الكود
تشير كتلة التعليمات البرمجية في JavaScript إلى قطاع رمز مقسومة على علامة <script>. على سبيل المثال:
نسخة الكود كما يلي:
<script type = "text/javaScript">
التنبيه ("هذا هو كتلة الكود واحد") ؛
</script>
<script type = "text/javaScript">
التنبيه ("هذا هو الكود كتلة اثنين") ؛
</script>
يتم تجميع JS وتنفيذها وفقًا لكتل الرمز. ماذا يعني ذلك؟
نسخة الكود كما يلي:
<script type = "text/javaScript">
التنبيه (STR) ؛ // لأنه لم يتم تعريف STR ، سيكون للمتصفح خطأ ، ولا يمكن تشغيل ما يلي
التنبيه ("أنا كود كتلة واحد") ؛ // لا يعمل هنا
var test = "أنا متغير كتلة الكود" ؛
</script>
<script type = "text/javaScript">
التنبيه ("أنا كود بلوك اثنين") ؛
تنبيه (اختبار) ؛
</script>
في الكود أعلاه ، يتم الإبلاغ عن خطأ في الكود الأول ، لكنه لا يؤثر على تنفيذ الكود اثنين. مشاركة.
2. وظائف التصريح ووظائف المهمة
يتم تقسيم تعريفات الوظائف في JS إلى نوعين: وظائف التصريحية ووظائف المهمة.
نسخة الكود كما يلي:
<script type = "text/javaScript">
وظيفة fn () {// وظيفة الإعلان
}
var fn = function {// issignment function
}
</script>
الفرق بين الوظيفة التعريفية ودالة التخصيص هو أنه خلال فترة التحميل المسبق لـ JS ، سيتم استخراج الوظيفة التعريفية أولاً ، ثم يتم تنفيذ رمز JS بالترتيب.
3.
في الواقع ، تنقسم عملية تحليل JS إلى مرحلتين: فترة premompilation (المعالجة المسبقة) وفترة التنفيذ.
خلال فترة التحميل المسبق ، ستقوم JS بمعالجة جميع المتغيرات والوظائف المعلنة في كتلة الكود هذه (على غرار تجميع C) ، ولكن تجدر الإشارة إلى أنه في هذا الوقت ، فإن الشيء الوحيد الذي يتعامل مع الوظائف هو التصريح ، والمتغيرات هي أعلن فقط.
نسخة الكود كما يلي:
<script type = "text/javaScript">
FN () ؛
دالة fn () {// الدالة 1
تنبيه ("تم تنفيذ الوظيفة 1") ؛
}
دالة fn () {// الدالة 2
تنبيه ("تم تنفيذ الوظيفة 2") ؛
}
</script>
<script type = "text/javaScript">
FN () ؛
وظيفة fn () {// وظيفة الإعلان
تنبيه ("وظيفة معلنة المنفذ") ؛
}
var fn = function () {// issignment function
تنبيه ("تنفيذ وظيفة المهمة") ؛
}
</script>
// الكود كتلة واحد
<script type = "text/javaScript">
تنبيه (str) ؛ // خطأ المتصفح المبلغ عنه ، لكن نافذة المعلومات لم تظهر
</script>
// الكود كتلة اثنين
<script type = "text/javaScript">
تنبيه (STR) ؛
var str = "aaa" ؛
</script>
// يعلن JS أن المتغير أثناء فترة المعالجة المسبقة ، ولكنه لا يهيئة وتعيين القيم ، وبالتالي فإن المتغير في كتلة الكود 2 غير مقلوب ، في حين أن المتغير في الكود واحد غير موجود على الإطلاق ، وبالتالي فإن المتصفح يبلغ خطأ.
بعد فهم المصطلحات المذكورة أعلاه ، أعتقد أن لديك انطباعًا تقريبيًا عن آلية الجري لـ JS.
نسخة الكود كما يلي:
<script type = "text/javaScript">
خطأ فني () ؛
</script>
<script type = "text/javaScript">
دالة fn () {// الدالة 1
تنبيه ("تم تنفيذ الوظيفة 1") ؛
}
</script>
لماذا الإبلاغ عن المستعرض عن خطأ عند تشغيل الرمز أعلاه؟ أليس وظيفة الإعلان تتم معالجتها خلال فترة المعالجة المسبقة؟ في الواقع ، هذه نقطة سوء فهم. الكود.
الآن ، دعونا نلخص وننظم:
نسخة الكود كما يلي:
الخطوة 1. اقرأ كتلة الكود الأول.
الخطوة 2. هل تحليل بناء الجملة.
الخطوة 3. قم بـ "معالجة premompilation" لمتغيرات VAR وتعريفات الوظائف (لن يتم الإبلاغ عن الأخطاء أبدًا لأن الإعلان الصحيح يتم تحليله فقط).
الخطوة 4. قم بتنفيذ قطاع التعليمات البرمجية ، وإذا كان هناك أي خطأ ، فسيتم الإبلاغ عن خطأ (مثل المتغير غير محدد).
الخطوة 5. إذا كان هناك قطاع رمز آخر ، فاقرأ قطاع الرمز التالي وكرر Step2.
step6.
وفقًا لترتيب تنفيذ تدفقات مستندات HTML ، يجب وضع رمز JS الذي يجب تنفيذه قبل تقديم عناصر الصفحة في كتلة الكود <script> قبل <body> ، ويجب وضع JS بعد تحميل عناصر الصفحة في </body> بعد العنصر ، يتم تنفيذ حدث Onload لعلامة الجسم في النهاية.
نسخة الكود كما يلي:
<script type = "text/javaScript">
تنبيه ("الأول") ؛
وظيفة fn () {
تنبيه ("ثالث") ؛
}
</script>
<body onload = "fn ()">
</body>
<script type = "text/javaScript">
تنبيه ("الثاني") ؛
</script>