집 > 기사 > 웹 프론트엔드 > JS 반영 및 종속성 주입 사용 사례 분석

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

php中世界最好的语言원래의: 2018-05-31 14:37:521558검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!