Mari kita bincangkan tentang konsep asas dalam sistem suntikan kebergantungan Angular

Artikel ini akan membincangkan Angular dan memperkenalkan konsep asas suntikan pergantungan saya harap ia akan membantu semua orang!

Sebagai rangka kerja hadapan yang direka "untuk projek bahagian hadapan berskala besar", Angular sebenarnya mempunyai banyak reka bentuk yang patut dirujuk dan dipelajari reka bentuk dan fungsi ini prinsip. Artikel ini memfokuskan pada ciri terbesar Suntikan - Suntikan Kebergantungan Pertama, kami akan memperkenalkan beberapa konsep asas dalam sistem suntikan kebergantungan Sudut.

Suntikan Kebergantungan

Memandangkan kita akan memperkenalkan reka bentuk suntikan kebergantungan bagi rangka kerja Sudut, mari kita susun konsep asas suntikan kebergantungan. Kami sering mengelirukan konsep Prinsip Inversion Dependency (DIP), Inversion of Control (IoC) dan Dependency Injection (DI), jadi kami akan memperkenalkannya secara ringkas di sini. [Tutorial berkaitan yang disyorkan: "Tutorial sudut"]

Prinsip penyongsangan kebergantungan, penyongsangan kawalan, suntikan kebergantungan

Gandingan rendah, kohesi tinggi Ia mungkin merupakan salah satu matlamat reka bentuk setiap sistem, dan banyak corak dan konsep reka bentuk telah dihasilkan untuk tujuan ini, termasuk idea reka bentuk prinsip penyongsangan kebergantungan dan penyongsangan kawalan.

(1) Prinsip Penyongsangan Ketergantungan (DIP).

Takrifan asal prinsip penyongsangan kebergantungan ialah:

• Modul peringkat tinggi tidak boleh bergantung pada modul peringkat rendah, kedua-duanya harus bergantung pada abstraksinya; >
Abstrak tidak Anda harus bergantung pada butiran dan butiran harus bergantung pada abstraksi.

Ringkasnya: modul tidak boleh bergantung secara langsung antara satu sama lain, tetapi harus bergantung pada peraturan abstrak (antara muka atau kelas abstrak).

(2) Penyongsangan Kawalan (IoC).

Takrifan penyongsangan kawalan ialah: kebergantungan antara modul disegerakan dan diuruskan dari dalam atur cara ke luar. Iaitu, apabila objek dicipta, ia dikawal oleh entiti luaran yang mengawal semua objek dalam sistem, dan rujukan objek yang bergantung padanya dihantar (disuntik) kepadanya.

Terdapat dua cara utama untuk melaksanakan penyongsangan kawalan:

Suntikan kebergantungan: menerima objek bergantung secara pasif
• Pencarian kebergantungan: meminta objek bergantung secara aktif

(3) Suntikan kebergantungan.

Suntikan kebergantungan ialah teknik penyongsangan kawalan yang paling biasa.

Penyongsangan kebergantungan dan penyongsangan kawalan saling melengkapi dan selalunya boleh digunakan bersama untuk mengurangkan gandingan antara modul dengan berkesan.

Suntikan Ketergantungan dalam Sudut

Dalam Sudut, teknologi suntikan kebergantungan juga digunakan apabila membuat instantiated kelas, rangka kerja DI akan menyediakannya dengan kebergantungan yang diisytiharkan oleh kelas ini perkhidmatan atau objek yang diperlukan oleh kelas untuk melaksanakan fungsinya).

Suntikan kebergantungan dalam Angular pada asasnya berkisar pada komponen atau modul, dan digunakan terutamanya untuk menyediakan kebergantungan bagi komponen yang baru dicipta.

Mekanisme suntikan pergantungan utama dalam Angular ialah

mekanisme penyuntik:

Sebarang pergantungan yang diperlukan dalam aplikasi mesti menggunakan penyuntik aplikasi supaya penyuntik boleh menggunakan pembekal ini untuk mencipta kejadian baharu
• Angular akan mencipta penyuntik tahap aplikasi penuh dan penyuntik lain yang diperlukan semasa permulaan

Ini terutamanya melibatkan dua konsep, iaitu

Penyuntik dan Pembekal Jom tengok.

Injector

Injector digunakan untuk mencipta kebergantungan, menyelenggara bekas untuk mengurus kebergantungan ini dan menggunakannya semula sebanyak mungkin. Penyuntik akan menyediakan satu pergantungan dan menyuntik objek tunggal ini ke dalam berbilang komponen.

Jelas sekali, sebagai bekas yang digunakan untuk mencipta, mengurus dan mengekalkan kebergantungan, fungsi penyuntik adalah sangat mudah: mencipta tika pergantungan, mendapatkan tika pergantungan dan mengurus tika pergantungan. Kita juga boleh melihatnya daripada kod sumber kelas abstrak

: Injector

export abstract class Injector {
  // 找不到依赖
  static THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
  // NullInjector 是树的顶部
  // 如果你在树中向上走了很远，以至于要在 NullInjector 中寻找服务，那么将收到错误消息，或者对于 @Optional()，返回 null
  static NULL: Injector = new NullInjector();

  // 根据提供的 Token 从 Injector 检索实例
  abstract get<T>(
    token: Type<T> | AbstractType<T> | InjectionToken<T>,
    notFoundValue?: T,
    flags?: InjectFlags
  ): T;

  // 创建一个新的 Injector 实例，该实例提供一个或多个依赖项
  static create(options: {
    providers: StaticProvider[];
    parent?: Injector;
    name?: string;
  }): Injector;

  // ɵɵdefineInjectable 用于构造一个 InjectableDef
  // 它定义 DI 系统将如何构造 Token，并且在哪些 Injector 中可用
  static ɵprov = ɵɵdefineInjectable({
    token: Injector,
    providedIn: "any" as any,
    // ɵɵinject 生成的指令：从当前活动的 Injector 注入 Token
    factory: () => ɵɵinject(INJECTOR),
  });

  static __NG_ELEMENT_ID__ = InjectorMarkers.Injector;
}

Dalam erti kata lain, kita boleh menambah contoh pergantungan yang perlu dikongsi kepada penyuntik, dan bertanya serta mendapatkan semula penyuntik melalui Token untuk mendapatkan contoh pergantungan yang sepadan.

Perlu diingatkan bahawa penyuntik dalam Angular adalah hierarki, jadi proses mencari kebergantungan juga merupakan proses melintasi pokok penyuntik ke atas.

Ini kerana dalam Angular, aplikasi disusun dalam modul Untuk butiran, sila rujuk

5 Organisasi Modular. Secara umumnya, DOM halaman ialah struktur pokok dengan sebagai nod akar Berdasarkan ini, komponen dan modul dalam aplikasi Angular juga berada dalam struktur pokok yang mengiringinya. htmlPenyuntik menyediakan komponen dan modul, dan juga dipasang dalam struktur pokok modul dan organisasi. Oleh itu, Injector juga dibahagikan kepada tahap modul dan komponen, yang boleh menyediakan contoh kebergantungan khusus untuk komponen dan modul masing-masing. Penyuntik boleh diwarisi, yang bermaksud bahawa jika penyuntik yang ditentukan tidak dapat menyelesaikan pergantungan, ia akan meminta penyuntik induk untuk menyelesaikannya, kerana kita juga boleh lihat daripada kod di atas untuk mencipta penyuntik:

// 创建一个新的 Injector 实例，可传入 parent 父注入器
static create(options: {providers: StaticProvider[], parent?: Injector, name?: string}): Injector;

在某个注入器的范围内，服务是单例的。也就是说，在指定的注入器中最多只有某个服务的最多一个实例。如果不希望在所有地方都使用该服务的同一个实例，则可以通过注册多个注入器、并按照需要关联到组件和模块中的方式，来按需共享某个服务依赖的实例。

我们可以看到创建一个新的Injector实例时，传入的参数包括Provider，这是因为Injector不会直接创建依赖，而是通过Provider来完成的。每个注入器会维护一个提供者的列表，并根据组件或其它服务的需要，用它们来提供服务的实例。

Provider 提供者

Provider 提供者用来告诉注入器应该如何获取或创建依赖，要想让注入器能够创建服务（或提供其它类型的依赖），必须使用某个提供者配置好注入器。

一个提供者对象定义了如何获取与 DI 令牌（token） 相关联的可注入依赖，而注入器会使用这个提供者来创建它所依赖的那些类的实例。

关于 DI 令牌：

• 当使用提供者配置注入器时，就会把提供者和一个 DI 令牌关联起来；
• 注入器维护一个内部令牌-提供者的映射表，当请求一个依赖项时就会引用它，令牌就是这个映射表的键。

提供者的类型很多，从官方文档中可以阅读它们的具体定义：

export type Provider =
  | TypeProvider
  | ValueProvider
  | ClassProvider
  | ConstructorProvider
  | ExistingProvider
  | FactoryProvider
  | any[];

提供者的解析过程如下：

function resolveReflectiveFactory(
  provider: NormalizedProvider
): ResolvedReflectiveFactory {
  let factoryFn: Function;
  let resolvedDeps: ReflectiveDependency[];
  if (provider.useClass) {
    // 使用类来提供依赖
    const useClass = resolveForwardRef(provider.useClass);
    factoryFn = reflector.factory(useClass);
    resolvedDeps = _dependenciesFor(useClass);
  } else if (provider.useExisting) {
    // 使用已有依赖
    factoryFn = (aliasInstance: any) => aliasInstance;
    // 从根据 token 获取具体的依赖
    resolvedDeps = [
      ReflectiveDependency.fromKey(ReflectiveKey.get(provider.useExisting)),
    ];
  } else if (provider.useFactory) {
    // 使用工厂方法提供依赖
    factoryFn = provider.useFactory;
    resolvedDeps = constructDependencies(provider.useFactory, provider.deps);
  } else {
    // 使用提供者具体的值作为依赖
    factoryFn = () => provider.useValue;
    resolvedDeps = _EMPTY_LIST;
  }
  //
  return new ResolvedReflectiveFactory(factoryFn, resolvedDeps);
}

根据不同类型的提供者，通过解析之后，得到由注入器 Injector 使用的提供者的内部解析表示形式：

export interface ResolvedReflectiveProvider {
  // 键，包括系统范围内的唯一 id，以及一个 token
  key: ReflectiveKey;
  // 可以返回由键表示的对象的实例的工厂函数
  resolvedFactories: ResolvedReflectiveFactory[];
  // 指示提供者是多提供者，还是常规提供者
  multiProvider: boolean;
}

提供者可以是服务类ClassProvider本身，如果把服务类指定为提供者令牌，那么注入器的默认行为是用new来实例化那个类。

Angular 中的依赖注入服务

在 Angular 中，服务就是一个带有@Injectable装饰器的类，它封装了可以在应用程序中复用的非 UI 逻辑和代码。Angular 把组件和服务分开，是为了增进模块化程度和可复用性。

用@Injectable标记一个类，以确保编译器将在注入类时生成必要的元数据（元数据在 Angular 中也是很重要的一部分），以创建类的依赖项。

@Injectable装饰器的类会在编译之后，得到 Angular 可注入对象：

// 根据其 Injectable 元数据，编译 Angular 可注入对象，并对结果进行修补
export function compileInjectable(type: Type<any>, srcMeta?: Injectable): void {
  // 该编译过程依赖 @angular/compiler
  // 可参考编译器中的 compileFactoryFunction compileInjectable 实现
}

Angular 中可注入对象（InjectableDef）定义 DI 系统将如何构造 token 令牌，以及在哪些注入器（如果有）中可用：

export interface ɵɵInjectableDef<T> {
  // 指定给定类型属于特定注入器，包括 root/platform/any/null 以及特定的 NgModule
  providedIn: InjectorType<any> | "root" | "platform" | "any" | null;
  // 此定义所属的令牌
  token: unknown;
  // 要执行以创建可注入实例的工厂方法
  factory: (t?: Type<any>) => T;
  // 在没有显式注入器的情况下，存储可注入实例的位置
  value: T | undefined;
}

使用@Injectable()的providedIn时，优化工具可以进行 Tree-shaking 优化，从而删除应用程序中未使用的服务，以减小捆绑包尺寸。

总结

本文简单介绍了在 Angular 依赖注入体系中比较关键的几个概念，主要包括Injector、Provider和Injectable。

对于注入器、提供者和可注入服务，我们可以简单地这样理解：

• 注入器用于创建依赖，会维护一个容器来管理这些依赖，并尽可能地复用它们。

• 一个注入器中的依赖服务，只有一个实例。

• 注入器需要使用提供者来管理依赖，并通过 token（DI 令牌）来进行关联。

• 提供者用于高速注入器应该如何获取或创建依赖。

• 可注入服务类会根据元数据编译后，得到可注入对象，该对象可用于创建实例。

更多编程相关知识，请访问：编程入门！！

Atas ialah kandungan terperinci Mari kita bincangkan tentang konsep asas dalam sistem suntikan kebergantungan Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!