JavaScript_javascript 기술로 종속성 주입을 구현하기 위한 아이디어 공유

요즘에는 모든 프레임워크가 모듈화되고 있으며, 프론트엔드 자바스크립트도 예외는 아닙니다. 각 모듈은 특정 기능을 담당하며 모듈 간에 상호 의존성이 있습니다. 따라서 JavaScript에서 종속성 주입을 어떻게 구현합니까? (JavaScript의 종속성 주입은 모든 주요 프레임워크에서 해당 구현을 갖습니다. 여기서는 구현 아이디어만 배웁니다.)

다음 요구사항:

이미 정의된 서비스 모듈 Key-Value 세트가 있고 func는 추가된 새 서비스이고 매개변수 목록은 서비스 종속성이라고 가정합니다.

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

var services = { abc : 123, def : 456, ghi : 789 } // 일부 Service
가 정의되어 있다고 가정합니다. 기능 서비스(abc, ghi){
This.write = 함수(){
console.log(abc);
console.log(ghi);
}
}
함수 활성자(func){
var obj;
// 구현
객체 반환;
}

해결책:

어떤 메커니즘(리플렉션?)을 통해 func에서 정의한 매개변수 목록을 꺼내고 하나씩 값을 할당합니다. 그런 다음 일부 메커니즘(Activitor?)을 통해 기능을 인스턴스화합니다.

해결책:

1. func의 매개변수 목록을 가져옵니다.

매개변수 목록을 얻는 방법은 무엇인가요? 가장 먼저 떠오르는 것은 반사 메커니즘입니다. 그럼 자바스크립트에는 리플렉션이 있나요? 현재는 eval(str) 함수 사용법만 알고 있는데, 매개변수 목록을 얻기 위한 관련 구현은 없는 것 같습니다. func.arguments 정의를 다시 살펴보면 이 속성은 func가 호출되고 매개변수가 전달될 때만 유효하며 요구 사항을 충족할 수 없습니다.

func.toString() 이후 문자열을 처리하여 매개변수 목록을 얻을 수 있나요?

시작하고 사용해 보세요:

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

함수 getFuncParams(func) {
var match = func.toString().match(/^functions*[^(]*(s*([^)]*))/m);
If (일치 && match.length > 1)
            일치 항목 반환[1].replace(/s*/, '').split(',')
반환 [];
};

이 시점에서 func 매개변수 목록 배열을 얻습니다.

2. 매개변수 목록을 기반으로 종속성을 찾습니다.

매개변수 목록, 즉 종속성 목록을 얻은 후 종속성을 매개변수로 전달하는 것은 매우 간단합니다.

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

var params = getFuncParams(func);
for (var i in params) {
params[i] = 서비스[params[i]];
}

3. 종속성 매개변수 전달 및 인스턴스화:

우리는 javascript에 func.constructor라는 두 가지 함수(call(thisArg,[arg[,arg,[arg,[…]]]]) 및 apply(thisArg,args…))가 있다는 것을 알고 있습니다. func 작업을 인스턴스화합니다. 호출 함수의 첫 번째 매개변수는 이 포인터이고, 나머지는 매개변수 목록입니다. 이는 func 매개변수 목록을 알고 있을 때 사용하기에 적합하지만 내 요구 사항을 충족하지 않습니다. 두 번째 적용 함수를 보면 첫 번째 매개변수도 이 포인터이고, 두 번째 매개변수도 매개변수 배열이다. 호출되면 자동으로 func의 매개변수 목록에 값을 하나씩 할당하는데, 이는 바로 내 조건을 충족한다. 필요합니다.

코드는 대략 다음과 같습니다.

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

함수 활성자(func){
var obj = {};
func.apply(obj, params);
객체 반환;
}

이 시점에서 func의 인스턴스를 생성하고 func에 필요한 매개변수를 전달할 수 있습니다.

4. 인쇄 및 테스트:

전체 코드:

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

변수
// 일부 Service
가 정의되었다고 가정합니다. 서비스 = { abc: 123, def: 456, ghi: 789 },

// func의 매개변수 목록 가져오기(종속성 목록)
GetFuncParams = 함수 (func) {
         var match = func.toString().match(/^functions*[^(]*(s*([^)]*))/m);
If (일치 && match.length > 1)
                 일치 항목 반환[1].replace(/s /, '').split(',');
         [] 반환;
},

// 매개변수 목록(종속성 목록)을 기반으로 매개변수(종속성)를 채웁니다.
setFuncParams = 함수(params) {
for (var i in params) {
              params[i] = 서비스[params[i]];
}
         매개변수 반환
};

//활성화자
함수 활성자(func) {
var obj = {};
func.apply(obj, setFuncParams(getFuncParams(func)));
객체 반환;
}

//새 서비스 정의
함수 서비스(abc, ghi) {
This.write = 함수() {
console.log(abc);
console.log(ghi);
}
}

// 서비스 및 호출 방법 인스턴스화
var service = Activitor(서비스);
service.write();

콘솔이 성공적으로 인쇄됩니다!