ホームページ ウェブフロントエンド jsチュートリアル JavaScript の興味深い質問: 依存関係の注入

JavaScript の興味深い質問: 依存関係の注入

Feb 13, 2017 pm 04:18 PM

Dependency Injection (DI) パターンについて聞いたことがあるはずです。

バックエンドの人気の

Spring フレームワークであっても、フロントエンドのトレンディな angular.js であっても、依存関係の注入はいたるところで見られます。

この用語は少しわかりにくいですが、中心となるアイデアは非常にシンプルです。

よく言われることわざを使うと、

「風が欲しければ風が来るし、雨が欲しければ雨が降る」、言い換えれば、「食べ物を食べるときは、口を開けて、服があれば手を伸ばせるよ」

私の説明を聞いてもまだ少し混乱しているかもしれませんが、最初に例を示します。

以下はいくつかのモジュールであり、

「依存関係」とも呼ばれ、ハッシュオブジェクトに保存されます:


var deps = {
  'firstDependency': function () {return 'this is firstDependency';},
  'secondDepency': function () {return 'this is secondDepency';},
};
ログイン後にコピー

以下は依存性注入マネージャーであり、時期が来たら

新しいになりますOf:


var DI = function (dependency) {
  this.dependency = dependency;
};
ログイン後にコピー

newでは、depsがパラメータとして渡されます。

さて、ここからが問題の核心です。何を書く必要がありますか:


DI.prototype.inject = function (func) {......};
ログイン後にコピー

この注入メソッドは DI のプロトタイプにバインドされており、パラメーターとして関数を受け取ります。

それではどうやって使うのですか?


	var di = new DI(deps);

	var myDependentFunc = di.inject(function (secondDepency, firstDependency) {
	    firstDependency();
	    secondDepency();
	});

	myDependentFunc();
ログイン後にコピー

まず、
inject によって渡される匿名関数を観察してみましょう。これは要件を表しており、注入する必要がある場所です。

最初にその正式なパラメータを見てみましょう

secondDepency, firstDependency
ログイン後にコピー

ここには 2 つの要件を表す 2 つのパラメータがあります。必要に応じて、これら 2 つのパラメータを分析し、関連するモジュールを見つけます。

さて、注入関数の作成に戻りますが、最初のステップでは何をすべきでしょうか?

まず、inject によって渡された関数の

toString() 形式を取得します:


	
	//第一步
	DI.prototype.inject = function (func) {
		func.toString();
	};
ログイン後にコピー

次に、文字列を分析し、すべての仮パラメータを見つけます:


	
	//第二步
	DI.prototype.inject = function (func) {
		var args = findArgs(func.toString());
	};
ログイン後にコピー

findArgs の書き方方法?正規表現または文字列のセグメント化とインターセプトを使用できます。ここでは後者を使用します。


String.prototype.trim=function(){
  return this.replace(/(^\s*)|(\s*$)/g, "");
};

var findArgs = function(funcStr){
    var bracket1 = funcStr.indexOf("(");
    var bracket2 = funcStr.indexOf(")");
    var argsStr = funcStr.slice(bracket1+1,bracket2);
    var args = argsStr.split(",");
    return args.map(function(e){
        return e.trim();
    });
};
ログイン後にコピー

すべての仮パラメータを見つけた後の 3 番目のステップは、モジュール ハッシュ テーブルから対応するモジュール関数を見つけ、実際のパラメータ リストに格納することです。

realArgs実際のパラメータリストを参照します:


	
	//第三步
	DI.prototype.inject = function (func) {
		var args = findArgs(func.toString());
		var realArgs = [];
		for(var i=0;i<args.length;i++){
			var dep = this.dependency[args[i]];
			if(dep){
				realArgs.push(dep);
			}
		}
		//......
	};
ログイン後にコピー

最後のステップは
injectionであり、匿名関数が実行されると、実際のパラメータリストはclosureを通じて取得されます。 func に注入されます。


DI.prototype.inject = function (func) {
    var args = findArgs(func.toString());
    var realArgs = [];
    for(var i=0;i<args.length;i++){
        var dep = this.dependency[args[i]];
        if(dep){
            realArgs.push(dep);
        }
    }
    return function(){
        return func.apply(null,realArgs);
    };
}
ログイン後にコピー

こうして、簡易版のインジェクション関数が完成しました。

上記は JavaScript に関する興味深い質問です: 依存性注入の内容 詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Angular での依存関係の挿入を理解するためのステップバイステップ ガイド Angular での依存関係の挿入を理解するためのステップバイステップ ガイド Dec 02, 2022 pm 09:14 PM

Angular での依存関係の挿入を理解するためのステップバイステップ ガイド

Phalconフレームワークで依存関係注入(Dependency Injection)を使用する方法 Phalconフレームワークで依存関係注入(Dependency Injection)を使用する方法 Jul 30, 2023 pm 09:03 PM

Phalconフレームワークで依存関係注入(Dependency Injection)を使用する方法

JUnit 単体テスト フレームワークを使用した依存関係の注入 JUnit 単体テスト フレームワークを使用した依存関係の注入 Apr 19, 2024 am 08:42 AM

JUnit 単体テスト フレームワークを使用した依存関係の注入

Golang 関数パラメータ渡しにおける依存性注入パターン Golang 関数パラメータ渡しにおける依存性注入パターン Apr 14, 2024 am 10:15 AM

Golang 関数パラメータ渡しにおける依存性注入パターン

PHP 関数の依存関係注入とサービス コンテナー PHP 関数の依存関係注入とサービス コンテナー Apr 27, 2024 pm 01:39 PM

PHP 関数の依存関係注入とサービス コンテナー

Golang の単体テストに依存関係注入を使用するにはどうすればよいですか? Golang の単体テストに依存関係注入を使用するにはどうすればよいですか? Jun 02, 2024 pm 08:41 PM

Golang の単体テストに依存関係注入を使用するにはどうすればよいですか?

Go 言語: 依存性注入ガイド Go 言語: 依存性注入ガイド Apr 07, 2024 pm 12:33 PM

Go 言語: 依存性注入ガイド

Go 言語の依存関係注入のベスト プラクティス Go 言語の依存関係注入のベスト プラクティス Apr 07, 2024 pm 03:42 PM

Go 言語の依存関係注入のベスト プラクティス

See all articles