كل يوم ، ننشر نصيحة أو خدعة أو مجرد جزء مفيد من تجربتنا مع Angular. تم استقبال هذه الحركة بحرارة ودعمها من قبل مجتمع المطورين.
قررت كتابة مقال عن الحيل العشر الأكثر شهرة وشرح المفاهيم الموضحة فيها بمزيد من التفصيل.
لنبدأ!
ترميز الكائنات العالمية!
تتحدث التغريدة الأكثر شيوعًا عن رموز DI المميزة للأشياء العالمية.
في الواجهة الأمامية ، اعتدنا على حقيقة أن هناك العديد من الأشياء في البيئة العالمية. نحن نستخدم كائنات مثل النافذة والمستند وطريقة الجلب والموقع ولا نتوقع وجودها أبدًا.
ولكن ، على سبيل المثال ، في Angular Universal أو بيئة الاختبار في Jest ، لا يوجد متصفح ولا كائن نافذة ولا DOM. ومن خلال تمرير هذه الكيانات عبر التطبيق من خلال الرموز المميزة ، لن تواجهك مشاكل في استخدامها أو استبدالها أو اختبار الكود الخاص بك.
الميراث من الملحوظ أو الموضوع
أعرف الكثير من المطورين الذين يصنعون خدمات جيدة في تطبيقاتهم. هذه الخدمات تفعل شيئًا واحدًا جيدًا. ونظرًا لأننا نستخدم RxJS في نظام Angular البيئي ، فلا يمكن أن تحتوي هذه الخدمات إلا على حقل واحد به عنصر يمكن ملاحظته أو موضوع بداخلها لتحويل البيانات.
يمكن تبسيط مثل هذه المواقف من خلال وراثة الخدمات من الملاحظة أو الموضوع:
قيمة التحكم مثل ReplaySubject
قد تكون هناك حالات عندما يكون من الضروري الاشتراك في تغييرات القيمة للتحكم التفاعلي ، بدءًا من التدفق من قيمته الحالية. الآن ليس عليك إعادة اختراع العجلة ، ولكن ببساطة أضف هذا الغلاف لنفسك:
جعل التطبيق أفضل لشاشات عرض DPI عالية
هل تعلم أنه يمكنك بسهولة تتبع المستخدمين باستخدام شاشات High DPI؟
علاوة على ذلك ، يمكنك حتى توفير عناصر وسائط ذات دقة مناسبة لمثل هذه الشاشات باستخدام علامة الوسائط الأصلية وبدون بذل جهد إضافي:
لا تنس الأنابيب
الأنابيب هي أداة رائعة للعمل بأسلوب الإطار الزاوي. إنها تسمح لنا بالبقاء صريحين داخل قوالب المكونات الخاصة بنا. إنه لأمر محزن أن يتجنب بعض مطوري Angular إنشاء الأنابيب الخاصة بهم: يمكنك معهم تحويل البيانات بدقة في أي موقف تقريبًا.
وإليك مثال على أنبوب عالمي لتحويل البيانات:
اصنع صندوق الموز الخاص بك
هذه الميزة Angular لها العديد من الأسماء: banana-in-a-box ، أو الربط ثنائي الاتجاه ، أو مجرد الإدخال والإخراج. عادة ما يتم العثور على هذا الأسلوب في النماذج عند العمل مع [(ngModel)]. لكن هل تعرف كيفية تنفيذ هذا لمكوناتك الخاصة؟
RxJS - العالم المجهول
أحاول دائمًا التحقق من جميع المعلمات والحمل الزائد لمشغلي RxJS الذين أستخدمهم. السبب: العديد منهم لديهم خيارات مخفية ، تعلم أنه يمكنك كتابة بعض التدفقات بشكل أسرع وأسهل.
بالإضافة إلى ذلك ، هناك أيضًا مشغلين غير محبوبين. نادرًا ما تصادفهم ، لكن يمكنهم حل بعض المشكلات المحددة في سطر واحد من التعليمات البرمجية بدلاً من التدفق الضخم والصعب.
على سبيل المثال ، كان أحد هذه الاكتشافات بالنسبة لي هو وظيفة المقارنة في عامل التشغيل المميز:
وكان هناك أيضًا تغريدة مشهورة عن RxJS. حيلة صغيرة لتسهيل توسيع مكوناتك قليلاً:
أو عامل التشغيل defaultIfEmpty الذي يسمح لك بوضع منطق مفيد في الدفق داخل سطر واحد من التعليمات البرمجية:
يمكنك حتى كتابة البديل الخاص بك لـ ngFor
وشيء أخير: يحتوي Angular على صيغة خاصة لمحددات التوجيه مثل لـ ... من ... يمكنك استخدامه لإنشاء ngFor الخاص بك لأي من مهامك.
على سبيل المثال ، يمكنك إجراء ngFor سريعًا للتكرار فوق كائن الخريطة. أو بسيطة للتكرار فوق فهرس من رقم إلى آخر:
خاتمة
Angular كبير وله الكثير من الميزات. لدي عدد من الأفكار للحيل والحيل الجديدة من أفضل ممارساتنا التي أخطط لمشاركتها مع المجتمع. إذا كنت مهتمًا بتغريدات جديدة مثل هذه ، فاتبعني على Twitter . ويوم سعيد!