JS 반영 및 종속성 주입 사용 사례 분석

이번에는 JS Reflection과 DependencyInjection을 가지고 왔습니다. 사용 사례 분석, JS Reflection과 의존성 주입을 사용할 때 Notes는 무엇인지, 다음은 실제 사례입니다. 살펴보겠습니다.

javascript의 리플렉션을 이해하기 위해 우리는 배열을 사용하여 콜백 함수를 저장한 다음 call 또는 apply 메소드를 사용하여 적절한 순간에 콜백을 호출할 수 있다고 항상 믿어왔습니다.

먼저 두 가지 메소드를 정의합니다:

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

이 두 모듈을 사용해야 하는 또 다른 함수가 있습니다.

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

물론 우리는 종속성 주입을 사용하여 다음을 수동으로 호출하는 대신 제어권을 컴퓨터에 넘겨줄 수 있기를 바랍니다.

var doSomething = injector.resolve('router,,service', function(a, b, c) {
  expect(a().name).to.be('Router');
  expect(b).to.be('Other');
  expect(c().name).to.be('Service');
});
doSomething("Other");

그런 다음 다음과 같이 반사 메서드를 만들 수 있습니다.

var injector ={
    dependencies: {},
    register: function(key, value) {
      this.dependencies[key] = value;
    },
    resolve:function(deps, func, scope) {
      var args = [];
      for(var i=0; i<deps.length, d=deps[i]; i++) {
        if(this.dependencies[d]) {
          args.push(this.dependencies[d]);
        } else {
          throw new Error('Can\'t resolve ' + d);
        }
      }
      return function() {
        func.apply(scope || {}, args.concat(Array.prototype.slice.call(arguments, 0)));
      }
    }
};

In 위 코드에서 종속성은 콜백 함수 컬렉션을 저장하는 데 사용되고, 확인은 이를 호출하는 데 사용됩니다.

이는 비교적 성숙하고 괜찮은 아이디어로 간주됩니다.

하지만 여전히 몇 가지 문제가 있습니다.

1 Resolve를 호출할 때 deps 매개변수 목록의 순서가 일관되어야 합니다.

2 이것은 약간 믿기지 않지만 중요합니다. 호출 시에는 다시 형식 매개변수를 입력해야 하며 직접 호출할 수는 없습니다.

그래서 위의 문제를 해결하기 위해 다음과 같은 해결 방법이 제공됩니다.

var injector ={
    dependencies: {},
    register: function(key, value) {
      this.dependencies[key] = value;
    },
    resolve: function() {
      var func, deps, scope, args = [], self = this;
      if(typeof arguments[0] === 'string') {
        func = arguments[1];
        deps = arguments[0].replace(/ /g, '').split(',');
        scope = arguments[2] || {};
      } else {
        func = arguments[0];
        deps = func.toString().match(/^function\s*[^]*\(\s*([^]*\(\s*([^]*)\)/m)[1].replace(/ /g, '').split(',');
        scope = arguments[1] || {};
      }
      return function() {
        var a = Array.prototype.slice.call(arguments, 0);
        for(var i=0; i<deps.length; i++) {
          var d = deps[i];
          args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());
        }
        func.apply(scope || {}, args);
      }
    }
};

일반 규칙을 사용하여 코드를 구문 분석하고, 함수 목록 매개 변수를 구문 분석한 다음 자동으로 값을 하나씩 일치시켜 전달한 다음, 문제는 해결될 수 있습니다. 순서는 항상 동일해야 합니다. 물론 이것은 가장 인기 있는 mvvm 프레임워크인 AngularJs에서도 사용되는 접근 방식입니다.

호출 방법은 다음과 같습니다:

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

첫 번째 매개변수 뒤에 두 개의 쉼표가 있는 것을 볼 수 있습니다. 참고

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

마지막으로 스코프에 직접 주입하는 방법이 있습니다. 즉, 스코프에 직접 주입하는 방법이 있는데 위에서 언급한 것처럼 매개변수 전달 순서에는 문제가 없습니다. 매개변수를 전달할 필요가 없으며 범위에서 직접 액세스할 수 있습니다.

var injector = {
  dependencies: {},
  register: function(key, value) {
    this.dependencies[key] = value;
  },
  resolve: function(deps, func, scope) {
    var args = [];
    scope = scope || {};
    for(var i=0; i<deps.length, d=deps[i]; i++) {
      if(this.dependencies[d]) {
        scope[d] = this.dependencies[d];
      } else {
        throw new Error('Can\'t resolve ' + d);
      }
    }
    return function() {
      func.apply(scope || {}, Array.prototype.slice.call(arguments, 0));
    }
  }
}
var doSomething = injector.resolve(['service', 'router'], function(other) {
  expect(this.service().name).to.be('Service');
  expect(this.router().name).to.be('Router');
  expect(other).to.be('Other');
});
doSomething("Other");

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

WeChat 애플릿에서 인증 코드 비밀번호 입력 상자 기능을 개발하는 방법

js를 사용하여 페이지 태그 수를 계산하는 방법

위 내용은 JS 반영 및 종속성 주입 사용 사례 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!