JavaScript_javascript スキルで依存関係注入を実装するためのアイデアを共有する-jsチュートリアル-php.cn

JavaScript_javascript スキルで依存関係注入を実装するためのアイデアを共有する

WBOY

リリース： 2016-05-16 16:19:58

オリジナル

808 人が閲覧しました

現在、あらゆるフレームワークがモジュール化されており、フロントエンドの JavaScript も例外ではありません。各モジュールは特定の機能を担当しており、モジュール間には相互依存関係があるため、JavaScript で依存関係の注入を実装するにはどうすればよいかという疑問が生じます。 (JavaScript の依存関係注入には、すべての主要なフレームワークに対応する実装があります。ここでは実装のアイデアのみを学びます)

次の要件:

定義済みのサービスモジュールの Key-Value セットがすでに存在し、func が追加された新しいサービス、パラメーターリストがサービスの依存関係であると仮定します。

コードをコピーコードは次のとおりです:

var services = { abc : 123, def : 456, ghi : 789 }; // 何らかの Service
 が定義されていると仮定します。
関数サービス(abc, ghi){

This.write = function(){

console.log(abc);

console.log(ghi);

}

}

関数 Activitor(func){

var obj;

// 実装

obj を返します;

}

解決策:

何らかの仕組み(リフレクション?)を通して、funcで定義したパラメータリストを取り出し、一つ一つ値を代入します。次に、何らかのメカニズム (Activitor?) を通じて関数をインスタンス化します。

解決策:

1. func のパラメータリストを取得します:

パラメータリストを取得するにはどうすればよいですか?最初に思い浮かぶのは、反射メカニズムです。では、JavaScript にはリフレクションがあるのでしょうか?現時点では eval(str) 関数の使い方しか分かりませんが、パラメータリストを取得するための適切な実装はないようです。 func.arguments の定義をもう一度見てみると、このプロパティは func が呼び出されてパラメータが渡された場合にのみ有効であり、要件を満たすことができません。

func.toString()の後の文字列を処理してパラメータリストを取得できますか?

始めて試してみましょう:

コードをコピーコードは次のとおりです:

function getFuncParams(func) {

varmatches = func.toString().match(/^functions*[^(]*(s*([^)]*))/m);

If (一致 && 一致の長さ > 1)

returnmatches[1].replace(/s*/, '').split(',');
[] を返します;

};

この時点で、関数パラメータのリスト配列が取得されます。

2. パラメーターリストに基づいて依存関係を検索します:

パラメータリストを取得した後、つまり依存関係リストを取得した後、依存関係をパラメータとして渡すのは非常に簡単です。

コードをコピーコードは次のとおりです:

var params = getFuncParams(func);

for (params の var i) {

params[i] = サービス[params[i]];

}

3. 依存関係パラメーターを渡してインスタンス化します: JavaScript には func.constructor という 2 つの関数があることがわかっています。call(thisArg,[arg[,arg,[arg,[…]]]]) と apply(thisArg,args…) です。どちらも次のことができます。関数操作をインスタンス化します。 call 関数の最初のパラメータはこのポインタで、残りはパラメータリストです。これは func パラメータリストがわかっている場合に使用するのに適していますが、私のニーズには合いません。 2番目のapply関数を見ると、最初のパラメータもこのポインタであり、2番目のパラメータはパラメータ配列です。呼び出されると、関数のパラメータリストに値が1つずつ自動的に割り当てられます。これはちょうど私の条件を満たすものです。ニーズ。

コードはおおよそ次のとおりです:

コードをコピーコードは次のとおりです:

関数 Activitor(func){

var obj = {};

func.apply(obj, params);

obj を返します;

}

この時点で、関数のインスタンスを作成し、関数に必要なパラメータを渡すことができます。

4. 印刷してテストします:

完全なコード:

コードをコピーコードは次のとおりです:

var
// 何らかの Service
が定義されていると仮定します。サービス = { abc: 123, def: 456, ghi: 789 },

// func のパラメータリスト(依存関係リスト)を取得
GetFuncParams = 関数 (関数) {
varmatches = func.toString().match(/^functions*[^(]*(s*([^)]*))/m);
If (一致 && 一致の長さ > 1)
returnmatches[1].replace(/s /, '').split(',');
return [];
}、

// パラメーターリスト (依存関係リスト) に基づいてパラメーター (依存関係) を入力します
setFuncParams = 関数 (パラメータ) {
for (params の var i) {
params[i] = サービス[params[i]];
}
return params;
};

// アクティベーター
function Activitor(func) {
var obj = {};
func.apply(obj, setFuncParams(getFuncParams(func)));
obj を返します;
}

//新しいサービスを定義
関数サービス(abc, ghi) {
This.write = function () {
console.log(abc);
console.log(ghi);
}
}

// サービスをインスタンス化し、メソッドを呼び出します
var service = Activitor(Service);
service.write();

コンソールは正常に印刷されます。