تنفيذ الوحدات
الدرس 29 من 38 · التنفيذ · 4 دقيقة و50 ثانية
الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.
الموارد
التفريغ النصي
[00:02] دعونا نتحدث عن كيف يمكننا تنفيذ وحدات مختلفة من التطبيق في codebase. للتذكير، الوحدات هي نوع من اللبنات الأساسية للتطبيق الخاص بك. هذه هي تلك التي حددناها في القسم السابق عندما قمنا بصياغة وثيقة التصميم الخاصة بنا وحددنا أن لدينا وحدة منزلية، وحدة تسجيل الدخول، وحدة التسليم وما إلى ذلك. الآن الكثير من هذه الخريطة 1 إلى 1 مع المسارات الرئيسية لنظامنا.
[00:31] لذلك فمن الشائع جدا أن نرى عندما نقوم بتنفيذ شيفرةباس لنوع من مزيج هذين المفهومين معا، والمسارات والوحدات. على سبيل المثال، في حالة تطبيق Next.JS، لدينا نظام توجيه يستند إلى الملف حيث بدلاً من مجلد التطبيق، في كل مرة نقوم فيها بإنشاء ملف page.tsx، فإننا نحدد نوعًا ما مثل نقطة دخول رئيسية لمسارك. ثم في كل مرة نقوم بإنشاء مجلد، مع page.tsx نحن تحديد اسم المسار الجديد. بعد المجلد، أليس كذلك؟ هناك الكثير من الاتفاقيات التي يمكننا اتباعها هنا لتحديد المسارات التي تحتوي على معلمات فيها وما إلى ذلك.
[01:08] الآن، لماذا لا نضع محتويات وحدتنا هنا؟ مثل لماذا، لماذا تأتي مع جميع المكونات التي تشكل وحدة التسليم داخل مجلد مسار التسليم؟ حسناً، هناك بعض الأسباب التي تجعلني أحب إبقاء الأمور منفصلة. كما قد تلاحظ، لدي مجلد وحدات هنا الذي يحتوي على وحدات الفعلية وأنا أحب. بادئ ذي بدء، أحب أن أتمكن من رؤيتهم جميعًا في لمحة هنا، وهذا لن يكون هو الحال إذا كان لديّ في بعض الأحيان متداخلة داخل مجلد التطبيق.
[01:39] لذلك كما ذكرنا سابقًا، لا توجد دائمًا علاقة 1 إلى 1 بين الوحدات والمسارات، مما يجعلها بحيث لا يمكننا حقًا النظر إلى مجلد التطبيق ومجرد إلقاء نظرة على جميع وحداتنا في لمحة. على سبيل المثال، وحدة عربة التسوق التي حددناها سابقًا، ليس لها طريق خاص بها، لذلك علينا معرفة مكان وضعها. من المحتمل ألا يكونوا داخل مجلد التطبيق، فقد يكون خارجه أو قد نتبع إحدى الاتفاقيات الغريبة التي تمتلكها جميع أجهزة التوجيه المستندة إلى الملفات، والتي هي، في حالة إضافة Next.JS بين قوسين إلى مجلدك حتى في حالة عدم إنشاء مسار جديد لذلك.
[02:21] لا بأس بذلك. هذا متروك لك مثل أعتقد تفضيل شخصي، ولكن أحب أن تبقي الأمور متسقة بقدر ما أستطيع. وفي هذه الحالة، أود أن أكون قادرًا على عدم متابعة أي اتفاقيات لأنه هنا بالنسبة لي، الوحدة هي مجرد مجلد داخل الوحدات داخل دليل الوحدة الرئيسية.
[02:41] الآن هناك أيضا إمكانية أن الوحدات الخاصة بك قد تكون متداخلة ضمن وحدات أخرى في حالة وحدة عنصر القائمة، بل هو وحدة المستوى الأعلى على نفس المستوى من الأهمية مثل كل من بلدي وحدات أخرى. ولكن من حيث التوجيه، ليس لديها مسار المستوى الأعلى الخاص بها. إنه مسار فرعي لوحدة المطعم. لذا فإن وجود الأشياء المتداخلة بهذه المسارة قد يجعل من الصعب العثور على الأشياء عندما نريد أن نرى أين يتم تنفيذ شيء ما.
[03:11] واحدة من مزايا تحديد وحدات نظامنا هو أنه يجعل الأمور أسهل للتنقل. على سبيل المثال، إذا كنت أرغب في إصلاح شيء ما في وحدة عنصر القائمة، فأنا أعلم أنه يمكنني الانتقال إلى وحدة عنصر القائمة. إذا كان أحد مكوناته ومن المحتمل أن يكون موجودًا هناك. ولكن إذا كان لدي متداخلة داخل مسار المطعم ويجب أن أتبع كل هذه الاتفاقيات، فقد لا أعرف أين أجد الأشياء. لذلك أحب أن أبقي الأمور منفصلة قدر الإمكان.
[03:41] وأخيرًا، السبب الأخير هو أن هذا يجعل من الأسهل تطبيق بعض القيود والدرابزينات التي سنتحدث عنها في الفيديو الأخير للدورة. الآن، مع هذا الهيكل، لا تزال الأمور سهلة التنقل لأننا ببساطة نستخدم مجلد التطبيق كموجه. إذا لم يكن الأمر متعلقًا بالتوجيه أو، كما تعلمون، كيف نحدد عناوين URL أو الاتفاقيات في Next.JS حول الكتابة، فلن يكون ذلك على مجلد التطبيق ثم كل شيء آخر سيكون داخل وحدة.
[04:12] لذلك مجلد التطبيق لدينا، إنه ببساطة جهاز التوجيه الخاص بنا. لدينا هنا هذه في حالة طريق التسليم هذا، نقوم باستيراد هذا المكون من وحدة التسليم ثم نقوم فقط بتقديمه. قد نقوم ببعض جلب البيانات وقد نفعل أشياء أخرى أيضًا. ولكن يجب أن تكون غالبية المنطق ضمن الوحدات.
[04:34] الآن إذا قمت بفتح وحدة التسليم، سترى أن لدينا بعض الاتفاقيات، لديك بعض الميزات، وضمن تلك الميزات قد يكون لدينا مكونات وهلم جرا. وهذا جزء من التسلسل الهرمي الذي نحدده لكيفية تنظيم الوحدات. سنتحدث عن ذلك في الفيديو التالي.