흥미로운 JavaScript 질문: 종속성 주입

黄舟
풀어 주다: 2017-02-13 16:18:53
원래의
1230명이 탐색했습니다.

DI(의존성 주입) 패턴을 들어보셨겠죠?

인기 있는 백엔드 Spring 프레임워크든, 프론트엔드 트렌드인 angular.js든, 종속성 주입은 어디에서나 볼 수 있습니다.

용어가 좀 모호하지만 핵심은 아주 간단합니다.

“바람을 원하면 바람이 되고, 비를 원하면 비가 온다”라는 속담을 사용하여 , 즉 “바람이 있으면 비가 온다” 먹을 땐 입을 벌리고, 옷을 입을 땐 손을 내민다”.

제 설명을 듣고도 여전히 약간 혼란스러우실 수 있습니다. 먼저 예를 들어보겠습니다.

다음은 "종속성"이라고도 하는 일부 모듈이며 해시 개체에 저장됩니다.


var deps = {
  'firstDependency': function () {return 'this is firstDependency';},
  'secondDepency': function () {return 'this is secondDepency';},
};
로그인 후 복사

다음은 은 종속성 주입 관리자이며 때가 되면 new됩니다.


var DI = function (dependency) {
  this.dependency = dependency;
};
로그인 후 복사

new이면 <🎜를 전달하세요. >deps를 매개변수로 사용합니다.

자, 이제 문제의 핵심인 작성해야 할 내용이 나옵니다.


DI.prototype.inject = function (func) {......};
로그인 후 복사

이 주입 주입 방법은 DI의 프로토타입에 바인딩되어 있으며 함수를 매개변수로 받습니다.

그럼 어떻게 사용하나요?


	var di = new DI(deps);

	var myDependentFunc = di.inject(function (secondDepency, firstDependency) {
	    firstDependency();
	    secondDepency();
	});

	myDependentFunc();
로그인 후 복사

먼저
inject에 의해 전달된 익명 함수를 살펴보겠습니다. 이는 요구사항을 나타내며 여기에 주입이 필요합니다.

먼저 형식 매개변수를 살펴보겠습니다.

secondDepency, firstDependency
로그인 후 복사

여기에는 두 가지 요구사항을 나타내는 두 개의 매개변수가 있으며, 때가 되면 이 두 매개변수를 분석하고 관련 모듈을 찾아보겠습니다.

자, 주입 함수 작성으로 돌아가서 첫 번째 단계에서 무엇을 해야 할까요?

먼저 inject로 전달된 함수의

toString() 형식을 가져옵니다.


	
	//第一步
	DI.prototype.inject = function (func) {
		func.toString();
	};
로그인 후 복사

그런 다음 string, 모든 형식 매개변수 찾기:


	
	//第二步
	DI.prototype.inject = function (func) {
		var args = findArgs(func.toString());
	};
로그인 후 복사

findArgs 메소드를 작성하는 방법은 무엇입니까? 정규식이나 문자열 분할 및 차단을 사용할 수 있습니다. 여기서는 후자를 사용합니다.


String.prototype.trim=function(){
  return this.replace(/(^\s*)|(\s*$)/g, "");
};

var findArgs = function(funcStr){
    var bracket1 = funcStr.indexOf("(");
    var bracket2 = funcStr.indexOf(")");
    var argsStr = funcStr.slice(bracket1+1,bracket2);
    var args = argsStr.split(",");
    return args.map(function(e){
        return e.trim();
    });
};
로그인 후 복사

정식 매개변수를 모두 찾은 후 세 번째 단계는 모듈 해시 테이블에서 해당 모듈 함수를 찾아 실제 매개변수 목록에 저장하는 것입니다.

realArgs실제 매개변수 목록을 참조합니다.


	
	//第三步
	DI.prototype.inject = function (func) {
		var args = findArgs(func.toString());
		var realArgs = [];
		for(var i=0;i<args.length;i++){
			var dep = this.dependency[args[i]];
			if(dep){
				realArgs.push(dep);
			}
		}
		//......
	};
로그인 후 복사

마지막 단계는
Inject , inject는 익명 함수를 반환합니다. 익명 함수가 실행되면 실제 매개변수 목록은 클로저를 통해 얻어지고 func에 주입됩니다.


DI.prototype.inject = function (func) {
    var args = findArgs(func.toString());
    var realArgs = [];
    for(var i=0;i<args.length;i++){
        var dep = this.dependency[args[i]];
        if(dep){
            realArgs.push(dep);
        }
    }
    return function(){
        return func.apply(null,realArgs);
    };
}
로그인 후 복사
이렇게 하면 간단한 버전의 주입 기능이 완성됩니다.

위 내용은 JavaScript: 의존성 주입에 관한 흥미로운 질문입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!


원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿