JavaScript_javascript 기술의 종속성 주입에 대한 자세한 설명

컴퓨터 프로그래밍의 세계는 사실 단순한 부분을 끊임없이 추상화하고 이러한 추상화를 구성하는 과정입니다. JavaScript도 예외는 아닙니다. JavaScript를 사용하여 애플리케이션을 작성할 때 우리 모두는 유명한 오픈 소스 라이브러리나 프레임워크와 같이 다른 사람이 작성한 코드를 사용합니까? 프로젝트가 성장함에 따라 우리가 의존해야 할 모듈이 점점 더 중요해지고 있으며, 이때 이러한 모듈을 어떻게 효과적으로 구성할 것인가가 매우 중요한 문제가 되었습니다. 종속성 주입은 코드 종속 모듈을 효과적으로 구성하는 방법에 대한 문제를 해결합니다. 유명한 프런트엔드 프레임워크인 AngularJS와 같은 일부 프레임워크나 라이브러리에서 "종속성 주입"이라는 용어를 들어보셨을 것입니다. 종속성 주입은 매우 중요한 기능 중 하나입니다. 그러나 종속성 주입은 전혀 새로운 것이 아닙니다. PHP와 같은 다른 프로그래밍 언어에서는 오랫동안 존재해 왔습니다. 동시에 의존성 주입은 생각만큼 복잡하지 않습니다. 이번 글에서는 자바스크립트의 의존성 주입 개념을 알아보고 "의존성 주입 스타일" 코드를 작성하는 방법을 간단하고 쉽게 설명하겠습니다.

목표 설정

이제 두 개의 모듈이 있다고 가정해 보겠습니다. 첫 번째 모듈은 Ajax 요청을 보내는 데 사용되고 두 번째 모듈은 라우터로 사용됩니다.

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

var 서비스 = 함수() {
{ 이름: '서비스' }를 반환합니다.
}
var router = function() {
{ 이름: '라우터' }를 반환합니다.
}

이때 위에서 언급한 두 모듈을 사용해야 하는 함수를 작성했습니다.

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

var doSomething = 함수(기타) {
var s = 서비스();
var r = 라우터();
};

여기서 코드를 더 흥미롭게 만들기 위해 이 매개변수는 몇 가지 매개변수를 더 받아야 합니다. 물론 위의 코드를 완벽하게 사용할 수 있지만 위의 코드는 어떤 측면에서든 유연성이 약간 떨어집니다. 사용해야 하는 모듈의 이름이 ServiceXML이나 ServiceJSON으로 변경되면 어떻게 되나요? 아니면 테스트 목적으로 가짜 모듈을 사용하고 싶다면 어떻게 해야 할까요? 이 시점에서는 함수 자체를 편집할 수는 없습니다. 따라서 가장 먼저 해야 할 일은 종속 모듈을 함수에 매개변수로 전달하는 것입니다. 코드는 다음과 같습니다.

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

var doSomething = 기능(서비스, 라우터, 기타) {
var s = 서비스();
var r = 라우터();
};

위의 코드에서는 필요한 모듈을 정확하게 전달합니다. 그러나 이는 새로운 문제를 불러일으킨다. 코드의 두 부분 모두에서 doSomething 메서드를 호출한다고 가정합니다. 이 시점에서 세 번째 종속성이 필요하면 어떻게 될까요? 이때 함수 ​​호출 코드를 모두 편집하는 것은 현명한 생각이 아닙니다. 따라서 이를 수행하는 데 도움이 되는 코드가 필요합니다. 이것이 의존성 주입기가 해결하려고 하는 문제입니다. 이제 목표를 설정할 수 있습니다.

1. 종속성을 등록할 수 있어야 합니다
2. 의존성 주입기는 함수를 받은 다음 필요한 리소스를 얻을 수 있는 함수를 반환해야 합니다
3. 코드는 복잡하지 않아야 하며, 단순하고 친숙해야 합니다
4. 종속성 주입기는 전달된 함수 범위를 유지해야 합니다
5. 전달된 함수는 설명된 종속성뿐만 아니라 사용자 정의 매개변수를 수신할 수 있어야 합니다

js/AMD 메서드 필요

종속성 주입 문제를 매우 잘 해결할 수 있는 라이브러리인 유명한 requirejs에 대해 들어보셨을 것입니다.

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

정의(['서비스', '라우터'], function(서비스, 라우터) { 
// ...
});

requirejs의 아이디어는 먼저 필요한 모듈을 설명하고 그 다음 자신만의 함수를 작성해야 한다는 것입니다. 그 중에서 매개변수의 순서가 중요합니다. 비슷한 구문을 구현할 수 있는 injector라는 모듈을 작성해야 한다고 가정해 보겠습니다.

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

var doSomething = injector.resolve(['service', 'router'], function(service, router, other) {
Expect(service().name).to.be('서비스');
Expect(router().name).to.be('Router');
Expect(other).to.be('Other');
});
doSomething("기타");

계속하기 전에 설명해야 할 한 가지는 doSomething의 함수 본문에서 코드의 정확성을 보장하기 위해 Expect.js 어설션 라이브러리를 사용한다는 것입니다. 여기에는 TDD(Test Driven Development)의 개념과 비슷한 것이 있습니다.

이제 공식적으로 인젝터 모듈 작성을 시작합니다. 먼저 애플리케이션의 모든 부분에서 동일한 기능을 갖도록 단일체여야 합니다.

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

var 인젝터 = {
종속성: {},
등록: 함수(키, 값) {
This.dependent[키] = 값;
},
해결: function(deps, func,scope) {

}
}

이 객체는 저장 목적으로 두 개의 함수와 하나의 변수만 포함하는 매우 간단합니다. 우리가 해야 할 일은 deps 배열을 확인한 다음 종속성 변수에서 답을 찾는 것입니다. 나머지 부분은 .apply 메서드를 사용하여 우리가 전달한 func 변수를 호출하는 것입니다.

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

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

범위를 지정해야 하는 경우 위 코드도 정상적으로 실행될 수 있습니다.

위 코드에서 Array.prototype.slice.call(arguments, 0) 함수는 인수 변수를 실제 배열로 변환하는 것입니다. 지금까지 우리 코드는 테스트를 완벽하게 통과했습니다. 그런데 여기서 문제는 필수 모듈을 두 번 작성해야 하고, 순서대로 정렬할 수 없다는 점입니다. 추가 매개변수는 항상 모든 종속성 뒤에 옵니다.

반영방법

위키피디아의 설명에 따르면 리플렉션이란 프로그램이 실행되는 동안 개체가 자체 구조와 동작을 수정할 수 있음을 의미합니다. 자바스크립트에서는 간단히 말하면 객체의 소스코드를 읽고 소스코드를 분석하는 기능이다. doSomething 메서드로 돌아가서 doSomething.toString() 메서드를 호출하면 다음 문자열을 얻을 수 있습니다.

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

"기능(서비스, 라우터, 기타) {
var s = 서비스();
var r = 라우터();
}"

이런 식으로 이 방법을 사용하는 한 우리는 원하는 매개변수와 더 중요하게는 매개변수의 이름을 쉽게 얻을 수 있습니다. 이는 또한 AngularJS가 종속성 주입을 구현하는 데 사용하는 방법이기도 합니다. AngularJS 코드에서 다음 정규식을 볼 수 있습니다.

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

/^함수*[^(]*(s*([^)]*))/m


해결 방법을 아래 표시된 코드로 수정할 수 있습니다.

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

해결: 함수() {
var func, deps, 범위, args = [], self = this;
func = 인수[0];
deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(' ,');
범위 = 인수[1] || {};
반환 함수() {
      var a = Array.prototype.slice.call(인수, 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);
                                           }

위 정규식을 사용하여 정의한 함수와 일치시키면 다음과 같은 결과를 얻을 수 있습니다.

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

["기능(서비스, 라우터, 기타)", "서비스, 라우터, 기타"]

이 시점에서는 두 번째 항목만 필요합니다. 그러나 추가 공백을 제거하고 문자열을 으로 분할하면 deps 배열을 얻습니다. 다음 코드는 수정한 부분입니다.

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

var a = Array.prototype.slice.call(인수, 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('서비스');
Expect(router().name).to.be('Router');
Expect(other).to.be('Other');
});
doSomething("기타");

위 코드에서는 종속성 순서를 자유롭게 혼합할 수 있습니다.

하지만 완벽한 것은 없습니다. Reflective 메소드의 의존성 주입에는 매우 심각한 문제가 있습니다. 코드가 단순화되면 오류가 발생합니다. 이는 코드 단순화 프로세스 중에 매개변수 이름이 변경되어 종속성 해결에 실패할 수 있기 때문입니다. 예:

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

var doSomething=function(e,t,n){var r=e();var i=t()}

따라서 AngularJS에서와 마찬가지로 다음 솔루션이 필요합니다.

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

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

이는 처음에 본 AMD 솔루션과 매우 유사하므로 위의 두 가지 방법을 통합할 수 있습니다. 최종 코드는 다음과 같습니다.

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

var 인젝터 = {
    종속성: {},
    레지스터: 함수(키, 값) {
        this.dependent[key] = 값;
    },
    해결: 함수() {
        var func, deps, 범위, args = [], self = this;
        if(인수 유형[0] === '문자열') {
            func = 인수[1];
            deps = 인수[0].replace(/ /g, '').split(',');
            범위 = 인수[2] || {};
        } 그 밖의 {
            func = 인수[0];
            deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(' ,');
            범위 = 인수[1] || {};
        }
        반환 함수() {
            var a = Array.prototype.slice.call(인수, 0);
            for(var i=0; i                 var d = deps[i];
                args.push(self.dependent[d] && d != '' ? self.dependent[d] : a.shift());
            }
            func.apply(범위 || {}, args);
        }       
    }
}

这一个版本적인 해결 방법은 다음과 같습니다.

复代码 代码如下:

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

你可能注意到了两个逗号之间什么道没有，这并不是错误。这个공공缺是留给기타 这个参数的。这就是我们控数数顺序의 방법입니다.

结语

상위 화면의 内容中에서, 우리는 JavaScript 中依赖注入적 방법, 希望本文能够帮助你开始使用依赖注入这个技巧,并且写依赖注入风格的代码。