بناء سلوكيات قابلة لإعادة الاستخدام
غلّف السلوك في توجيهات قابلة للتركيب
بناء سلوكيات قابلة لإعادة الاستخدام درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
السلوكيات كلبنات بناء
تتألق واجهة برمجة التركيب عندما تصممون توجيهات صغيرة ومركزة، يغلّف كل منها سلوكًا واحدًا، ثم تركّبونها على المكونات حسب الحاجة.
توجيه لغرض واحد
حافظوا على صغر كل سلوك واستقلاله.
@Directive({
selector: '[appElevate]'
})
export class ElevateDirective {
@HostBinding('style.boxShadow')
shadow = '0 2px 8px rgba(0,0,0,.15)';
}سلوك التحويم
يستمع سلوك آخر إلى التحويم ويبدّل فئة.
@Directive({ selector: '[appHoverClass]' })
export class HoverClassDirective {
@HostBinding('class.is-hover') hovering = false;
@HostListener('mouseenter') on() { this.hovering = true; }
@HostListener('mouseleave') off() { this.hovering = false; }
}تركيب السلوكيات
يركّب مكون البطاقة كلا السلوكين من دون توصيلات في القالب.
@Component({
selector: 'app-card',
hostDirectives: [ElevateDirective, HoverClassDirective],
template: '<ng-content></ng-content>'
})
export class CardComponent {}إعادة الاستخدام عبر المكونات
يمكن تركيب السلوكيات نفسها على الأزرار أو البلاطات أو اللوحات. عرّفوها مرة واحدة وأعيدوا استخدامها في كل مكان، من دون تكرار.
سلوكيات قابلة للتهيئة
أضيفوا مدخلات لجعل السلوك قابلًا للضبط، ثم أتيحوا هذه المدخلات عند تركيبه.
@Directive({ selector: '[appElevate]' })
export class ElevateDirective {
level = input(1);
}إتاحة عنصر التحكم
أتيحوا الإدخال القابل للتهيئة حتى يتمكن كل مضيف من ضبطه.
hostDirectives: [{
directive: ElevateDirective,
inputs: ['level']
}]تنسيق السلوكيات
يمكن للسلوكيات حقن بعضها بعضًا عبر حاقن العنصر للتنسيق فيما بينها، مثل تفاعل تأثير التموج مع حالة الضغط.
قابلية الاختبار
يسهل اختبار السلوكيات الصغيرة وحدها، ثم الوثوق بها عند تركيبها، مما يحسن الموثوقية العامة.
اصطلاحات التسمية
سمّوا السلوكيات وفق ما تفعله (appElevate وappHoverClass وappAutofocus). تجعل الأسماء الواضحة عملية التركيب موضحة لذاتها.
مكتبة السلوكيات
مع مرور الوقت، تبنون مكتبة من السلوكيات القابلة للتركيب، يمكن لأي مكون اختيار استخدامها، مما يقلل بدرجة كبيرة من منطق المضيف المتكرر.
اختبار سريع
اختبروا فهمكم للسلوكيات القابلة لإعادة الاستخدام.
خلاصة
تعلمتم تصميم توجيهات صغيرة ومستقلة، يغلّف كل منها سلوكًا واحدًا، وتركيبها باستخدام hostDirectives، وإتاحة مدخلات قابلة للضبط، وبناء مكتبة سلوكيات قابلة لإعادة الاستخدام والاختبار.
الأسئلة الشائعة
هل درس «بناء سلوكيات قابلة لإعادة الاستخدام» مجاني؟
نعم — نص درس «بناء سلوكيات قابلة لإعادة الاستخدام» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «بناء سلوكيات قابلة لإعادة الاستخدام»؟
غلّف السلوك في توجيهات قابلة للتركيب تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «بناء سلوكيات قابلة لإعادة الاستخدام»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- خاصية hostDirectives
- إتاحة المدخلات والمخرجات
- بناء سلوكيات قابلة لإعادة الاستخدام
- التركيب أم الوراثة