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

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

黄舟
リリース: 2017-02-13 16:18:53
オリジナル
1241 人が閲覧しました

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) に注目してください。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート