تتطور لغة جافا سكريبت بشكل مطرد. تظهر المقترحات الجديدة للغة بانتظام، ويتم تحليلها، وإذا اعتبرت جديرة بالاهتمام، يتم إلحاقها بالقائمة الموجودة على https://tc39.github.io/ecma262/ ثم التقدم إلى المواصفات.
لدى الفرق التي تقف وراء محركات JavaScript أفكارها الخاصة حول ما يجب تنفيذه أولاً. وقد يقررون تنفيذ المقترحات الموجودة في المسودة وتأجيل الأشياء الموجودة بالفعل في المواصفات، لأنها أقل إثارة للاهتمام أو لأنها أكثر صعوبة في التنفيذ.
لذا فمن الشائع جدًا أن يقوم المحرك بتنفيذ جزء فقط من المعيار.
هناك صفحة جيدة لمعرفة الوضع الحالي لدعم ميزات اللغة هي https://compat-table.github.io/compat-table/es6/ (إنها كبيرة، ولدينا الكثير لندرسه بعد).
كمبرمجين، نود استخدام أحدث الميزات. والمزيد من الأشياء الجيدة - كلما كان ذلك أفضل!
ومن ناحية أخرى، كيف نجعل كودنا الحديث يعمل على المحركات القديمة التي لا تفهم الميزات الحديثة بعد؟
هناك أداتان لذلك:
ناقلات.
حشوات متعددة.
هنا، في هذا الفصل، هدفنا هو الحصول على جوهر كيفية عملهم ومكانهم في تطوير الويب.
Transpiler هو برنامج خاص يقوم بترجمة كود المصدر إلى كود مصدر آخر. يمكنه تحليل ("قراءة وفهم") التعليمات البرمجية الحديثة وإعادة كتابتها باستخدام تركيبات تركيبية قديمة، بحيث تعمل أيضًا في المحركات القديمة.
على سبيل المثال، لم يكن لدى JavaScript قبل عام 2020 "مشغل الدمج الفارغ" ??
. لذا، إذا كان الزائر يستخدم متصفحًا قديمًا، فقد يفشل في فهم الكود مثل height = height ?? 100
.
سيقوم المترجم بتحليل الكود الخاص بنا وإعادة كتابة height ?? 100
إلى (height !== undefined && height !== null) ? height : 100
.
// قبل تشغيل الناقل الارتفاع = الارتفاع؟؟ 100؛ // بعد تشغيل الناقل الارتفاع = (الارتفاع !== غير محدد && الارتفاع !== فارغ)؟ الارتفاع : 100؛
الآن أصبح الكود المعاد كتابته مناسبًا لمحركات JavaScript الأقدم.
عادة، يقوم المطور بتشغيل برنامج النقل على جهاز الكمبيوتر الخاص به، ثم يقوم بنشر التعليمات البرمجية المنقولة إلى الخادم.
بالحديث عن الأسماء، بابل هي واحدة من أبرز شركات النقل الموجودة هناك.
توفر أنظمة إنشاء المشاريع الحديثة، مثل حزمة الويب، وسيلة لتشغيل أداة النقل تلقائيًا عند كل تغيير في التعليمات البرمجية، لذلك من السهل جدًا دمجها في عملية التطوير.
قد تتضمن ميزات اللغة الجديدة ليس فقط بنيات بناء الجملة وعوامل التشغيل، ولكن أيضًا الوظائف المضمنة.
على سبيل المثال، Math.trunc(n)
هي دالة تقوم "بقص" الجزء العشري من الرقم، على سبيل المثال، تقوم Math.trunc(1.23)
بإرجاع 1
.
في بعض محركات JavaScript (القديمة جدًا)، لا يوجد Math.trunc
، لذا ستفشل هذه التعليمات البرمجية.
بما أننا نتحدث عن وظائف جديدة، وليس تغييرات في بناء الجملة، فليست هناك حاجة لنقل أي شيء هنا. نحتاج فقط إلى الإعلان عن الوظيفة المفقودة.
يسمى البرنامج النصي الذي يقوم بتحديث/إضافة وظائف جديدة "polyfill". إنه "يملأ" الفجوة ويضيف التطبيقات المفقودة.
في هذه الحالة بالذات، يكون polyfill الخاص بـ Math.trunc
عبارة عن برنامج نصي ينفذه، مثل هذا:
إذا (!Math.trunc) {// إذا لم يكن هناك مثل هذه الوظيفة // تنفيذه Math.trunc = الوظيفة (الرقم) { // Math.ceil وMath.floor موجودان حتى في محركات JavaScript القديمة // سيتم تغطيتها لاحقًا في البرنامج التعليمي رقم الإرجاع <0؟ Math.ceil(number): Math.floor(number); }; }
JavaScript هي لغة ديناميكية للغاية. قد تقوم البرامج النصية بإضافة/تعديل أي وظيفة، حتى تلك المضمنة.
هناك مكتبتان مثيرتان للاهتمام من polyfill هما:
Core Js الذي يدعم الكثير، يسمح بتضمين الميزات المطلوبة فقط.
في هذا الفصل، نود أن نحفزك على دراسة ميزات اللغة الحديثة وحتى "المتطورة"، حتى لو لم تكن مدعومة بشكل جيد بواسطة محركات JavaScript.
فقط لا تنس استخدام أداة النقل (إذا كنت تستخدم تركيبًا أو عوامل تشغيل حديثة) والحشوات المتعددة (لإضافة وظائف قد تكون مفقودة). سوف يتأكدون من أن الكود يعمل.
على سبيل المثال، لاحقًا عندما تصبح معتادًا على JavaScript، يمكنك إعداد نظام إنشاء التعليمات البرمجية استنادًا إلى حزمة الويب باستخدام البرنامج الإضافي babel-loader.
موارد جيدة توضح الوضع الحالي للدعم لمختلف الميزات:
https://compat-table.github.io/compat-table/es6/ – لجافا سكريبت النقي.
https://caniuse.com/ – للوظائف المتعلقة بالمتصفح.
عادةً ما يكون PS Google Chrome هو الإصدار الأحدث من حيث ميزات اللغة، جربه إذا فشل العرض التوضيحي التعليمي. تعمل معظم العروض التوضيحية التعليمية مع أي متصفح حديث.