التسلسل الهرمي للمكونات وتقسيمها
الدرس 30 من 38 · التنفيذ · 6 دقيقة و59 ثانية
الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.
الموارد
التسلسل الهرمي للمكونات
التفريغ النصي
[00:03] إذا كنت تستخدم إطارًا قائمًا على مكون مثل React أو View أو svelte، فمن المحتمل أنك على دراية بمفهوم تقسيم الأشياء إلى مكونات أو التفكير في المكونات. الآن، تم تعميم هذا من قبل React عندما خرج لأول مرة. كان هذا هو أول مكون شعبي وإطار قائم على المكونات وأحد المقالات الكلاسيكية في وثائقهم، والتي احتفظوا بها هناك. هناك، فإن الثناء الجديد الذي أصدروه مؤخرًا هو هذا عن التفكير في React ويقترحون شيئًا نحب جميعًا أن نعتاد على القيام به عندما ننفذ شاشة جديدة أو شاشة جديدة أو تطبيقًا جديدًا يكسر هذه، واجهة المستخدم لتطبيقنا إلى مكونات مثل مربعات الرسم المرئي حول الأجزاء المختلفة من واجهة المستخدم وإعطاء كل مكون اسمًا.
[00:54] الآن هذا شيء أقوم به طوال الوقت. أعتقد أن هذا نهج رائع للحصول على الوضوح وتصميم الطريقة التي ستقوم بها بتقسيم وحدات النظام إلى مكونات. ولكن أود أن أذهب خطوة أخرى إلى الأمام وأيضا تنظيم هذه باستخدام التسلسل الهرمي المكون. الآن سوف نشارك اثنين من التسلسلات الهرمية المختلفة التي يمكنك استخدامها. الأول هو الذي أحب أن أستخدمه أكثر، وهو تسلسل هرمي بسيط للغاية. أستخدم هذا للعمل. أستخدم هذه لمشاريعي الشخصية أيضًا، وهي تتضمن بشكل أساسي، وأنت تمر بعملية تقسيم المكون أو واجهة المستخدم إلى مكونات. وهو ينطوي على وضع كل واحد من هذه المكونات في واحدة من هذه الدلاء الأربعة المختلفة.
[01:40] الأول هو الشاشات. ثم لدينا ميزات ومكونات ودلو مشترك. هذا هو حقا شيء للقبض على أي شيء لا ينتمي إلى وحدة معينة. قد تشمل هذه الأشياء التي تعد جزءًا من التخطيط أو مكونًا في نظام التصميم الخاص بها أو مكونًا مشتركًا وما إلى ذلك. على سبيل المثال، إذا كنت أقوم بتقسيم هذا التطبيق هنا أو واجهة المستخدم هذه هنا لصفحة التسليم هذه، فلن أقوم بتضمين أو سأستدعي رأس التطبيق هنا كوحدة مشتركة أو كمكون مشترك لدينا لأنه لا ينتمي حقًا إلى الشاشة. انها تنتمي حقا إلى جزء من التصميم.
[02:18] الآن ماذا عن الشاشات الثلاث الأخرى والميزات والمكونات؟ الآن هذا واحد يشكل هذه التسلسل الهرمي بسيط جدا التي يمكننا أن نرى هنا. على سبيل المثال، لدي وحدات بلدي هنا في الجزء العلوي ومن ثم كل واحد من وحدات مصنوعة من يتكون من واحد أو أكثر من الشاشات. يمكن تقسيم كل واحدة من الشاشات إلى ميزة واحدة أو أكثر، ويمكن تقسيم هذه الميزات إلى مكون واحد أو أكثر أيضًا.
[02:45] الآن ما هي الشاشة، وما هي الميزة وما هو المكون الذي قد تتساءل عنه. الشاشة هي في الأساس تقريبا مثل واحدة من نقاط الدخول الرئيسية للوحدة الخاصة بك. الكثير من الشاشات لديها آسف فقط، والكثير من وحدات لديها شاشة واحدة فقط، كما هو الحال في هذه الحالة، وحدة التسليم التسليم. كما قد تتذكر، كانت هذه هي الوحدات التي حددناها سابقًا. هذا حقا بالنسبة لي لديه شاشة واحدة فقط لأن هذا هو ذلك صفحة واحدة واحدة مع مجموعة من المكونات حقا، ولكن ليس هناك حقا نوع من التنقل التي يمكن أن يحدث داخل هذه الصفحة تسليم معين.
[03:21] ولكن إذا انتقلنا إلى شاشة البحث، على سبيل المثال، دعنا نبحث عن التاكو، على سبيل المثال، هذه هي وحدة البحث الخاصة بي. وكما سترى هنا، لدينا مجموعة من علامات التبويب المختلفة ويمكننا النقر من خلال تلك علامات التبويب. وكل واحدة من تلك علامات التبويب، لديهم تخطيط مختلف تماما. في هذه الحالة، سأطلق على كل علامة من علامات التبويب هذه داخل وحدة البحث الخاصة بي شاشة مختلفة. كل هذه تنتمي إلى وحدة البحث، ولكن بالنسبة لي هذه مختلفة بما فيه الكفاية أنني سوف نسميها أنواع مختلفة من الشاشات. الآن نقطة الدخول الرئيسية قد تكون هذه الشاشة كلها، ولكن قد يكون لدي العديد منها هنا أيضا.
[04:00] الآن، الميزتان والمكونان الآخران، هما في الحقيقة الفرق الوحيد الوحيد في الحجم المكون هو شيء ما هو زر أو إدخال أو إسقاط عنصر شكل أو شيء من هذا القبيل، شيء صغير وبسيط. ومن ثم ميزة هو شيء أن كبيرة عادة ما تكون مصنوعة من مكونات متعددة. الآن هذا لا يعني أن المكونات لا يمكن أن يكون لها مكونات فرعية عادة ما تكون الحالة التي، على سبيل المثال، سيكون للمكون المنسدل عادةً قطع متعددة فيه أو قد يتم تقسيم مكون مشروط إلى تذييل نموذج رأس النموذج وما إلى ذلك. سأظل أفكر في هذه المكونات حتى لو كانت مصنوعة من مكونات متعددة.
[04:40] ولكن الميزات بالنسبة لي، فإن القاعدة الأساسية التي تحب استخدامها هي أنه إذا كان للمكون العديد من الميزات داخله، فإنه يحتاج إلى هيكل داخلي خاص به، مثل مجموعة المجلدات الخاصة به، مثل مجلدات المكونات وما إلى ذلك للحفاظ على تنظيمها. ثم يجب أن يكون هذا المكون ميزة. على سبيل المثال، إذا عدنا إلى الصفحة الرئيسية أو إلى صفحة المكتبة، هذه الأقسام بأكملها هنا، فسنستدعي هذا القسم بالكامل هنا مع جميع الفلاتر، أو شيء مثل فلاتر المطاعم أو شيء من هذا القبيل. ولكن هذا سوف يطلق عليه ميزة لأنه يحتوي على طن من الأشياء الجارية. لديها الكثير من الفلاتر هنا لنوع الطعام. لديها الكثير من هذه الانخفاضات. كل واحد من هذه القائمة المنسدلة لديه مثل نموذج هنا حيث يمكننا اختيار بعض الفلاتر التي نريد تطبيقها وهلم جرا. لذا فإن هذا القسم بأكمله هنا بالنسبة لي سيكون ميزة وربما بعد ذلك كل واحد من هذه المرشحات هنا سيكون مكونه الخاص.
[05:37] الآن، كما ذكرت سابقا، هذا التسلسل الهرمي البسيط يعمل بشكل جيد بالنسبة لي. لا أحتاج حقًا إلى إضافة المزيد من الطبقات بسبب التسلسل الهرمي، ولكن إذا كنت بحاجة إلى شيء أكبر أو شيء ينطوي على المزيد والمزيد من الأشخاص في الفريق، فقد تحتاج إلى شيء أكثر تنظيمًا. ولهذا يمكنني مشاركة هذه التسلسل الهرمي الآخر الذي يطلق عليه تصميم شرائح الميزات. هذه، كما تقول، هنا، هي منهجية معمارية لمشاريع الواجهة الأمامية. إنها في الأساس تسلسل هرمي مكون يمكنك اتباعه أيضًا للحفاظ على مكوناتك منظمة.
[06:16] كما ترون هنا، هذه هي أكثر انخراطا بكثير، لديها مفاهيم مختلفة مثل طبقات وشرائح، شرائح، وداخل تلك التي لديك صفحات، الحاجيات، والميزات وهلم جرا. لذلك هذا هو أكثر من ذلك بكثير الحبيبية بطريقة أي من مشروعك لديه حاجة لشيء من هذا القبيل. ثم قد ترغب في النظر في ذلك ل FullSnack. على وجه الخصوص، سنلتزم بهذا التسلسل الهرمي وسترى أن هذه المقاييس جيدة حقًا.
[06:43] الآن، إذا كنت تتساءل كيف يبدو هذا في الواقع؟ كيف يمكنني تطبيق هذا التسلسل الهرمي بينما أقوم بتقسيم مكوني أو وحدتي إلى مكونات مختلفة؟ ثم أنا سعيد لأنك سألت، لأن هذا هو بالضبط ما سنفعله معًا في التمرين التالي.