요즘에는 모든 프레임 워크가 모듈 식이며 프론트 엔드 JavaScript도 예외는 아닙니다. 각 모듈은 특정 기능을 담당하며 모듈간에 상호 의존성이 있습니다. 문제는 JavaScript에서 의존성 주입을 구현하는 방법입니다. (JavaScript의 종속성 주입, 주요 프레임 워크에는 해당 구현이 있으며, 구현 아이디어 만 여기서 학습됩니다)
다음 요구 사항 :
이미 정의 된 서비스 모듈 키-값 수집이 있다고 가정하고 Func는 새로운 서비스이며 매개 변수 목록은 서비스 종속성입니다.
코드 사본은 다음과 같습니다.
var services = {ABC : 123, def : 456, GHI : 789}; // 일부 서비스가 정의되었다고 가정합니다
기능 서비스 (ABC, GHI) {
this.write = function () {
Console.log (ABC);
Console.log (GHI);
}
}
기능 활동자 (func) {
var obj;
// 성취하다
반환 obj;
}
해결책:
일부 메커니즘 (반사?)을 통해 func에 의해 정의 된 매개 변수 목록을 가져 와서 값을 하나씩 할당하십시오. 그런 다음 일부 메커니즘 (활동가?)을 통해 기능이 인스턴스화됩니다.
해결책:
1. func의 매개 변수 목록을 가져옵니다.
매개 변수 목록을 얻는 방법? 가장 먼저 떠오르는 것은 반사 메커니즘입니다. 그렇다면 JavaScript에 반영이 있습니까? 거기에 있어야합니다. 현재 Eval (STR) 기능을 사용하는 방법 만 알고 있지만 매개 변수 목록을 얻기위한 관련 구현이없는 것 같습니다. func.arguments 정의를 살펴 보겠습니다. 이 속성은 func를 호출하고 매개 변수를 전달할 때만 유효하며 요구를 충족시킬 수 없습니다.
func.tostring () 후 문자열을 처리하여 매개 변수 목록을 얻을 수 있습니까?
시도해 봅시다 :
코드 사본은 다음과 같습니다.
함수 getfuncparams (func) {
var matches = func.toString (). match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m);
if (매치 && matches.length> 1)
반환 일치 [1] .replace (// s*/, '') .split ( ',');
반품 [];
};
여기서는 func 매개 변수 목록 배열을 얻습니다.
2. 매개 변수 목록을 기반으로 종속성 찾기 :
매개 변수 목록을 얻은 후에는 종속성 목록이 얻어집니다. 의존성을 매개 변수로 전달하는 것은 매우 간단합니다.
코드 사본은 다음과 같습니다.
var params = getfuncparams (func);
for (var i in params) {
매개 변수 [i] = 서비스 [params [i]];
}
3. 종속성 매개 변수를 전달하고 인스턴스화하십시오.
JavaScript에는 func.constructor가 있으며, 여기에는 Call (thisarg, [arg [, arg, [arg, [arg, […]]]) 및 적용 (thisarg, args…)이있는 두 가지 기능이 있습니다. 호출 함수의 첫 번째 매개 변수는이 포인터이고 나머지는 매개 변수 목록입니다. 이것은 func 매개 변수 목록이 알려져 있고 내 요구를 충족시킬 수없는 경우 사용하기에 적합합니다. 두 번째 적용 기능을 살펴 보겠습니다. 첫 번째 매개 변수는 또한이 포인터이고 두 번째 매개 변수는 매개 변수 배열입니다. 호출되면 내 요구 사항을 충족시키는 기능 매개 변수 목록에 값을 자동으로 할당합니다.
코드는 대략 다음과 같습니다.
코드 사본은 다음과 같습니다.
기능 활동자 (func) {
var obj = {};
func.Apply (obj, params);
반환 obj;
}
이 시점 에서이 func의 인스턴스를 생성 하고이 func에 필요한 매개 변수를 전달할 수 있습니다.
4. 인쇄 및 테스트 :
완전한 코드 :
코드 사본은 다음과 같습니다.
var
// 일부 서비스가 정의되었다고 가정합니다
Services = {ABC : 123, def : 456, Ghi : 789},
// func의 매개 변수 목록 가져 오기 (종속성 목록)
getfuncparams = function (func) {
var matches = func.toString (). match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m);
if (매치 && matches.length> 1)
반환 일치 [1] .replace (// s+/, '') .split ( ',');
반품 [];
},
// 매개 변수 목록에 따라 매개 변수 채우기 (종속성) (종속성)
setfuncparams = function (params) {
for (var i in params) {
매개 변수 [i] = 서비스 [params [i]];
}
반환 매개 변수;
};
// Activator
기능 활동자 (func) {
var obj = {};
func.apply (obj, setfuncparams (getfuncparams (func)));
반환 obj;
}
// 새 서비스를 정의합니다
기능 서비스 (ABC, GHI) {
this.write = function () {
Console.log (ABC);
Console.log (GHI);
}
}
// 서비스를 인스턴스화하고 메소드를 호출하십시오
var service = Activator (서비스);
service.write ();
콘솔이 성공적으로 인쇄되었습니다!