>  기사  >  웹 프론트엔드  >  의존성 주입에 대한 각도 학습 이야기

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

青灯夜游
青灯夜游앞으로
2022-05-19 20:50:122293검색

의존성 주입이란 무엇인가요? 이 글은 angular의 종속성 주입(DI)을 안내하고 AngularDI 프레임워크의 두 가지 핵심 개념인 인젝터와 제공자를 자세히 소개합니다.

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

Angular

1. 개요

종속성 주입(종속성 주입)은 DI라고 합니다. 지향 code>프로그래밍의 설계 원칙으로, 코드 간의 DI,是面向对象编程中的一种设计原则,用来减少代码之间的耦合度。【相关教程推荐:《angular教程》】

class MailService {
  constructor(APIKEY) {}
}

class EmailSender {
  mailService: MailService
  constructor() {
    this.mailService = new MailService("APIKEY1234567890")
  }

  sendMail(mail) {
    this.mailService.sendMail(mail)
  }
}

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

EmailSender 类运行时要使用 MailService 类,EmailSender 类依赖 MailService 类,MailService 类是 EmailSender 类的依赖项。

以上写法的耦合度太高,代码并不健壮。如果 MailService 类改变了参数的传递方式,在 EmailSender 类中的写法也要跟着改变。

class EmailSender {
  mailService: MailService
  constructor(mailService: MailService) {
    this.mailService = mailService;
  }
}
const mailService = new MailService("APIKEY1234567890")
const emailSender = new EmailSender(mailService)

在实例化 EmailSender 类时将它的依赖项通过 constructor 构造函数参数的形式注入到类的内部,这种写法就是依赖注入。

通过依赖注入降了代码之间的耦合度,增加了代码的可维护性。MailService 类中代码的更改再也不会影响 EmailSender 类。

2、DI 框架

Angular 有自己的 DI 框架,它将实现依赖注入的过程隐藏了,对于开发者来说只需使用很简单的代码就可以使用复杂的依赖注入功能。

在 Angular 的 DI 框架中有四个核心概念:

  • Dependency:组件要依赖的实例对象,服务实例对象

  • Token:获取服务实例对象的标识

  • Injector:注入器,负责创建维护服务类的实例对象并向组件中注入服务实例对象(管理服务对象的创建和获取)。

  • Provider:配置注入器的对象,指定创建服务实例对象的服务类和获取实例对象的标识。(Provider:提供程序)

2.1 注入器 Injectors

注入器负责创建服务类实例对象,并将服务类实例对象注入到需要的组件中。

  • 创建注入器

    import { ReflectiveInjector } from "@angular/core"
    // 服务类
    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) // true
  • 不同的注入器返回不同的服务实例对象

    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
  • 服务实例的查找类似函数作用域链커플링

    을 줄이는 데 사용됩니다. [관련 튜토리얼 추천: "
  • angular tutorial
"]

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

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

console.log(mailService1 === mailService2) // true
EmailSender 클래스는 실행 시 MailService 클래스를 사용해야 합니다. EmailSender 클래스는 MailService 클래스에 종속되고 MailService 클래스는 EmailSender 클래스에 종속됩니다.

위 작성 방법의 결합도가 너무 높아서 코드가 견고하지 않습니다. MailService 클래스가 매개변수 전달 방식을 변경하면 EmailSender 클래스의 쓰기 방법도 변경됩니다.
    const injector = ReflectiveInjector.resolveAndCreate([
      { provide: MailService, useClass: MailService }
    ])
  • EmailSender 클래스를 인스턴스화할 때 생성자 생성자 매개변수 형식으로 해당 종속성을 클래스 내부에 주입하는 방법이 종속성 주입입니다.

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

  • 2. DI 프레임워크

Angular에는 종속성 주입 프로세스를 숨기기하는 자체 DI 프레임워크가 있습니다. 매우 간단한 코드로 사용됩니다.

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

종속성: 구성 요소가 의존하는 인스턴스 개체, 서비스 인스턴스 개체🎜🎜🎜🎜토큰: 가져오기 서비스 인스턴스 개체의 ID🎜🎜🎜🎜인젝터: 서비스 클래스의 인스턴스 개체를 생성 및 유지하고 주입하는 역할을 담당하는 인젝터 서비스를 구성 요소 인스턴스 개체에 추가합니다(서비스 개체의 생성 및 획득을 관리함). 🎜🎜🎜🎜Provider: 인젝터의 개체를 구성하고, 서비스 클래스를 지정하여 서비스 인스턴스 개체를 생성하고, 인스턴스 개체의 식별자를 얻습니다. (Provider: Provider) 🎜🎜🎜🎜🎜2.1 인젝터 Injectors🎜🎜🎜인젝터는 서비스 클래스 인스턴스 개체를 생성하고 서비스 클래스 인스턴스 개체를 필수 구성 요소에 주입하는 역할을 담당합니다. 🎜🎜🎜🎜인젝터 만들기🎜
const injector = ReflectiveInjector.resolveAndCreate([
  { provide: "mail", useClass: MailService }
])
const mailService = injector.get("mail")
🎜🎜🎜인젝터에서 서비스 클래스 인스턴스 개체 가져오기🎜
const injector = ReflectiveInjector.resolveAndCreate([
  {
    provide: "Config",
    useValue: Object.freeze({
      APIKEY: "API1234567890",
      APISCRET: "500-400-300"
    })
  }
])
const Config = injector.get("Config")
🎜🎜🎜서비스 인스턴스 개체는 싱글톤 모드에 있으며 인젝터는 서비스 인스턴스를 만든 후 이를 캐시합니다🎜rrreee🎜🎜 🎜다른 인젝터는 다른 서비스 인스턴스 객체를 반환합니다.🎜rrreee🎜🎜🎜서비스 인스턴스 검색은 scope chain 함수와 유사합니다. 현재 수준을 찾을 수 있으면 현재 수준을 사용합니다. 찾을 수 없으면 상위 수준으로 이동하여 인젝터를 구성하는 🎜rrreee🎜🎜🎜🎜2.2 Provider 🎜🎜🎜🎜🎜 개체를 찾아 인스턴스 개체를 생성할 서비스 클래스와 서비스 인스턴스 개체에 액세스할 식별자를 지정합니다. 🎜rrreee🎜🎜🎜종속 개체에 대한 액세스 식별은 문자열 유형일 수도 있습니다. 🎜rrreee🎜🎜🎜useValue🎜rrreee🎜🎜🎜 외부 개체는 인스턴스 개체를 가져옵니다. 식별을 통해 식별이 유지되는 한 내부 코드가 어떻게 변경되더라도 외부 세계에는 영향을 미치지 않습니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 의존성 주입에 대한 각도 학습 이야기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제