يتحدث التعلم الزاوي عن حقن التبعية

حقن التبعية (DI) في Angular

1. نظرة عامة

حقن التبعية (DI)، والمشار إليه بـ DI ، هو设计原则في البرمجة面向对象يُستخدم لتقليل الاقتران بين الرموز. [توصية البرنامج التعليمي ذات الصلة: "البرنامج التعليمي الزاوي"]

class MailService {
  منشئ (APIKEY) {}
}

فئة البريد الإلكتروني المرسل {
  خدمة البريد: خدمة البريد
  منشئ () {
    this.mailService = new MailService("APIKEY1234567890")
  }

  إرسال بريد (بريد) {
    this.mailService.sendMail(البريد)
  }
}

const emailSender = new EmailSender()
emailSender.sendMail(mail)

تستخدم فئة EmailSender فئة MailService عند التشغيل. تعتمد فئة EmailSender على فئة MailService، وفئة MailService هي تبعية لفئة EmailSender.

درجة الاقتران لطريقة الكتابة أعلاه عالية جدًا، والكود ليس قويًا. إذا قامت فئة MailService بتغيير طريقة تمرير المعلمات، فستتغير أيضًا طريقة الكتابة في فئة EmailSender.

فئة البريد الإلكتروني المرسل {
  خدمة البريد: خدمة البريد
  منشئ (mailService: MailService) {
    this.mailService = mailService;
  }
}
const mailService = new MailService("APIKEY1234567890")
const emailSender = new EmailSender(mailService)

عند إنشاء فئة EmailSender، فإنه يُدخل تبعياتها في الفصل من خلال معلمات المُنشئ المُنشئ.

يؤدي حقن التبعية إلى تقليل الاقتران بين الأكواد وزيادة إمكانية صيانة الكود. لم تعد تغييرات التعليمات البرمجية في فئة MailService تؤثر على فئة EmailSender.

2. إطار DI

Angular له DI 框架خاص به، والذي隐藏عملية تنفيذ حقن التبعية ويحتاج المطورون فقط إلى استخدام كود بسيط جدًا لاستخدام وظائف حقن التبعية المعقدة.

هناك أربعة مفاهيم أساسية في إطار عمل DI الخاص بـ Angular:

• Dependency : كائن المثيل الذي يعتمد عليه المكون،

• Token كائن مثيل الخدمة: يحصل على هوية كائن مثيل الخدمة

• Injector : الحاقن المسؤول عن创建维护كائن مثيل الخدمة فئة注入في كائن مثيل خدمة المكون (يدير إنشاء كائنات الخدمة والحصول عليها).

• Provider : قم بتكوين كائن الحاقن، وحدد فئة الخدمة لإنشاء كائن مثيل الخدمة والحصول على معرف كائن المثيل. (المزود: الموفر)

2.1 الحاقنات

تكون الحاقنات مسؤولة عن إنشاء كائنات مثيل فئة الخدمة وحقن كائنات مثيل فئة الخدمة في المكونات المطلوبة.

• قم بإنشاء استيراد حاقن

  { ReflectiveInjector } من "@angular/core"
  // فئة الخدمة فئة MailService {}
  // أنشئ الحاقن وتمرير فئة الخدمة const injector = ReflectiveInjector.resolveAndCreate([MailService])

• احصل على كائن مثيل فئة الخدمة في الحاقن

  const mailService = injector.get(MailService)

• كائن مثيل الخدمة في الوضع المفرد، و الحاقن موجود بعد إنشاء مثيل الخدمة، سيتم تخزينه مؤقتًا

  const mailService1 = injector.get(MailService)
  const mailService2 = injector.get(MailService)
  
  console.log(mailService1 === mailService2) //

• تُرجع الحاقنات المختلفة الحقيقية كائنات مثيل خدمة مختلفة

  const injector = ReflectiveInjector.resolveAndCreate([MailService])
  const ChildInjector = injector.resolveAndCreateChild([MailService])
  
  const mailService1 = injector.get(MailService)
  const mailService2 = ChildInjector.get(MailService)
  
  

console.log(mailService1 === mailService2) //

• 作用域链

• البحث عن مثيلات الخدمة الخاطئة

سلسلة نطاق الوظيفة. إذا كان من الممكن العثور على المستوى الحالي، فاستخدم المستوى الحالي. إذا تعذر العثور على المستوى الحالي، فانتقل إلى

• الأصل الذي سيتم البحث فيه عن

  حاقن const = ReflectiveInjector.resolveAndCreate([ MailService])
  const ChildInjector = injector.resolveAndCreateChild([])
  
  const mailService1 = injector.get(MailService)
  const mailService2 = ChildInjector.get(MailService)
  
  console.log(mailService1 === mailService2) // true

2.2

• يحدد كائن حاقن تكوين الموفر فئة الخدمة لإنشاء كائن المثيل والمعرف للوصول إلى كائن مثيل الخدمة.

  حاقن ثابت = ReflectiveInjector.resolveAndCreate([
    { تقديم: MailService، UseClass: MailService }
  ])

• يمكن أيضًا أن يكون معرف الوصول إلى الكائن التابع عبارة عن نوع سلسلة

  const injector = ReflectiveInjector.resolveAndCreate([
    { تقديم: "البريد"، UseClass: MailService }
  ])
  const mailService = injector.get("mail")

• useValue

  const injector = ReflectiveInjector.resolveAndCreate([
    {
      توفير: "التكوين"،
      قيمة الاستخدام: Object.freeze({
        APIKEY: "API1234567890"،
        واجهة برمجة التطبيقات: "500-400-300"
      })
    }
  ])
  const Config = injector.get("Config")

ينشئ علاقة اقتران فضفاضة بين كائن المثيل والمرجع الخارجي. يحصل الكائن الخارجي على كائن المثيل من خلال المعرف طالما ظل المعرف دون تغيير، بغض النظر عن الكود الداخلي التغييرات، فإنه لن يؤثر على الخارج.