1。概要
AngularJSには、依存関係の注入である古典的な機能があります。春に精通している学生は、依存関係の注入とは何かをよく知っている必要がありますが、それはまだフロントエンドにとって比較的斬新です。
要するに、依存関係の注入は、ハードコードを解除して、分離の目的を達成することです。
以下では、AngularJSで一般的に使用される実装方法を見てみましょう。
方法1：パラメーター名が依存関係の名前であると仮定して、推論注入宣言。したがって、関数オブジェクトのtoString（）メソッドを内部的に呼び出し、関数パラメーターリストを分析および抽出し、$インジェクターを介してこれらのパラメーターをオブジェクトインスタンスに挿入します。
次のように：
//方法1：パラメーター名が依存関係の名前であると仮定して、推論注入宣言。 //したがって、関数オブジェクトのtoString（）メソッドを内部的に呼び出し、関数パラメーターリストを分析および抽出し、これらのパラメーターをObject Instance injector.invoke（function（$ http、$ timeout）{// todo}）に挿入します。方法2：ライン内に宣言を注入し、関数を定義するときにパラメーターの配列を直接渡すことができます。配列には文字列と関数が含まれ、文字列は依存関係名を表し、関数は目的関数オブジェクトを表します。
次のように：
//方法2：宣言をラインに注入し、関数を定義するときに一連のパラメーターを直接渡すことができます。 //配列には文字列と関数が含まれ、文字列は依存関係名を表し、関数は目的関数オブジェクトを表します。 module.controller（ 'name'、['$ http'、 '$ timeout'、function（$ http、$ timeout）{// todo}]）;上記のコードを読んだ後、私は心に質問がありました、これらはどのように実装されましたか？
ははは、これらの依存関係噴射方法を一緒にシミュレートして、それらを理解しましょう。
2。基本的なスケルトンを構築します
依存関係注入の取得プロセスは、フィールドマッピングを通じて対応する方法を取得することです。
したがって、基本的な依存関係インジェクションを実装するには、必要なキー/値を保存するためにストレージスペース（依存関係）が必要です。ストレージスペースに新しいキー値ペアを追加する登録方法（登録）。もう1つは、関連するパラメーターを介してストレージスペースで対応するマッピング結果を取得するコア実装方法（Resolve）です。
したがって、基本的なスケルトンは次のとおりです。
var injector = {依存関係：{}、登録：function（key、value）{this.dependencies [key] = value;これを返します。 }、Resolve：function（）{}};3。解決するコアメソッドを改善します
私たちが構築した基本的なスケルトンから、キーは実際に解像度の方法であることがわかります。これは、特定の形式の依存噴射要件を実装するために使用されます。
まず、次の形式で依存関係注射を実装します：推定注射宣言。
次のように：
Injector.resolve（function（monkey、dorie）{monkey（）; dorie（）;}）;上記の効果を実現するために、関数のtoString（）メソッドを使用して、関数を文字列に変換して、パラメーター名、つまりキー値を正規表現を介して取得できます。次に、キー値を介して、ストレージスペースの依存関係の値を見つけます。対応する値が見つからない場合、エラーが報告されます。
実装は次のとおりです。
var injector = {依存関係：{}、登録：function（key、value）{this.dependencies [key] = value;これを返します。 }、Resolve：function（）{var func、deps、args = []、scope = null; func = arguments [0]; //関数のパラメーター名を取得しますdeps = func.toString（）。match（/^function/s*[^/（]*/（/s*（[^/）]*）/）[1] .Replace（//g、 ''）.split（ '、'）; scope = arguments [1] || {}; for（var i = 0、len = deps.length; i <len、d = deps [i]; i ++）{if（this.dependencies [d]）{args.push（this.dependencies [d]）; } else {throw new error（ 'can/' t find ' + d）; }} func.apply（scope、args）; }};テストコードは次のとおりです。
<！doctype html> <head> <meta charset = "utf-8"/> </head> <body> <script> var injector = {dependencies：{}、register：function（key、value）{this.dependencies [key] = value;これを返します。 }、Resolve：function（）{var func、deps、args = []、scope = null; func = arguments [0]; //関数のパラメーター名を取得しますdeps = func.toString（）。match（/^function/s*[^/（]*/（/s*（[^/）]*）/）[1] .Replace（//g、 ''）.split（ '、'）; scope = arguments [1] || {}; for（var i = 0、len = deps.length; i <len、d = deps [i]; i ++）{if（this.dependencies [d]）{args.push（this.dependencies [d]）; } else {throw new error（ 'can/' t find ' + d）; }} func.apply（scope、args）; }}; //コードinjector.register（ 'monkey'、function（）{console.log（ 'monkey'）;}） Injector.Resolve（function（monkey、dorie）{monkey（）; dorie（）; console.log（ '-.-'）;}）; </script> </body> </html>推測された注射宣言の欠点の1つは、関数のパラメーターに依存するため、圧縮ツールを使用して圧縮できないことです。圧縮すると、パラメーター名を変更し、パラメーター名を変更します。これは間違いなく失敗します。
以下に、この欠点を補うことができるインラインインジェクションステートメントを見てみましょう。
次のようにインライン注入宣言を実装してください。
Injector.Resolve（['Monkey'、 'dorie'、function（m、d）{m（）; d（）;}]）;typeofを使用して、引数の種類[0]を決定して、依存性パラメーターと関数を区別および取得します。
実装は次のとおりです。
var injector = {依存関係：{}、登録：function（key、value）{this.dependencies [key] = value;これを返します。 }、Resolve：function（）{var firstParams、func、deps = []、scope = null、args = []; FirstParams = arguments [0]; scope = arguments [1] || {}; //（var i = 0、len = firstparams.length; i <len; i ++）{var val = firstparams [i]、type = typeof val; if（type === 'string'）{deps.push（val）; } else if（type === 'function'）{func = val; }} //パラメーターに依存することにより、（i = 0、len = deps.length; i <len、d = deps [i]; i ++）{if（this.dependencies [d]）{arg.push（this.dependencies [d]）; } else {throw new error（ 'can/' t find ' + d）; }} func.apply（scope || {}、args）; }};テストコードは次のとおりです。
<！doctype html> <head> <meta charset = "utf-8"/> </head> <body> <script> var injector = {dependencies：{}、register：function（key、value）{this.dependencies [key] = value;これを返します。 }、Resolve：function（）{var firstParams、func、deps = []、scope = null、args = []; FirstParams = arguments [0]; scope = arguments [1] || {}; //（var i = 0、len = firstparams.length; i <len; i ++）{var val = firstparams [i]、type = typeof val; if（type === 'string'）{deps.push（val）; } else if（type === 'function'）{func = val; }} //パラメーターに依存することにより、（i = 0、len = deps.length; i <len、d = deps [i]; i ++）{if（this.dependencies [d]）{arg.push（this.dependencies [d]）; } else {throw new error（ 'can/' t find ' + d）; }} func.apply（scope || {}、args）; }}; //コードinjector.register（ 'monkey'、function（）{console.log（ 'monkey'）;}） Injector.Resolve（['Monkey'、 'dorie'、function（m、d）{m（）; d（）; console.log（ '-.-'）;}]）; </script> </body> </html>ライン内の宣言は、文字列の形式を介した依存関係パラメーターとして使用されるため、圧縮は恐れていません。
最後に、上記で実装された2つの方法を統合し、必要なことを何でも実行します。
次に、次のようにマージしましょう。
var injector = {依存関係：{}、登録：function（key、value）{this.dependencies [key] = value;これを返します。 }、Resolve：function（）{var firstParams、func、deps = []、scope = null、args = []; FirstParams = arguments [0]; scope = arguments [1] || {}; //どのような形式の噴射if（typeof firstparams === 'function'）{func = firstparams; deps = func.toString（）。match（/^function/s*[^/（]*/（/s*（[^/）]*）/）/m）[1] .replace（//g、 ''）.split（ '、'）; } else {for（var i = 0、len = firstparams.length; i <len; i ++）{var val = firstParams [i]、type = typeof val; if（type === 'string'）{deps.push（val）; } else if（type === 'function'）{func = val; }}} //パラメーターに依存することにより、（i = 0、len = deps.length; i <len、d = deps [i]; i ++）{if（this.dependencies [d]）{args.push（this.dependencies [d]）; } else {throw new error（ 'can/' t find ' + d）; }} func.apply（scope || {}、args）; }};4。ハイライト-JSの依存関係注射を必要とします
依存関係の注入は、Angularjsには見られません。 requirejsを使用している場合、次のフォームは次のことに精通しています。
要求（['モンキー'、 'dorie']、function（m、d）{// todo}）;上記を通じて、AngularJS依存関係注入の実装を段階的にシミュレートしました。これを見ると、スープや薬を交換することに突然気付くと思います。
シミュレーションの実装は次のとおりです。
var injector = {依存関係：{}、登録：function（key、value）{this.dependencies [key] = value;これを返します。 }、Resolve：function（deps、func、scope）{var args = []; for（var i = 0、len = deps.length; i <len、d = deps [i]; i ++）{if（this.dependencies [d]）{args.push（this.dependencies [d]）; } else {throw new error（ 'can/' t resolve ' + d）; }} func.apply（scope || {}、args）; }};テストコードは次のとおりです。
<！doctype html> <head> <meta charset = "utf-8"/> </head> <body> <script> var injector = {dependencies：{}、register：function（key、value）{this.dependencies [key] = value;これを返します。 }、Resolve：function（deps、func、scope）{var args = []; for（var i = 0、len = deps.length; i <len、d = deps [i]; i ++）{if（this.dependencies [d]）{args.push（this.dependencies [d]）; } else {throw new error（ 'can/' t resolve ' + d）; }} func.apply（scope || {}、args）; }}}; //コードinjector.register（ 'monkey'、function（）{console.log（ 'monkey'）;}） Injector.Resolve（['Monkey'、 'dorie']、function（m、d）{m（）; d（）; console.log（ '-.-'）;}）; </script> </body> </html>V.参照
1。AngularJSアプリケーション開発思考3：依存関係注射
2。JavaScriptの依存関係
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。