Javascript_javascript 기술의 종속성 주입에 대한 심층적인 이해

조만간 다른 개발자의 추상화를 사용해야 합니다. 즉, 다른 사람의 코드에 의존하게 됩니다. 나는 종속성 없는(종속성 없는) 모듈을 좋아하지만 달성하기가 어렵습니다. 여러분이 만든 멋진 블랙박스 구성 요소도 어느 정도 의존합니다. 이것이 의존성 주입이 작용하는 곳입니다. 종속성을 효과적으로 관리하는 능력은 이제 절대적으로 필요합니다. 이 기사에는 문제에 대한 탐구와 일부 해결 방법이 요약되어 있습니다.

1. 목표
두 개의 모듈이 있다고 상상해 보세요. 첫 번째는 Ajax 요청 서비스(service)를 담당하고, 두 번째는 라우팅(router)을 담당합니다.

코드 복사 코드는 다음과 같습니다.

var service = function() {
return { name: 'Service' };
}
var router = function() {
return { name: 'Router' };
}

다른 함수가 있습니다 이 두 모듈에 사용합니다.

코드 복사 코드는 다음과 같습니다.

var doSomething = function(other) {
var s = service();
var r = router();
};

더 흥미롭게 보이도록 이 함수는 하나의 매개변수를 허용합니다. 물론 위의 코드를 완벽하게 사용할 수는 있지만 충분히 유연하지는 않습니다. ServiceXML이나 ServiceJSON을 사용하고 싶거나 테스트 모듈이 필요한 경우에는 어떻게 해야 할까요? 함수 본문을 편집하는 것만으로는 문제를 해결할 수 없습니다. 첫째, 함수의 매개변수를 통해 종속성을 해결할 수 있습니다. 즉,

코드 복사 코드는 다음과 같습니다.

var doSomething = function(service , router, other ) {
var s = service();
var r = router();
};

추가 매개변수를 전달하여 원하는 것을 달성하지만, 새로운 문제를 가져올 것입니다. doSomething 메서드가 코드 전체에 분산되어 있다고 상상해 보세요. 종속성을 변경해야 하는 경우 함수를 호출하는 모든 파일을 변경할 수는 없습니다.

이를 수행하는 데 도움이 되는 도구가 필요합니다. 이것이 의존성 주입이 해결하려고 하는 문제입니다. 종속성 주입 솔루션이 달성해야 하는 몇 가지 목표를 적어 보겠습니다.

종속성을 등록할 수 있어야 합니다
1. 주입은 함수를 취하고 필요한 함수를 반환해야 합니다
2. 너무 많이 작성할 수 없습니다. 간결하고 아름다운 구문이 필요합니다
3 .Injection은 전달된 함수의 범위를 유지해야 합니다
4. 전달된 함수는 종속성 설명뿐만 아니라 사용자 지정 매개변수를 허용할 수 있어야 합니다
5. 완벽한 체크리스트입니다.
3. RequireJS/AMD 방법
RequireJS에 대해 들어보셨을 것입니다. 종속성 주입 문제를 해결하는 데 좋은 선택입니다.

코드 복사 코드는 다음과 같습니다.

define(['service', 'router '], 기능(서비스, 라우터) {                                               여기서 매개변수의 순서가 중요합니다. 위에서 언급했듯이 동일한 구문을 허용하는 injector라는 모듈을 작성해 보겠습니다.

코드 복사

코드는 다음과 같습니다.var doSomething = injector.resolve([' service', 'router'], function(service, router, other) {expect(service().name).to.be('Service');

expect(router().name). to.be ('Router');

Expect(other).to.be('Other');
});

doSomething("Other");
해야 합니다. 계속하기 전에 doSomething 함수 본문의 내용을 명확하게 설명하기 위해 나는 내가 작성한 코드가 약간의 TDD(테스트 중심 개발) 방법을 반영하여 예상한 대로 동작하는지 확인하기 위해 Expect.js(어설션 라이브러리)를 사용합니다.
인젝터 모듈부터 시작해 보겠습니다. 이는 훌륭한 싱글톤 패턴이므로 프로그램의 다른 부분에서 잘 작동할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

var 인젝터 = {
종속성: {},
레지스터: 함수(키, 값) {
this.dependent[key] = 값;
},
해결: 함수(deps, func, 범위) {

}
}

이것은 속성 저장을 위한 두 가지 메서드가 포함된 매우 간단한 개체입니다. 우리가 하는 일은 deps 배열을 확인하고 종속성 변수에서 답을 검색하는 것입니다. 남은 것은 .apply 메소드를 호출하고 이전 func 메소드의 인수를 전달하는 것입니다.

코드 복사 코드는 다음과 같습니다.

resolve: function(deps, func,scope ) {
var args = [];
for(var i=0; i if(this.dependent[d]) {
args.push (this.Dependency [d]);
} else {
새로운 오류 발생('해결할 수 없음' d)
func.apply(scope || {}, args.concat(Array.prototype.slice.call(arguments, 0)));
}
}

범위는 선택 사항입니다. 예, Array.prototype.slice.call(arguments, 0) 인수 변수를 실제 배열로 변환하는 데 필요합니다. 지금까지는 너무 좋았습니다. 우리의 테스트가 통과되었습니다. 이 구현의 문제점은 필요한 부분을 두 번 작성해야 하고 순서를 혼동할 수 없다는 것입니다. 추가 맞춤 매개변수는 항상 종속성 뒤에 옵니다.

4. 반사 방법
위키피디아의 정의에 따르면 반사란 프로그램이 런타임 시 객체의 구조와 동작을 검사하고 수정하는 능력을 말합니다. 간단히 말해서 JavaScript의 맥락에서 이는 구체적으로 객체나 함수의 소스 코드를 읽고 분석하는 것을 의미합니다. 기사 시작 부분에서 언급한 doSomething 함수를 완성해 보겠습니다. 콘솔에 doSomething.tostring()을 출력하는 경우. 다음 문자열이 표시됩니다.

코드 복사 코드는 다음과 같습니다." function (service , router, other) {

var s = service();

var r = router();
}"

이 메서드에서 반환된 문자열은 우리에게 다음과 같은 기능을 제공합니다. 매개변수를 탐색하고 더 중요한 것은 매개변수의 이름을 얻을 수 있다는 것입니다. 이것이 실제로 Angular가 종속성 주입을 구현하는 방법입니다. 저는 조금 게을러서 Angular 코드에서 매개변수를 얻기 위해 정규식을 직접 가로채었습니다.

코드 복사 코드는 다음과 같습니다./^functions*[^(]* (s* ([^)]*))/m

다음과 같이 해결 코드를 수정할 수 있습니다.

코드 복사 코드는 다음과 같습니다. resolve: function() {

var func, deps,scope, args = [], self = this;

func = 인수 [0];
deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split (',');
범위 = 인수[1] || {};
return function() {
var a = Array.prototype.slice.call(arguments, 0 );
for(var i=0; i var d = deps[i];
args.push(self.dependent[d] && d != ' ' ? self.dependent [d]: a.shift());
}
func.apply(scope || {}, args);
}
}

정규식을 실행합니다. other)", "service, router, other"]
의 결과
두 번째 항목만 필요한 것 같습니다. 공백을 지우고 문자열을 분할하면 deps 배열을 얻습니다. 큰 변화는 하나뿐입니다:

코드 복사 코드는 다음과 같습니다:

var a = Array.prototype .slice.call(arguments, 0);
...
args.push(self.dependent[d] && d != '' ? self.dependent[d] : a. Shift());

종속성 배열을 반복하여 누락된 항목이 발견되면 인수 객체에서 가져오려고 합니다. 고맙게도 배열이 비어 있으면 Shift 메소드는 오류를 발생시키는 대신 정의되지 않은 값을 반환합니다(웹의 아이디어 덕분에). 새 버전의 인젝터는 다음과 같이 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var doSomething = injector.resolve(function(service, other, router) {
Expect(service().name).to.be('Service');
Expect(router().name ).to.be( '라우터');
Expect(other).to.be('Other');
});
doSomething("Other");

종속성을 다시 작성할 필요가 없으며 순서가 중단될 수 있습니다. 여전히 작동하며 우리는 Angular의 마법을 성공적으로 복제했습니다.

그러나 이 접근법은 완벽하지 않으며 이는 반사형 주사의 매우 큰 문제입니다. 압축은 매개변수 이름을 변경하고 올바른 매핑을 유지할 수 없기 때문에 논리를 깨뜨립니다. 예를 들어 doSometing()을 압축하면 다음과 같이 보일 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var doSomething=function(e,t,n){var r=e();var i=t()}
Angular 팀이 제안한 솔루션은 다음과 같습니다.

var doSomething = injector.resolve(['service', 'router', function(service, router) {

}]);

이것은 우리가 시작한 솔루션과 매우 비슷해 보입니다. 더 나은 솔루션을 찾을 수 없어서 두 가지 접근 방식을 결합하기로 결정했습니다. 아래는 인젝터의 최종 버전입니다.

코드 복사 코드는 다음과 같습니다.

var injector = {
종속성: {},
레지스터: 함수(키, 값) {
this.dependent[key] = 값;
},
해결: 함수() {
var func, deps, 범위 , args = [], self = this;
if(typeof 인수[0] === 'string') {
func = 인수[1];
deps = 인수[0].replace( / /g , '').split(',');
범위 = 인수[2] || {};
} else {
func = 인수[0];
deps = func.toString ().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(',' );
           범위 = 인수[1]                                                                                  > i]; : a.shift());
                                                          
Resolve Visitor는 2개 또는 3개의 매개변수를 허용합니다. 매개변수가 2개라면 실제로는 글 앞부분에 쓴 것과 같습니다. 그러나 세 개의 매개변수가 있는 경우 첫 번째 매개변수를 변환하고 deps 배열을 채웁니다. 테스트 예는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var doSomething = injector.resolve('router,,service', function(a, b, c) {
Expect(a().name ).to .be('라우터');
기대(b).to.be('기타');
기대(c().name).to.be('서비스');
} );
doSomething("Other");

첫 번째 매개변수 뒤에 두 개의 쉼표가 있는 것을 볼 수 있습니다. 이는 오타가 아닙니다. null 값은 실제로 "기타" 매개변수(자리 표시자)를 나타냅니다. 이는 매개변수의 순서를 제어하는 ​​방법을 보여줍니다.

5. Scope 직접 주입
때로는 연산 함수의 범위(즉, this 객체)와 관련된 세 번째 주입 변수를 사용합니다. 따라서 이 변수를 사용할 필요가 없는 경우가 많습니다.

코드 복사 코드는 다음과 같습니다.

var injector = {
종속성: {},
레지스터: 함수(키, 값) {
this.dependent[key] = 값;
},
해결: 함수(deps, func, 범위) {
var args = [ ];
범위 = 범위 || {};
for(var i=0; i if(this.dependent [d] ) {
               범위[d] = this.dependent[d];                          }
반환 함수() {
               func.apply(scope || {}, Array.prototype .슬라이스.콜( 인수, 0));                                              우리가 하는 일은 범위에 종속성을 추가하는 것뿐입니다. 이것의 장점은 개발자가 더 이상 종속성 매개변수를 작성할 필요가 없다는 것입니다. 종속성 매개변수는 이미 함수 범위의 일부입니다.




코드 복사

코드는 다음과 같습니다.

var doSomething = injector.resolve([' service', 'router'], function(other) { Expect(this.service().name).to.be('Service'); Expect(this.router().name). to.be ('라우터'); Expect(other).to.be('Other');});doSomething("Other");

6. 결론

사실 우리 대부분은 의존성 주입을 사용해 봤지만 이를 깨닫지 못했습니다. 해당 용어를 모르더라도 코드에서 해당 용어를 백만 번 사용했을 것입니다. 이 글을 통해 여러분의 이해가 깊어질 수 있기를 바랍니다.