دليلك نحو كتابة شفرة برمجية بإستخدام الـ Javascript ES6 (الجزء الثاني)
أنهينا الموضوع السابق بأننا سوف نشرح بعض التقنيات المتقدمة في هذا الدرس مثل للتعامل مع الكائنات وتقسيم الكود الخاص بك لأجزاء تقوم بإستدعائها عند الضرورة بإستخدام Import و Export، و لن نخيب ظنكم في هذا الأمر، إذ سنقوم في هذا المقال الذي يتضمن الجزء الثاني من سلسلة مقالات كتابة كود جافاسكربت متقدم بالتعامل المتقدم مع الكود البرمجي في هذه اللغة.
الـ Array and object destructing في الجافاسكربت :
تساعدنا هذه العملية في تعيين قيمة المتغير إنطلاقا من object او array بشكل سهل، إذ سابقا كان من المتعب قليلا تعيين قيمة لمتغير محدد إنطلاقا من Array او Object، و ستصير الطريقة أسهل الآن في الـ ES6، لنوفر لك شرحا أسهل، سنراجع الطريقة السابقة أولا، ثم الطريقة الجديدة و نقارن بينهما ..
باستخدام ES5، يجب علينا تعيين كل قيمة لكل متغير، عكس الـ ES6 ، نضع قيمنا داخل الأقواس للحصول على أي خاصية للكائن، إذ كل خاصية تحمل إسماً و يتعين عليك تعيين نفس الإسم الى المتغير، بذلك و تلقائيا ستستطيع إسناد قيمة الخاصية في الكائن إلى المتغير بشكل تلقائي.
ملاحظة: إذا قمت بتعيين متغير غير مطابق لاسم الخاصية ، فسوف يقوم بإرجاع undefined، على سبيل المثال ، إذا كان اسم الخاصية هو name، وقمنا بتعيينه إلى متغير username، فسوف يقوم بإرجاع undefined.
- الـ Import and export في الجافاسكربت ES6 :
إن استخدام import و export في برمجية مبنية على الجافا سكريبت يجعله أكثر قوة، بحيث أنها تسمح لك بإنشاء مكونات منفصلة وقابلة لإعادة الاستخدام حسب المطلوب، إن كنت معتادًا على أي إطار عمل JavaScript MVC ، فستلاحظ أنها تستخدم الـ import والـ export للتعامل مع المكونات في معظم الأوقات. فكيف يتم ذلك؟
بسيطة ! نستخدم الـ export لتصدير وحدة نمطية ليتم استخدامها في مكون JavaScript آخر، وبعد ذلك نستخدم import لاستيراد تلك الوحدة لاستخدامها في المكون الخاص بنا.
على سبيل المثال ، لدينا ملفين، يدعى الأول detailComponent.js والثاني يدعى homeComponent.js، في detailComponent.js سنقوم بتصدير دالة detail
إذا أردنا استيراد أزيد من وحدة، فإننا نضعها داخل أقواس معقوفة ( { } ).
- الـ 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 المتجدد بإستمرار من هنا : الرابط
أنهينا الموضوع السابق بأننا سوف نشرح بعض التقنيات المتقدمة في هذا الدرس مثل للتعامل مع الكائنات وتقسيم الكود الخاص بك لأجزاء تقوم بإستدعائها عند الضرورة بإستخدام Import و Export، و لن نخيب ظنكم في هذا الأمر، إذ سنقوم في هذا المقال الذي يتضمن الجزء الثاني من سلسلة مقالات كتابة كود جافاسكربت متقدم بالتعامل المتقدم مع الكود البرمجي في هذه اللغة.
الـ Array and object destructing في الجافاسكربت :
تساعدنا هذه العملية في تعيين قيمة المتغير إنطلاقا من object او array بشكل سهل، إذ سابقا كان من المتعب قليلا تعيين قيمة لمتغير محدد إنطلاقا من Array او Object، و ستصير الطريقة أسهل الآن في الـ ES6، لنوفر لك شرحا أسهل، سنراجع الطريقة السابقة أولا، ثم الطريقة الجديدة و نقارن بينهما ..
باستخدام ES5، يجب علينا تعيين كل قيمة لكل متغير، عكس الـ ES6 ، نضع قيمنا داخل الأقواس للحصول على أي خاصية للكائن، إذ كل خاصية تحمل إسماً و يتعين عليك تعيين نفس الإسم الى المتغير، بذلك و تلقائيا ستستطيع إسناد قيمة الخاصية في الكائن إلى المتغير بشكل تلقائي.
ملاحظة: إذا قمت بتعيين متغير غير مطابق لاسم الخاصية ، فسوف يقوم بإرجاع undefined، على سبيل المثال ، إذا كان اسم الخاصية هو name، وقمنا بتعيينه إلى متغير username، فسوف يقوم بإرجاع undefined.
- الـ Import and export في الجافاسكربت ES6 :
إن استخدام import و export في برمجية مبنية على الجافا سكريبت يجعله أكثر قوة، بحيث أنها تسمح لك بإنشاء مكونات منفصلة وقابلة لإعادة الاستخدام حسب المطلوب، إن كنت معتادًا على أي إطار عمل JavaScript MVC ، فستلاحظ أنها تستخدم الـ import والـ export للتعامل مع المكونات في معظم الأوقات. فكيف يتم ذلك؟
بسيطة ! نستخدم الـ export لتصدير وحدة نمطية ليتم استخدامها في مكون JavaScript آخر، وبعد ذلك نستخدم import لاستيراد تلك الوحدة لاستخدامها في المكون الخاص بنا.
على سبيل المثال ، لدينا ملفين، يدعى الأول detailComponent.js والثاني يدعى homeComponent.js، في detailComponent.js سنقوم بتصدير دالة detail
إذا أردنا استيراد أزيد من وحدة، فإننا نضعها داخل أقواس معقوفة ( { } ).
- الـ 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 المتجدد بإستمرار من هنا : الرابط