JS リフレクションと依存関係注入のユースケース分析

今回は、JS リフレクションと依存性インジェクションユースケース分析について説明します。JS リフレクションと依存性インジェクションを使用する際の注意事項は何ですか。以下は実際的なケースです。見てみましょう。

JavaScriptのリフレクションを理解するには、配列を使用してコールバック関数を保存し、適切なタイミングでcallまたはapplyメソッドを使用してコールバックを呼び出すことができると常に考えてきました。は次のとおりです:

まず 2 つのメソッドを定義します:

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

これら 2 つのモジュールを使用する必要がある別の関数があります。

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上記のコードでは、依存関係を使用してコールバック関数のコレクションを保存し、resolve を使用してそれを呼び出します。

これは比較的成熟した、問題ないアイデアであると考えられます。

しかし、まだいくつかの問題があります:

1solve を呼び出すとき、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);
      }
    }
};

通常のルールを使用してコードを解析し、関数リストのパラメータを解析し、値を 1 つずつ自動的に照合して渡します。もちろん、これは最も注目されている mvvm フレームワーク

AngularJs によって採用されているアプローチでもあります。

呼び出しは次のようになります:

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

最初のパラメータの後にカンマが 2 つあることに気づくかもしれません - 注

これはタイプミスではありません。 null 値は実際には「Other」パラメータ (プレースホルダ) を表します。これは、引数の順序を制御する方法を示しています。

最後に、スコープに直接注入する別の方法があります。つまり、スコープに直接注入されますが、上記のようにパラメータを渡す順序は問題ありません。パラメーターを渡す必要はなく、到着スコープから直接アクセスできます。

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 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

WeChat アプレットで確認コード パスワード入力ボックス機能を開発する方法

js を使用してページ タグの数をカウントする方法

以上がJS リフレクションと依存関係注入のユースケース分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。