この記事では、依存性注入について理解し、依存性注入によって解決される問題とそのネイティブの記述方法を紹介し、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 这个服务并且实例化,所以后面的两个实例化对象相等
总结
本文介绍了依赖注入解决的问题和它原生的写法是什么用的,并且介绍了Angular提供给我们的DI框架,用它提供给我们的简单api实现了实例化的过程,并且讲解了注入器,也是会分层级的,能提供给我们更好地一个项目设计方式。之后有机会再来讲解一下provider以及更多的扩展。
更多编程相关知识,请访问:编程视频!!
以上が依存性注入とは何ですか? Angular で実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

WebStorm Mac版
便利なJavaScript開発ツール

メモ帳++7.3.1
使いやすく無料のコードエディター

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

ホットトピック









