5 ميزات JavaScript يجب أن تعرفها لتطويرها في Gutenberg

في عام 2016 أخبرنا مات مولينويج:

سأقدم لك بعض الواجبات المنزلية: تعلم JavaScript بعمق (...) لأنها مستقبل الويب.

مات مولينويج (على موقع يوتيوب)

لا أعرف ما إذا كنت قد اتبعت نصيحته قبل ثلاث سنوات ، ولكن إذا لم تفعل ذلك ، فلا يمكنك تأجيلها بعد الآن. أجبر الإصدار الرسمي لمحرر الكتلة العديد من المطورين على التعجيل باستخدام JavaScript. أصبحت اللغة أكثر أهمية داخل WordPress ، وإذا كنا لا نريد البقاء في الخلف ، فيجب علينا تحسين مهاراتنا بها.

في الماضي ، كتبت منشورًا حول ما يمكنك تحقيقه باستخدام Vanilla JavaScript ، بدون مكتبات مثل jQuery. اليوم أريد أن أخطو خطوة إلى الأمام وأشرح بعض المستجدات الموجودة في الإصدارات الجديدة من JavaScript والتي صدمت في المرة الأولى التي تراها فيها. أعتقد أنه من المهم أن تعرفهم ، لأنهم موجودون في جميع مشاريع JavaScript الجديدة (بما في ذلك Gutenberg بالطبع).

دعنا نتعلم JavaScript مع Gutenberg!

# 1 - تدمير الكائنات والمصفوفات

لنفترض أننا نريد أن نرى كيف تعمل واجهة تحرير فقرة في Gutenberg. إذا كنت قد قرأت منشوراتنا السابقة على Gutenberg ، فأنت تعلم أنه يتعين علينا النظر في مكون edit للكتلة ذات الصلة. في حالتنا ، هذا المكون هو ParagraphBlock وأول شيء سنجده في طريقة العرض ، السطر 127 ، هو هذا:

ما كل هذا؟ حسنًا ، لنبدأ بشيء أسهل. تخيل أن لديك شيئًا مثل ما يلي:

يتيح إتلاف العناصر والمصفوفات إمكانية فك حزم القيم من المصفوفات ، أو الخصائص من الكائنات ، إلى متغيرات مميزة:

ببيان واحد ، تمكنا من استعادة id post title content وهذا بالضبط ما كان يفعله جوتنبرج في مقتطفنا الأول: لقد سحبنا كائن attributes ، ووظيفة setAttributes ، isRTL ، وما إلى ذلك من this.props .

الأمر الأكثر إرباكًا ، ولكنه مثير للاهتمام أيضًا ، هو إمكانية استخراج السمات من الكائنات المتداخلة. أي البدء من كائن مثل:

يمكننا استرداد القيم في post وكذلك القيم في كائن متداخل ، مثل id أو name في author :

انتبه الآن: في كل مرة ندمر فيها كائنًا ، فإن المتغيرات التي نقوم بإنشائها لها نفس أسماء السمات التي نسحبها. هذا يطرح السؤال التالي: ماذا سيحدث إذا أردنا استعادة سمات id متعددة من كائنات متداخلة مختلفة؟ على سبيل المثال ، في حالتنا ، يكون لكل من post author الكائن المتداخل معرّف ، لذلك ...

هل يمكننا سحب هاتين القيمتين؟ الحل يكمن في الأسماء المستعارة:

أي أنه يمكننا تحديد السمة التي نريد سحبها (على سبيل المثال ، author.id ) واسم المتغير الذي سيحتفظ بقيمته ( authorId ) دفعة واحدة.

أخيرًا ، دعني أخبرك أن التدمير يعمل أيضًا مع المصفوفات:

وكذلك معلمات الوظيفة. بمعنى ، إذا كانت إحدى المعلمات في وظيفتنا هي كائن ، فيمكننا تدميرها في تعريف الوظيفة نفسه:

مفيد جدا ، أليس كذلك؟

# 2 - وظائف السهم

مثال آخر شائع إلى حد ما. إذا ألقيت نظرة على التسميات التوضيحية لمجموعات صور Gutenberg ، فسترى ما يلي في السطر 693:

ما هي value بين قوسين؟ لماذا يوجد سهم؟ ما هو ذلك عن setAttributes مع الأقواس المتعرجة بالداخل؟ أرغ !!

حسنًا ، لنفك تشفير هذه الخطوة بخطوة. عندما ترى سهمًا مثل => ، فقد قابلت للتو وظيفة السهم. يمكن أن تكون وظيفة السهم مشابهة إلى حد بعيد للوظائف التقليدية ، لكنها تستخدم صيغة مختلفة قليلاً:

الميزة الرئيسية لوظائف الأسهم هي أنه يمكن تبسيطها بشكل أكبر ، مما يجعل الكود أكثر إحكاما. على سبيل المثال ، إذا كانت وظيفتك تحتوي على تعليمة واحدة ، فيمكنك حفظ الأقواس المتعرجة والكلمة الأساسية return ، حيث ستعيد الوظيفة تلقائيًا نتيجة تقييم بيانها الوحيد:

التبسيط الآخر الذي يمكننا إجراؤه هو الأقواس الموجودة في قائمة الوسائط. إذا كنا نكتب دالة تحتوي على معلمة واحدة ، فإن الأقواس تصبح اختيارية:

# 3 - عوامل الانتشار والراحة

بالعودة إلى مقطع الفقرة ، ألق نظرة على السطر 64:

ي للرعونة؟

حسنًا ، اسمحوا لي أن أقدم لكم عامل الانتشار: ...

يسمح بناء جملة الانتشار بتوسيع قابل للتكرار مثل تعبير مصفوفة أو سلسلة في الأماكن التي يُتوقع فيها صفر أو أكثر من الوسيطات (لاستدعاءات الوظائف) أو العناصر (للمصفوفات الحرفية) ، أو يمكن توسيع تعبير كائن في الأماكن التي يكون فيها صفر أو أكثر من المتوقع أن تكون أزواج المفاتيح والقيمة (للكائنات الحرفية).

لنبدأ بأبسط مثال. لنفترض أن لدينا مصفوفة تحتوي على عدد معين من العناصر ونريد وضعها داخل مصفوفة أخرى. يمكننا تحقيق ذلك من خلال:

بواسطته ، نقوم "بتوسيع" (ومن هنا اسم المشغل) عناصر إحدى المصفوفات ( list ) ضمن الأخرى ( result ).

يعمل هذا أيضًا مع الكائنات:

انظر الآن إلى المثال التالي (وهو نسخة من مثال Gutenberg الذي فتحنا به هذا القسم):

إذا قمت بتوسيع كائنين لهما خصائص مشتركة ، فإن الكائن الناتج سيحتوي على اتحاد خصائص كلا الكائنين ، ولكل خاصية "مكررة" ، سيحتوي على قيمة الكائن على اليمين. وهكذا ، على سبيل المثال ، تحتوي سمة title التي تتكرر في كلا الكائنين على قيمة سمات الكائن newAttributes ، بينما تظهر السمات الأخرى ( author من جهة words من جهة أخرى) في النتيجة مع القيم الوحيدة التي يمكن أن تحتوي عليها .

# 4 - قوالب Literals

تستخدم القوالب الحرفية على نطاق واسع في جوتنبرج. يمكنك رؤية مثال في index.js التالي ، السطر 133:

أو حتى أكثر تعقيدًا ، مضمنة 136:

القوالب الحرفية هي سلسلة حرفية تسمح بالتعبيرات المضمنة. يمكنك استخدام السلاسل متعددة الأسطر وميزات الاستيفاء بالسلسلة معهم. كانت تسمى "سلاسل القوالب" في الإصدارات السابقة من مواصفات ES2015. هنا لديك مثال آخر مشابه للمثال الأول الذي رأيناه للتو:

الآن ، ما الذي كان يحدث في المثال الثاني؟ في الأساس ، نقوم بإنشاء كائن بخصائص تكون "أسماؤها" ديناميكية (يستخدم البعض متغيرًا ، بينما يستخدم البعض الآخر القيم الحرفية للقالب). دعنا نرى هذا بمثال أقصر:

أسهل مما كنت تتوقع ، أليس كذلك؟

# 5 - وداعا وداعا لحين

أخيرًا ، أود إنهاء هذا المنشور ببعض الوظائف المفيدة جدًا للعمل مع المصفوفات والتي يجب أن تكون على دراية بها بالفعل. يمكن العثور على كليهما ، على سبيل المثال ، في كتلة أعمدة جوتنبرج. في الواقع ، أنا أتحدث عن map (خط 136) reduce (خط 119). دعونا نرى ما الغرض من كل منهم وكيف يمكنك استخدامها.

ينشئ التابع map مصفوفة جديدة بنتائج استدعاء دالة متوفرة على كل عنصر في المصفوفة المستدعاة:

في الأساس ، إنها طريقة تعمل من خلال جميع عناصر المصفوفة (هذه هي تعليمة for ) وتطبق وظيفة في كل عنصر ("جسم" الكلاسيكي for ).

تتشابه طريقة reduce مع map ، ولكن بدلاً من إرجاع مصفوفة تكون عناصرها نتيجة لتطبيق دالة على العناصر الأصلية ، فإنها تُرجع قيمة واحدة. أي ، طريقة تسمح لك بتطبيق دالة على تراكم وعلى كل قيمة مصفوفة (من اليسار إلى اليمين) لتقليلها إلى قيمة واحدة. علي سبيل المثال:

تغليف

كما ترى ، تضيف الإصدارات الجديدة من JavaScript إنشاءات تسمح لكتابة التعليمات البرمجية بشكل أكثر كفاءة وراحة ، ولكن قد يكون تركيبها محيرًا في البداية. آمل أن يكون منشور اليوم قد ساعدك في فهم الجديد في JavaScript وكيفية استخدام هياكلها ووظائفها الجديدة.

تعجبني حقًا الطريقة التي تتطور بها JavaScript ، حيث أعتقد أنها تتيح لك كتابة تعليمات برمجية أفضل وأكثر قابلية للقراءة (بمجرد أن تعرف كيفية قراءتها ، بالطبع). ما رأيك؟ بعد قراءة هذا المنشور ، هل أنت حريص بالفعل على "تعلم JavaScript بعمق" مرة واحدة وإلى الأبد؟

صورة مميزة بواسطة Ross Findon على Unsplash .