Angular의 종속성 주입을 이해하기 위한 단계별 가이드-JS 튜토리얼-php.cn

Angular의 종속성 주입을 이해하기 위한 단계별 가이드

青灯夜游

풀어 주다： 2022-12-02 21:14:48

앞으로

2631명이 탐색했습니다.

이 기사에서는 종속성 주입을 이해하고, 종속성 주입으로 해결되는 문제와 기본 작성 방법을 소개하고, Angular의 종속성 주입 프레임워크에 대해 이야기합니다. 모두에게 도움이 되기를 바랍니다.

Angular의 종속성 주입을 이해하기 위한 단계별 가이드

최근 Angular 프로젝트에서 키워드 의존성 주입을 자주 접하는데, Angular 공식 홈페이지에서는 사용법만 이야기하고 자세한 원리는 설명하지 않습니다. . 이므로 네이티브 작성 방법부터 설명하고, 종속성 주입을 사용하여 해결하는 문제가 무엇인지, js를 사용하여 어떻게 표현해야 하는지 설명하겠습니다. [관련 튜토리얼 추천: "angular tutorial"]

종속성 주입이란 무엇인가요? DI라고도 하는 종속성 주입은 코드 간의 결합을 줄이는 데 사용되는 객체 지향 프로그래밍의 설계 원칙입니다.

먼저 코드를 살펴보겠습니다

class Video{
    constructor(url){}
}

class Note{
    video: Video
    constructor(){
        this.video = new Video("https://aaaaa.mp4")
    }
    
    getScreenshot(){
        this.video.getScreenshot()
    }
}

const note = new Note()
note.getScreenshot()

로그인 후 복사

스크린샷을 얻기 위해 getScreenshot 메소드가 있는 비디오 클래스를 사용한다고 가정해 보겠습니다. 비디오 클래스를 인스턴스화할 때 비디오 URL과 같은 매개변수를 전달해야 합니다. 이제 비디오 클래스 아래에 스크린샷 메소드를 호출해야 하는 노트 클래스가 있습니다. 그러면 노트 클래스가 비디오 클래스에 따라 달라진다고 말할 수 있습니다. 따라서 노트 클래스 내에서 비디오 클래스를 인스턴스화해야 노트 클래스에 있는 비디오 클래스의 인스턴스 개체를 가져오고 스크린샷 메서드를 호출할 수 있습니다.

위 코드의 결합도가 너무 높아 권장되지 않습니다. 예를 들어 Video의 비디오 주소가 변경되면 Note에서 들어오는 비디오 URL을 변경해야 합니다. on 동영상의 경우 한번 변경하면 그에 맞춰 모든 것을 변경해야 하는데, 이는 매우 불편합니다.

다음으로 위의 문제를 해결하기 위해 종속성 주입을 사용합니다.

class Note{
    video: Video
    constructor(video: Video){
        this.video = Video;
    }
}

const video = new Video("https://aaaaa.mp4")
const note = new Note(video)

로그인 후 복사

클래스 외부에서 비디오 클래스를 인스턴스화하고 매개변수 전달을 통해 인스턴스를 노트 클래스에 전달합니다. 이렇게 하면 결합도도 성공적으로 해결할 수 있습니다. 문제가 발생하면 매개변수를 통해 인스턴스를 전달하는 방식을 주입이라고 부릅니다.

장점의존성 주입을 통해 코드 간의 결합이 줄어들고 코드의 유지 관리성이 높아집니다. 비디오 클래스의 코드 변경은 노트 클래스에 영향을 미치지 않습니다.

Angular의 DI 프레임워크

위 구현 과정에서 아직 특별히 이상적이지 않은 것이 하나 있습니다. 즉, 클래스 외부에서 비디오 클래스를 인스턴스화해야 한다는 것입니다. video class 내부적으로 어떻게 변경하더라도 외부 코드에는 영향을 미치지 않습니다.

Angular에서 제공하는 DI 프레임워크에서는 비디오 클래스를 직접 인스턴스화할 필요가 없습니다. 개발자에게는 매우 간단한 코드만 사용하면 됩니다.

Angular의 DI에는 네 가지 핵심 개념이 있습니다.

먼저 기본 구문을 통해 인젝터를 생성합니다. Angular에서 제공

1. ReflectiveInjector를 소개합니다. ResolveAndCreate 메소드는 인젝터를 생성하는 데 사용됩니다. 배열에는 인스턴스 객체를 생성하는 데 필요한 클래스가 있습니다. 주사기. 2. 인젝터에서 서비스 클래스 인스턴스 개체 가져오기

import { ReflectiveInjector } from "@angular/core"
//服务类
class Video{}
//创建注入器并传入服务类
const injector = ReflectiveInjector.resolveAndCreate([ Video ])

로그인 후 복사

인젝터 아래에는 식별자를 전달하고 인스턴스 개체를 가져오는 데 사용되는 get 메서드가 있습니다. 기본 식별자는 서비스 클래스의 이름입니다. Video

Video의 인스턴스 객체 Angular에서 제공하는 DI 프레임워크는 인스턴스 객체를 얻기 위해 클래스를 수동으로 인스턴스화할 필요를 없애줍니다.

2. 서비스 인스턴스 객체가 싱글톤 모드입니다. 인젝터가 서비스 인스턴스를 생성할 때 캐싱을 후회합니다

const video = injector.get(Video)

로그인 후 복사

즉, 프레임워크를 통해 인스턴스 객체를 몇 번 얻어도 마찬가지입니다. 동일한 인스턴스 객체를 반환합니다

3. 하지만 여러 인젝터가 반환한 동일한 서비스에 의해 인스턴스화된 객체는 동일하지 않습니다

const video1 = injector.get(Video)
const video2 = injector.get(Video)

console.log(video1 === video1)//true

로그인 후 복사

4. 이 메서드는 자식 인젝터를 생성합니다. 부모 인젝터와 자식 인젝터 사이의 관계는 js의 범위 체인과 유사합니다. 현재 인젝터를 찾을 수 없으면 부모 인젝터로 이동하여 찾습니다. 예:

const injector = ReflectiveInjector.resolveAndCreate([ Video ])
const injectorChild = injector.resolveAndCreateChild([])

const video1 = injector.get(Video)
const video2 = injectorChild.get(Video)

console.log(video1 === video1)//true

로그인 후 복사

像上面这段代码，我们在创建子级注入器的时候，不传递参数，但是在子级注入器实例化的时候，由于自身不存在 Video 这个服务，它就会去父级查找，当然，就找到了父级的 Video 这个服务并且实例化，所以后面的两个实例化对象相等