홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

의존성 주입에 대한 각도 학습 이야기

저자：Eve Cole 업데이트 시간：2022-06-13 15:49:00
의존성 주입이란 무엇입니까? 이 기사에서는 각도의 DI(종속성 주입)를 이해하고 AngularDI 프레임워크의 두 가지 핵심 개념인 인젝터와 공급자를 자세히 소개합니다. 도움이 되기를 바랍니다.

Angular의 DI(종속성 주입)

1. 개요

DI 라고도 하는 DI(종속성 주입)는 코드 간의 결합을 줄이는 데 사용되는面向对象프로그래밍의设计原则입니다. [관련 튜토리얼 추천: "angular 튜토리얼"]

class MailService {
  생성자(APIKEY) {}
}

클래스 EmailSender {
  메일 서비스: 메일 서비스
  생성자() {
    this.mailService = 새로운 MailService("APIKEY1234567890")
  }

  sendMail(메일) {
    this.mailService.sendMail(메일)
  }
}

const emailSender = 새로운 EmailSender()
emailSender.sendMail(mail)

EmailSender 클래스는 실행 시 MailService 클래스를 사용합니다. EmailSender 클래스는 MailService 클래스에 종속되고 MailService 클래스는 EmailSender 클래스에 종속됩니다.

위 작성 방법의 결합도가 너무 높아서 코드가 견고하지 않습니다. MailService 클래스가 매개변수 전달 방식을 변경하면 EmailSender 클래스의 쓰기 방법도 변경됩니다.

클래스 EmailSender {
  메일 서비스: 메일 서비스
  생성자(mailService: 메일서비스) {
    this.mailService = 메일서비스;
  }
}
const mailService = 새로운 MailService("APIKEY1234567890")
const emailSender = new EmailSender(mailService)

EmailSender 클래스를 인스턴스화할 때 생성자 생성자 매개변수를 통해 해당 종속성을 클래스에 주입하는 방식이 종속성 주입입니다.

종속성 주입은 코드 간의 결합을 줄이고 코드의 유지 관리성을 높입니다. MailService 클래스의 코드 변경 사항은 더 이상 EmailSender 클래스에 영향을 주지 않습니다.

2. DI 프레임워크

Angular에는 종속성 주입 구현 프로세스를隐藏자체 DI 框架가 있습니다. 개발자는 복잡한 종속성 주입 기능을 사용하기 위해 매우 간단한 코드만 사용하면 됩니다.

Angular의 DI 프레임워크에는 네 가지 핵심 개념이 있습니다.

  • Dependency : 구성 요소가 의존하는 인스턴스 객체, 서비스 인스턴스 객체

  • Token : 서비스 인스턴스 객체의 ID를 얻습니다.

  • Injector : 서비스의 인스턴스 객체를创建维护하는 인젝터 클래스注入(서비스 객체의 생성 및 획득을 관리합니다).

  • Provider : 인젝터의 객체를 구성하고, 서비스 인스턴스 객체를 생성하기 위한 서비스 클래스를 지정하고, 인스턴스 객체의 식별자를 얻는다. (Provider: Provider)

2.1 인젝터

인젝터는 서비스 클래스 인스턴스 객체를 생성하고, 서비스 클래스 인스턴스 객체를 필수 컴포넌트에 주입하는 역할을 담당한다.

  • "@angular/core"에서

    인젝터 가져오기 { ReflectiveInjector } 만들기

    //서비스 클래스 class 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) // false 서비스 인스턴스 검색은

  • 함수作用域链과 유사합니다. 현재 레벨을 찾을 수 없으면 현재 레벨을 사용합니다. 검색할 부모

    const injector = ReflectiveInjector.resolveAndCreate([ MailService])
const childInjector = injector.resolveAndCreateChild([])

const mailService1 = injector.get(MailService)
const mailService2 = childInjector.get(MailService)

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

2.2 Provider

  • 구성 인젝터 객체는 인스턴스 객체를 생성하기 위한 서비스 클래스와 서비스 인스턴스 객체에 액세스하기 위한 식별자를 지정합니다.

    const 인젝터 = ReflectiveInjector.resolveAndCreate([
  { 제공: MailService, useClass: MailService }
])

  • 종속 개체에 액세스하기 위한 식별자는 문자열 유형일 수도 있습니다.

    const injector = ReflectiveInjector.resolveAndCreate([
  { 제공: "메일", useClass: MailService }
])
const mailService = injector.get("mail")

  • useValue

    const injector = ReflectiveInjector.resolveAndCreate([
  {
    제공: "구성",
    useValue: Object.freeze({
      APIKEY: "API1234567890",
      APISCRET: "500-400-300"
    })
  }
])
const Config = injector.get("Config")는

인스턴스 객체와 외부 참조 사이의 느슨한 결합 관계를 설정합니다. 외부 객체는 내부 코드에 관계없이 식별자가 변경되지 않는 한 인스턴스 객체를 얻습니다. 변경해도 외부에는 영향을 미치지 않습니다.

관련 기사