مرحبا بكم متابعي موقع أكوا ويب في هذا المقال حيث سوف نستكمل معكم طرق كتابة الكود البرمجي للجافاسكريبت بأحدث و أفضل الطرق وذلك بالإعتماد على ES6. لمن لم يتابع المقال الأول يمكنك الإطلاع عليه من الرابط :
أنهينا الموضوع السابق بأننا سوف نشرح بعض التقنيات المتقدمة في هذا الدرس مثل للتعامل مع الكائنات وتقسيم الكود الخاص بك لأجزاء تقوم بإستدعائها عند الضرورة بإستخدام Import و Export، و لن نخيب ظنكم في هذا الأمر، إذ سنقوم في هذا المقال الذي يتضمن الجزء الثاني من سلسلة مقالات كتابة كود جافاسكربت متقدم بالتعامل المتقدم مع الكود البرمجي في هذه اللغة.
قبل ان نلج مباشرة في الشرح، إليك ما ستستفيده بنهاية قرائتك لهذا المقال، أشرنا في الجزء الأول إلى طريقة كتابة المتغيرات و الدوال، في هذا المقال سنتعامل بشكل أكبر مع الـ Arrays و الكائنات في الجافاسكربت بتقنية الـ ES6، التعامل كذلك مع كل من الـ Import و الـ Export في الجافاسكربت ES6، و سنكتشف معا الوعود (Promises) كذلك، و سنلج قليلا في الـ OOP لننشئ أول كلاس في الجافاسكربت.
- الـ Array and object destructing في الجافاسكربت :
تساعدنا هذه العملية في تعيين قيمة المتغير إنطلاقا من object او array بشكل سهل، إذ سابقا كان من المتعب قليلا تعيين قيمة لمتغير محدد إنطلاقا من Array او Object، و ستصير الطريقة أسهل الآن في الـ ES6، لنوفر لك شرحا أسهل، سنراجع الطريقة السابقة أولا، ثم الطريقة الجديدة و نقارن بينهما ..
الطريقة التقليدية :
يمكنك ان تلاحظ انه في الطريقة أعلاه و بإستخدام الـ ES5 يجب تعيين لكل متغير قيمته بشكل مترتب، إذ يجب تعيين المتغير أولا، ثم إسناد قيمته إنطلاقا من الـ Key الذي يحمل القيمة في الكائن (Object)، دعونا نطلع على الطريقة الجديدة بإستخدام الـ ES6 :
باستخدام ES5، يجب علينا تعيين كل قيمة لكل متغير، عكس الـ ES6 ، نضع قيمنا داخل الأقواس للحصول على أي خاصية للكائن، إذ كل خاصية تحمل إسماً و يتعين عليك تعيين نفس الإسم الى المتغير، بذلك و تلقائيا ستستطيع إسناد قيمة الخاصية في الكائن إلى المتغير بشكل تلقائي.
ملاحظة: إذا قمت بتعيين متغير غير مطابق لاسم الخاصية ، فسوف يقوم بإرجاع undefined، على سبيل المثال ، إذا كان اسم الخاصية هو name، وقمنا بتعيينه إلى متغير username، فسوف يقوم بإرجاع undefined.
يجب علينا دائمًا تسمية المتغير بنفس اسم الخاصية، ولكن في حال أردنا إعادة تسمية المتغير، يمكننا استخدام النقطتين :username كما في المثال التالي :
بالنسبة إلى المصفوفة، نستخدم نفس بنية الكائن. لدينا فقط لاستبدال الأقواس المعقوفة ( { } ) مع أقواس مربعة ( [] ).
- الـ Import and export في الجافاسكربت ES6 :
إن استخدام import و export في برمجية مبنية على الجافا سكريبت يجعله أكثر قوة، بحيث أنها تسمح لك بإنشاء مكونات منفصلة وقابلة لإعادة الاستخدام حسب المطلوب، إن كنت معتادًا على أي إطار عمل JavaScript MVC ، فستلاحظ أنها تستخدم الـ import والـ export للتعامل مع المكونات في معظم الأوقات. فكيف يتم ذلك؟
بسيطة ! نستخدم الـ export لتصدير وحدة نمطية ليتم استخدامها في مكون JavaScript آخر، وبعد ذلك نستخدم import لاستيراد تلك الوحدة لاستخدامها في المكون الخاص بنا.
على سبيل المثال ، لدينا ملفين، يدعى الأول detailComponent.js والثاني يدعى homeComponent.js، في detailComponent.js سنقوم بتصدير دالة detail بالشكل التالي :
يمكنك ان تلاحظ اننا إستخدمنا هنا المتغيرات و إظهارها من درسنا السابق، لأننا الآن سنبدأ بإستخدام الـ ES6 في كتابة الكود الخاص بنا، عودة بنا للمفهوم الحالي، إذا أردنا استخدام هذه الدالة في homeComponent.js، فسوف نستخدم الاستيراد فقط بالشكل التالي :
إذا أردنا استيراد أزيد من وحدة، فإننا نضعها داخل أقواس معقوفة ( { } ).
رائع أليس كذلك ؟ إذا كان لديك أي تسائل لا تتردد في تركه بالتعليقات حول الـ Import و الـ Export او الدرس عامة و سنحاول توفير الإجابة الشافية من أجلك.
- الـ Promises في الجافاسكربت ES6 :
الوعود هي ميزة جديدة من ES6، وهي من أكثر الميزات التي احببتها في ES6 شخصيا،إذ هي طريقة لكتابة التعليمات البرمجية الغير المتزامنة، يمكن استخدامه على سبيل المثال لجلب البيانات من واجهة برمجية API، أو عندما يكون أمامنا وظيفة تستغرق وقتًا لتنفيذها، تجعل الوعود (Promises) من السهل حل هذه المشاكل و توفير طريقة أيسر في التعامل معها، لذا دعنا نعد أول Promise خاص بنا، تابع المثال التالي :
إذا قمت بتسجيل log على console، فسوف تقوم بإرجاع Promise. لذا، إذا أردنا تنفيذ وظيفة بعد جلب البيانات ، فسوف نستخدم Promise. يأخذ Promise متغيرين: resolve لحل الوعد و reject للتعامل مع الخطأ.
ملاحظة: تقوم وظيفة fetch بارجاع وعد بنفسها! (fetch دالة للإتصال وعمل تعليمات ajax بالإعتماد على ES6 و بدون إستخدام مكتبات خارجية)
الـ Rest parameter and Spread operator :
يتم استخدام المعلمات المتبقية للحصول بيانات مصفوفة و تخزينها في مصفوفة جديدة.
يمتلك spread operator نفس البنية مثل rest parameter ، لكن spread operator يأخذ المصفوفة وليس فقط args. يمكننا استخدام معلمة Spread للحصول على قيم Array ، بدلاً من استخدام حلقة for أو أية طريقة أخرى.
الـ Classes في الجافاسكربت Es6 :
الـ classes هي جوهر البرمجة كائنية التوجه (OOP) إذ تعتبر ركيزة البرمجة بشكل عام، فهي تجعل شفرتك البرمجية أكثر أمانًا و أكثر تنظيما و ملائمة للمشروع البرمجي الخاص بك، استخدام الـ classes يعطي الكود الخاص بك بنية أكثر منطقية و يبقي كل المعلومات مجتمعة و مهيكلة، من أجل بناء كلاس في الجافاسكربت، نستخدم الكود التالي :
لإنشاء classe، استخدم الكلمة الأساسية classe متبوعة باسم للكلاس مع معقوفتين ( {} )، يمكنك ان تلاحظ انه في الكود أعلاه أضفنا أيضا Default Constructor من أجل توفير إمكانية صناعة كائن إنطلاقا من الكلاس، يمكنك العودة الى مقالنا حول الـ Constructors من أجل فهم الأمر أكثر .
الآن يمكننا الوصول إلى methods وproperties في الكلاس باستخدام الكلمة الأساسية new، إذ تقوم بإنشاء كائن جديد من الكلاس و أخذ كل خواصه، و يمكنك بعدها التعامل بالـOOP بإستخدام الجافاسكربت ES6 بكل سهولة .
من الخواص التي تجعل لغة برمجة لغة كائنية التوجه OOP، هو الوراثة او الـ Inheritance، إذ تمكننا هذه الأخيرة من إستقبال كل مكنونات الكلاس الأولى في مكنونات الكلاس الثانية و يمكن التعديل عليها او إضافة خواص أخرى عليها، مفيدة جدا في البرمجة كائنية التوجه خصوصا من أجل هيكلة المشاريع الكبرى بتفاني، في الكود التالي، نستعرض عليك طريقة الوراثة من الكلاس الاب الى الكلاس الإبن :
كما يمكنك التعرف على أحدث مميزات ES6 المتجدد بإستمرار من هنا : الرابط
آمل أن تكونوا قد وجدتم هذه المقالة مفيدة، وآمل أن يكون هذا المقال قد قام بتعريفكم ببعض ميزات ES6 و قدراتها، لا تنى ان تقوم بالاشتراك معنا في صفحاتنا على الفيسبوك ولا تتردد بترك تعليق على المقال ومشاركته مع أصدقائك.