1. 개요
AngularJS에는 종속성 주입 인 고전적인 기능이 있습니다. Spring에 익숙한 학생들은 의존성 주입이 무엇인지 잘 알고 있어야하지만 여전히 프론트 엔드에서는 비교적 참신합니다.
간단히 말해서, 의존성 주입은 결합의 목적을 달성하기 위해 하드 코드를 풀어야합니다.
아래에서 AngularJS에서 일반적으로 사용되는 구현 방법을 살펴 보겠습니다.
방법 1 : 매개 변수 이름이 종속성의 이름이라고 가정하면 추론 적 사출 선언. 따라서 기능 객체의 toString () 메소드를 내부적으로 호출하고 함수 매개 변수 목록을 분석하고 추출한 다음 $ 인젝터를 통해 객체 인스턴스에 이러한 매개 변수를 주입합니다.
다음과 같이 :
// 방법 1 : 매개 변수 이름이 종속성의 이름이라고 가정하면, 추론 주입 선언. // 따라서 함수 객체의 toString () 메소드를 내부적으로 호출하고 함수 매개 변수 목록을 분석하고 추출한 다음이 매개 변수를 개체 인스턴스 Injector.inVoke (function ($ http, $ timeout) {// todo})에 주입합니다.방법 2 : 선 내에서 선언을 주입하여 함수를 정의 할 때 매개 변수 배열을 직접 전달할 수 있습니다. 배열에는 문자열과 함수가 포함되어 있으며, 여기서 문자열은 종속성 이름을 나타내고 함수는 목적 함수 객체를 나타냅니다.
다음과 같이 :
// 메소드 2 : 선에 선언을 주입하여 함수를 정의 할 때 매개 변수 배열을 직접 전달할 수 있습니다. // 배열에는 문자열과 함수가 포함되어 있으며, 여기서 문자열은 종속성 이름을 나타내고 함수는 목적 함수 객체를 나타냅니다. module.controller ( 'name', [ '$ http', '$ timeout', function ($ http, $ timeout) {// todo}]);위의 코드를 읽은 후, 나는 내 마음에 질문이 있었는데 어떻게 구현 되었습니까?
하하, 이러한 종속성 주입 방법을 함께 시뮬레이션하여 이해해 봅시다.
2. 기본 골격을 만듭니다
의존성 주입의 획득 프로세스는 필드 매핑을 통해 해당 방법을 얻는 것입니다.
따라서 기본 의존성 주입을 구현하려면 필요한 키/값을 저장하려면 저장 공간 (종속성)이 필요합니다. 저장 공간에 새로운 키 값 쌍을 추가하는 등록 방법 (register); 다른 하나는 핵심 구현 방법 (Resolve)이며, 관련 매개 변수를 통해 해당 매핑 결과를 저장 공간에서 얻습니다.
따라서 기본 골격은 다음과 같습니다.
var injector = {종속성 : {}, 레지스터 : 함수 (키, 값) {this.dependencies [key] = value; 이것을 반환하십시오; }, resolve : function () {}};3. 해결할 핵심 방법을 개선합니다
우리가 구축 한 기본 골격에서, 우리는 키가 실제로 해결 방법이며, 이는 특정 형태의 종속성 주입 요구 사항을 구현하는 데 사용된다는 것을 알 수 있습니다.
먼저, 우리는 다음 형식으로 의존성 주입을 구현할 것입니다 : 추론 된 주입 선언.
다음과 같이 :
injector.resolve (function (monkey, dorie) {monkey (); dorie ();});위의 효과를 달성하기 위해 함수의 toString () 메소드를 사용할 수 있습니다. 여기서 함수를 문자열로 변환하여 매개 변수 이름, 즉 키 값, 즉 정규 표현식을 통해 얻을 수 있습니다. 그런 다음 키 값을 통해 저장 공간 의존성에서 값 값을 찾으십시오. 해당 값이 발견되지 않으면 오류 가보고됩니다.
구현은 다음과 같습니다.
var injector = {종속성 : {}, 레지스터 : 함수 (키, 값) {this.dependencies [key] = value; 이것을 반환하십시오; }, resolve : function () {var func, deps, args = [], scope = null; func = 인수 [0]; // 함수의 매개 변수 이름을 가져옵니다 deps = func.tostring (). match (/^function/s*[^/(/s*([^/)]]*)/)/) [1] .replace (//g, '') .split ( ','); 범위 = 인수 [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 int ' + d); }} func.Apply (범위, args); }};테스트 코드는 다음과 같습니다.
<! docType html> <head> <meta charset = "utf-8"/> </head> <body> <cript> var injector = {종속성 : {}, register : 함수 (키, 값) {key] = value; 이것을 반환하십시오; }, resolve : function () {var func, deps, args = [], scope = null; func = 인수 [0]; // 함수의 매개 변수 이름을 가져옵니다 deps = func.tostring (). match (/^function/s*[^/(/s*([^/)]]*)/)/) [1] .replace (//g, '') .split ( ','); 범위 = 인수 [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 int ' + d); }} func.Apply (범위, args); }}; // 테스트 코드 injector.register ( 'monkey', function () {console.log ( 'monkey');}). Register ( 'dorie', function () {console.log ( 'dorie');}); injector.resolve (function (monkey, dorie) {monkey (); dorie (); console.log ( '-.-');}); </script> </body> </html>추론 된 주입 선언의 한 가지 단점은 기능의 매개 변수에 의존하기 때문에 압축 도구를 사용하여 압축 할 수 없다는 것입니다. 압축되면 매개 변수 이름을 변경하고 매개 변수 이름을 변경하여 분명히 실패합니다.
그런 다음 아래 에서이 단점을 보충 할 수있는 인라인 주사 성명서를 살펴 보겠습니다.
다음과 같이 인라인 주입 선언을 구현하십시오.
injector.resolve ([ 'monkey', 'dorie', function (m, d) {m (); d ();}]);유형을 사용하여 의존성 매개 변수와 함수를 구별하고 얻기 위해 인수 유형 [0]을 결정하십시오.
구현은 다음과 같습니다.
var injector = {종속성 : {}, 레지스터 : 함수 (키, 값) {this.dependencies [key] = value; 이것을 반환하십시오; }, resolve : function () {var firstParams, func, deps = [], scope = null, args = []; FirstParams = 인수 [0]; 범위 = 인수 [1] || {}; // (var i = 0, len = firdparams.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 int ' + d); }} func.Apply (범위 || {}, args); }};테스트 코드는 다음과 같습니다.
<! docType html> <head> <meta charset = "utf-8"/> </head> <body> <cript> var injector = {종속성 : {}, register : 함수 (키, 값) {key] = value; 이것을 반환하십시오; }, resolve : function () {var firstParams, func, deps = [], scope = null, args = []; FirstParams = 인수 [0]; 범위 = 인수 [1] || {}; // (var i = 0, len = firdparams.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 int ' + d); }} func.Apply (범위 || {}, args); }}; // 테스트 코드 injector.register ( 'monkey', function () {console.log ( 'monkey');}). Register ( 'dorie', function () {console.log ( 'dorie');}); injector.resolve ([ 'monkey', 'dorie', function (m, d) {m (); d (); console.log ( '-.-');}]); </script> </body> </html>라인의 선언은 문자열 형태를 통해 종속성 매개 변수로 사용되므로 압축이 두려워하지 않습니다.
마지막으로, 위에서 구현 된 두 가지 방법을 통합하고 원하는대로 수행합니다.
그런 다음 다음과 같이 병합하겠습니다.
var injector = {종속성 : {}, 레지스터 : 함수 (키, 값) {this.dependencies [key] = value; 이것을 반환하십시오; }, resolve : function () {var firstParams, func, deps = [], scope = null, args = []; FirstParams = 인수 [0]; 범위 = 인수 [1] || {}; // 어떤 형태의 주입 If (firstParams 타입 === 'function') {func = FirstParams; deps = func.toString (). match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) } 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 ++) {args.push (this.dependencies [d]); } else {Throw new Error ( 'can/'t int ' + d); }} func.Apply (범위 || {}, args); }};4. 하이라이트 - 요구 사항의 종속성 주입
AngularJS에서는 의존성 주입을 찾을 수 없습니다. 요구 사항을 사용한 경우 다음 형식은 다음에 익숙합니다.
요구 ([ 'monkey', 'dorie'], function (m, d) {// todo});위의 내용을 통해 AngularJS 의존성 주입의 구현을 단계별로 시뮬레이션했습니다. 나는 당신이 이것을 볼 때, 당신은 갑자기 수프 나 약을 바꿀 것이라는 것을 깨닫게 될 것입니다.
시뮬레이션 구현은 다음과 같습니다.
var injector = {종속성 : {}, 레지스터 : 함수 (키, 값) {this.dependencies [key] = value; 이것을 반환하십시오; }, Resolve : 함수 (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 (범위 || {}, args); }};테스트 코드는 다음과 같습니다.
<! docType html> <head> <meta charset = "utf-8"/> </head> <body> <cript> var injector = {종속성 : {}, register : 함수 (키, 값) {key] = value; 이것을 반환하십시오; }, Resolve : 함수 (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 (범위 || {}, args); }}}; // 테스트 코드 injector.register ( 'monkey', function () {console.log ( 'monkey');}). Register ( 'dorie', function () {console.log ( 'dorie');}); injector.resolve ([ 'monkey', 'dorie'], function (m, d) {m (); d (); console.log ( '-.-');}); </script> </body> </html>V. 참조
1. AngularJS 응용 프로그램 개발 사고 3 : 의존성 주입
2. JavaScript의 종속성 주입
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.