依存性注入とは何ですか? Angular で実装するにはどうすればよいですか?-jsチュートリアル-php.cn

この記事では、依存性注入について理解し、依存性注入によって解決される問題とそのネイティブの記述方法を紹介し、Angularの依存性注入フレームワークについて説明します。！

依存性注入とは何ですか? Angular で実装するにはどうすればよいですか?

最近、Angular プロジェクトで依存関係注入というキーワードをよく目にしますが、それがどのように実装されているのかまだ理解できません。Angular の情報しかありません。 official website. 利用原理は詳しく説明されていないので、ネイティブの書き方から、どのような問題を解決するために依存性注入を使うのか、jsでどのように表現すればよいのかを解説していきます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

依存性注入とは

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 を渡す必要があります。このようなパラメータで。ここで、note クラスがあり、video クラスの下に Screenshot メソッドを呼び出す必要があるため、note クラスは video クラスに依存していると言えます。したがって、note クラス内で video クラスをインスタンス化して、note クラスで video クラスのインスタンスオブジェクトを取得し、その中でスクリーンショットメソッドを呼び出すことができるようにする必要があります。

上記のコードの結合度が高すぎるため、推奨されません。たとえば、ビデオのビデオアドレスが変更された場合、受信ビデオ URL を Note で変更する必要があります。これは、クラスはビデオクラスに依存しているため、変更するとすべてそれに合わせて変更する必要があり、非常に不便です。

次に、依存性注入を使用して上記の問題を解決します:

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

ログイン後にコピー

クラスの外でビデオクラスをインスタンス化し、パラメータ渡しを通じてそのインスタンスをノートクラスに渡します。過剰な結合の問題をうまく解決できます。パラメータを介してインスタンスを渡すこの方法をインジェクションと呼びます。

利点

依存性注入により、コード間の結合が軽減され、コードの保守性が向上します。 video クラスのコードを変更しても、note クラスには影響しません。

Angular の DI フレームワーク

上記の実装プロセスでは、特に理想的ではないことがまだ 1 つあります。それは、ビデオクラスをクラスの外でインスタンス化する必要があるということです。 1 つだけですが、ビデオクラスの内部変更がどのように変更されても、外部コードが影響を受けないことを願っています。

Angular が提供する DI フレームワークでは、ビデオクラスを自分でインスタンス化する必要はありません。依存関係注入の実装プロセスが隠蔽されます。開発者にとっては、非常に単純なコードを使用するだけで済みます。洗練された依存関係注入機能。

Angular の DI には 4 つの中心的な概念があります。

依存関係: コンポーネントが依存するインスタンスオブジェクト、サービスインスタンスオブジェクト
トークン: サービスインスタンスオブジェクトの識別子を取得します。Angular は多くのインスタンスオブジェクトを維持します。取得する必要がある場合は、識別子を通じて取得する必要があります。
インジェクター: インジェクター: サービスクラスのインスタンスオブジェクトの作成と維持、サービスインスタンスオブジェクトのコンポーネントへの挿入、パラメーターを介した各コンポーネントへの受け渡しを担当します。
Procider: オブジェクト。インジェクターを指定します。サービスインスタンスオブジェクトのサービスクラスを作成し、インスタンスオブジェクトの識別子を取得します。

インジェクター injector

まず、提供されている基本構文を使用してインジェクターを作成します。 by Angular

1. インジェクターの作成

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

ログイン後にコピー

ReflectiveInjector を導入し、resolveAndCreate メソッドを使用してインジェクターを作成します。配列を受け取ります。配列にはインスタンスを作成する必要があるクラスがあります。このメソッドはインジェクターを返します。 2. インジェクターでサービスクラスインスタンスオブジェクトを取得します

const video = injector.get(Video)

ログイン後にコピー

インジェクターの下に get メソッドがあり、識別子を渡してインスタンスオブジェクトを取得するために使用されます。デフォルトの識別子はサービスの名前ですVideo

このようにして、Video のインスタンスオブジェクトを取得できます。Angular が提供する DI フレームワークを使用すると、インスタンスオブジェクトを取得するためにクラスを手動でインスタンス化する必要がなくなります。わたしたちのため。

2. サービスのインスタンスオブジェクトはシングルトンモードです。インジェクターは、サービスインスタンスの作成後にそれをキャッシュすることを後悔します。

const video1 = injector.get(Video) const video2 = injector.get(Video) console.log(video1 === video1)//true

ログイン後にコピー

つまり、インスタンスオブジェクトが何度更新されても、フレームワークを通じて取得した場合、返されるインスタンスオブジェクトはすべて同じインスタンスオブジェクトです。

3. ただし、複数のインジェクターを作成できます。異なるインジェクターによって返される同じサービスによってインスタンス化されたオブジェクトは、同じではありません

const injector1 = ReflectiveInjector.resolveAndCreate([ Video ]) const injector2 = ReflectiveInjector.resolveAndCreate([ Video ]) const video1 = injector1.get(Video) const video2 = injector2.get(Video) console.log(video1 === video1)//false

ログイン後にコピー

4. インジェクター上にresolveAndCreateChildという子インジェクターを作成するメソッドがありますこのメソッドは子インジェクターを作成します親インジェクターと子インジェクターの関係は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 这个服务并且实例化，所以后面的两个实例化对象相等