مكونات طريقة التنفيذ – نظرة عامة

مكونات HowTo

Ewa Gasperowicz

Rob Dodson

Surma

"الدليل التعليمي: المكوّنات" هي مجموعة من مكونات الويب التي تنفِّذ أنماط واجهة مستخدم شائعة. ويتمثل الغرض من عمليات التنفيذ هذه في أن تكون مرجعًا تعليميًا. يمكنك الاطّلاع على التنفيذ المكثّف للتعليقات على المكونات المختلفة والاستفادة من هذه التعليقات. يُرجى العِلم أنّها ليست بوضوح مكتبة لواجهة المستخدم، ويجب عدم استخدامها في مرحلة الإنتاج.

المكونات

• ‫<howto-checkbox>: يمثّل خيارًا منطقيًا في نموذج. إنّ النوع الأكثر شيوعًا من مربعات الاختيار هو النوع المزدوج الذي يسمح للمستخدم بالتبديل بين خيارَين: محدَّد وغير محدَّد.
• <howto-tabs>: تحدّ من المحتوى المرئي عن طريق تقسيمه إلى لوحات متعددة.
• <howto-tooltip>: نافذة منبثقة تعرض معلومات متعلّقة بعنصر عندما يتلقّى العنصر تركيز لوحة المفاتيح أو عندما يمرّر مؤشر الماوس فوقه.

الأهداف

هدفنا هو توضيح أفضل الممارسات لكتابة مكوّنات فعّالة ومتاحة وسهلة الاستخدام والصيانة والتعديل. يكون كل مكوّن مكتملاً تمامًا كي يتمكّن من أن يُستخدم كنموذج تنفيذ.

تسهيل الاستخدام

تتّبع المكوّنات عن كثب أفضل ممارسات مؤلفي ARIA في WAI، وهو دليل لشرح ARIA وعرضها، وهي معيار التطبيقات التفاعلية الغنية بالوسائط التي يمكن الوصول إليها. إذا لم تكن على دراية بتكنولوجيا ARIA، اطّلِع على مقدّمتنا حول WebFundamentals. يرتبط كل مكوّن بالقسم ذي الصلة من "ممارسات التأليف". على الرغم من أنّه ليس ضروريًا تمامًا، ننصحك بقراءة قسم "ممارسات المؤلفين" قبل الاطّلاع على الرمز.

الأداء

في مجال تطوير الويب، يمكن تطبيق مصطلح "الأداء" على العديد من الأمور. في سياق <howto>، يشير الأداء في الغالب إلى الرسوم المتحرّكة التي يتم عرضها باستمرار بمعدّل 60 لقطة في الثانية، حتى على الأجهزة الجوّالة.

المرونة المرئية

لا يتمّ وضع تنسيق على المكوّنات قدر الإمكان، باستثناء التنسيق الخاص بالتصميم أو للإشارة إلى حالة محدّدة أو نشطة. يهدف ذلك إلى الحفاظ على مرونة التنفيذ visually وتركيزه. من خلال عدم إضاعة الوقت في الزخرفة، نحصر الرمز البرمجي بما هو ضروري فقط لتشغيل المكوّن. إذا كان أيّ نمط مطلوبًا لكي يعمل المكوّن، سيتم وضع علامة على النمط مع تعليق يوضّح سبب ذلك.

رمز قابل للصيانة

بما أنّ HowTo: Components هو مرجع لتطبيق المكونات، قضينا وقتًا إضافيًا في كتابة رمز قابل للقراءة وسهل الفهم ومكثّف التعليقات.

غير الأهداف

أن تكون مكتبة أو إطار عمل أو مجموعة أدوات

لا يتم نشر مكوّنات <howto> على npm أو bower أو أيّ منصة أخرى لأنّها غير مخصّصة للاستخدام في مرحلة الإنتاج. للحصول على رمز برمجي موجز وسهل القراءة، نستخدم واجهات برمجة تطبيقات JavaScript حديثة ونوفّر ميزة التوافق مع المتصفّحات الحديثة التي تطبّق معايير Web Components. سيصبح بإمكانك تكييف الرمز البرمجي ليناسب احتياجاتك بعد قراءة هذه عمليات التنفيذ.

أن تكون متوافقة مع الإصدارات القديمة

يجب عدم الاعتماد على الرمز مباشرةً. قد نغيّر بشكل جذري طريقة تنفيذ أي عنصر وواجهة برمجة التطبيقات الخاصة به إذا تم اكتشاف طريقة تنفيذ أفضل. هذا المرجع متغيّر باستمرار، ويمكننا من خلاله مشاركة أفضل الممارسات المتعلّقة بإنشاء واجهات مستخدم الويب ومناقشتها واستكشافها.

أن تكون كاملة

لا نفّذ *جميع *المكوّنات التي يمكن العثور عليها في "ممارسات صياغة ARIA" من WAI (وربما لن نفّذها). ومع ذلك، من المفترض أن يؤدي إعادة استخدام المبادئ المستخدَمة في مكوّنات <howto> الأخرى إلى تمكين القرّاء من تنفيذ أي مكوّنات غير متوفّرة.