การเรียนรู้เชิงมุมพูดถึงการฉีดการพึ่งพา

Dependency Injection (DI) ในเชิงมุม

1 ภาพรวม

Dependency Injection (DI) เรียกว่า DI เป็น设计原则ในการเขียนโปรแกรม面向对象ที่ใช้เพื่อลด การเชื่อมต่อ ระหว่างโค้ด [คำแนะนำการกวดวิชาที่เกี่ยวข้อง: "กวดวิชาเชิงมุม"]

MailService คลาส {
  ตัวสร้าง (APIKEY) {}
-

คลาส EmailSender {
  บริการเมล: MailService
  ตัวสร้าง () {
    this.mailService = MailService ใหม่ ("APIKEY1234567890")
  -

  sendMail (เมล) {
    this.mailService.sendMail (เมล)
  -
-

const emailSender = EmailSender ใหม่ ()
emailSender.sendMail(mail)

คลาส EmailSender ใช้คลาส MailService เมื่อทำงาน คลาส EmailSender ขึ้นอยู่กับคลาส MailService และคลาส MailService จะขึ้นอยู่กับคลาส EmailSender

ระดับการเชื่อมต่อของวิธีการเขียนข้างต้นสูงเกินไป และโค้ดไม่แข็งแกร่ง หากคลาส MailService เปลี่ยนวิธีการส่งพารามิเตอร์ วิธีการเขียนในคลาส EmailSender ก็จะเปลี่ยนไปเช่นกัน

คลาส EmailSender {
  บริการเมล: MailService
  ตัวสร้าง (mailService: MailService) {
    this.mailService = บริการเมล;
  -
-
const mailService = MailService ใหม่ ("APIKEY1234567890")
const emailSender = new EmailSender(mailService)

เมื่อสร้างอินสแตนซ์คลาส EmailSender คลาสจะแทรกการขึ้นต่อกันลงในคลาสผ่านพารามิเตอร์ Constructor Constructor

การพึ่งพาการฉีดช่วยลดการเชื่อมต่อระหว่างโค้ดและเพิ่มการบำรุงรักษาโค้ด การเปลี่ยนแปลงรหัสในคลาส MailService จะไม่ส่งผลกระทบต่อคลาส EmailSender อีกต่อไป

2. กรอบงาน DI

Angular มี DI 框架ของตัวเอง ซึ่ง隐藏กระบวนการของการนำการพึ่งพาการฉีดไปใช้ นักพัฒนาจำเป็นต้องใช้โค้ดง่ายๆ เท่านั้นเพื่อใช้ฟังก์ชันการขึ้นต่อกันที่ซับซ้อน

มีแนวคิดหลักสี่ประการในกรอบงาน DI ของ Angular:

• Dependency : วัตถุอินสแตนซ์ที่ส่วนประกอบขึ้นอยู่กับ, วัตถุอินสแตนซ์บริการ

• Token : รับข้อมูลประจำตัวของวัตถุอินสแตนซ์บริการ

• Injector : หัวฉีด รับผิดชอบใน创建维护วัตถุอินสแตนซ์ของบริการ และ注入เข้าไปในออบเจ็กต์อินสแตนซ์บริการของคอมโพเนนต์ (จัดการการสร้างและการได้มาของออบเจ็กต์บริการ)

• Provider : กำหนดค่าออบเจ็กต์ของหัวฉีด ระบุคลาสบริการเพื่อสร้างออบเจ็กต์อินสแตนซ์บริการ และรับตัวระบุของออบเจ็กต์อินสแตนซ์ (ผู้ให้บริการ: ผู้ให้บริการ)

2.1

หัวฉีด หัวฉีดมีหน้าที่รับผิดชอบในการสร้างออบเจ็กต์อินสแตนซ์คลาสบริการและการฉีดออบเจ็กต์อินสแตนซ์คลาสบริการลงในส่วนประกอบที่จำเป็น

• สร้าง

  การนำเข้าหัวฉีด {สะท้อนแสงInjector } จาก "@เชิงมุม/แกน"
  //บริการคลาสคลาส MailService {}
  // สร้างหัวฉีดและส่งผ่านในคลาสบริการ const injector =สะท้อนแสงInjector.resolveAndCreate([MailService])

• รับวัตถุอินสแตนซ์คลาสบริการในหัวฉีด

  const mailService = injector.get(MailService)

• วัตถุอินสแตนซ์บริการอยู่ในโหมดซิงเกิลตัน และ injector อยู่ใน หลังจากสร้างอินสแตนซ์บริการแล้ว มันจะถูกแคชไว้

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

• ที่แตกต่างกัน injectors ส่งคืนวัตถุอินสแตนซ์บริการที่แตกต่างกัน

  const injector =สะท้อนแสงInjector.resolveAndCreate([MailService])
  const childInjector = injector.resolveAndCreateChild ([MailService])
  
  const mailService1 = injector.get (MailService)
  const mailService2 = childInjector.get (MailService)
  
  console.log(mailService1 === mailService2) // การค้นหา

• อินสแตนซ์บริการที่ผิดพลาดจะคล้ายกับ作用域链ของฟังก์ชัน หากพบระดับปัจจุบัน ให้ใช้ระดับปัจจุบัน หากไม่พบระดับปัจจุบัน ให้ไปที่ parent เพื่อค้นหา

  const injector =สะท้อนแสงInjector.resolveAndCreate([ MailService])
  const childInjector = injector.resolveAndCreateChild ([])
  
  const mailService1 = injector.get (MailService)
  const mailService2 = childInjector.get (MailService)
  
  console.log(mailService1 === mailService2) // true

2.2 อ

• อบเจ็กต์หัวฉีดการกำหนดค่าของผู้ให้บริการระบุคลาสบริการเพื่อสร้างออบเจ็กต์อินสแตนซ์และตัวระบุเพื่อเข้าถึงออบเจ็กต์อินสแตนซ์บริการ

  const injector =สะท้อนแสงInjector.resolveAndCreate([
    { ให้: MailService, useClass: MailService }
  ])

• ตัวระบุสำหรับการเข้าถึงอ็อบเจ็กต์ที่ต้องพึ่งพาอาจเป็นประเภทสตริง

  const injector =สะท้อนแสงInjector.resolveAndCreate([
    { ให้: "เมล", useClass: MailService }
  -
  const mailService = injector.get ("เมล")

• useValue

  const injector =สะท้อนแสงInjector.resolveAndCreate ([
    -
      ให้: "กำหนดค่า",
      useValue: Object.freeze({
        APIKEY: "API1234567890",
        APISCRET: "500-400-300"
      -
    -
  -
  const Config = injector.get("Config")

สร้างความสัมพันธ์แบบหลวมๆ ระหว่างอ็อบเจ็กต์อินสแตนซ์และการอ้างอิงภายนอก อ็อบเจ็กต์ภายนอกได้รับอ็อบเจ็กต์อินสแตนซ์ผ่านตัวระบุ ตราบใดที่ตัวระบุยังคงไม่เปลี่ยนแปลง ไม่ว่าโค้ดภายในจะเป็นอย่างไร การเปลี่ยนแปลงก็จะไม่ส่งผลกระทบต่อภายนอก