المكونات هي الكتل البرمجية الإنشائية لتطبيقات الويب الحديثة. ما أفضل الممارسات التي يجب عليك اتباعها عند بناء المكونات الخاصة بك حتى تظل لاختبار الوقت؟
المكونات هي الكتل البرمجية الإنشائية لتطبيقات الويب الحديثة. ما أفضل الممارسات التي يجب عليك اتباعها عند إنشاء المكونات الخاصة بك حتى تتمكن من الصمود لاختبار الوقت؟
العناصر المخصصة
تتيح العناصر المخصّصة للمطوّرين إمكانية توسيع نطاق HTML وإنشاء علاماتهم الخاصة. وبما أنّ العناصر المخصّصة تستند إلى معايير مستندة إلى معايير معيّنة، فإنّها تستفيد من نموذج المكوِّن المضمّن في الويب. وتكون النتيجة هي رمز برمجي نموذجي يمكن إعادة استخدامه في عدة سياقات مختلفة.
مزيد من المعلومات
Shadow DOM
Shadow DOM هو معيار على الويب يوفّر نمط المكوّنات وتغليف الترميز. وهو جزء بالغ الأهمية من قصة مكونات الويب، لأنه يضمن عمل المكوّن في أي بيئة حتى في حال تشغيل CSS أو JavaScript آخر على الصفحة.
مزيد من المعلومات
أفضل الممارسات
بما أنّ العناصر المخصّصة وshadow DOM عناصر أولية منخفضة المستوى، ليس من الواضح دائمًا أفضل طريقة لجمعهما لإنشاء مكوِّن قوي ويعمل بشكل جيد في العديد من البيئات المختلفة. يمكنك فعل أي شيء باستخدام واجهات برمجة التطبيقات هذه، ولكن إليك بعض أفضل الممارسات للمساعدة في ضمان عمل مكوناتك بشكل جيد في أي مكان.
مزيد من المعلومات
أمثلة
إن مكونات طريقة التنفيذ هي مجموعة من العناصر التي توضح أفضل الممارسات للعنصر المخصص وظل DOM. وليس الغرض من هذه العناصر
استخدامها في الإنتاج، ولكن يتم تقديمها كأدوات مساعدة للتعليم للمساعدة في ربط
اقتراحات أفضل الممارسات بعمليات التنفيذ الفعلية.
مزيد من المعلومات
تاريخ التعديل الأخير: 2017-08-14 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2017-08-14 (حسب التوقيت العالمي المتفَّق عليه)"],[],[]]