1

AMDを使用する人と使用しない人の両方が利用できるようにしたいモジュールを構築しています。たとえば、RequireJS で動作させたいと考えています。

require(['Module'], function (Module) {
  // do stuff with module
});

しかし、すべての依存関係を手動で挿入することでも動作するようにしたいと考えています (AMD なしでも動作することを考慮して)。

この動作が正しいことをテストするにはどうすればよいですか?

4

1 に答える 1

1

私が見つけた実用的なアプローチは、依存関係が漏洩しないように、スクリプト ファイルでモジュール パターンを使用することでした。その後、依存関係をパラメーターとして受け取り、エクスポートするモジュールを表すオブジェクトを返す内部関数を作成します。

次に、define使用可能な機能があるかどうか、およびそれにamdプロパティが設定されているかどうかを確認します。はいの場合は、define でモジュールを登録します。それ以外の場合は、グローバルとしてエクスポートします。

これは、このコードのスケルトンです。Moduleモジュールに名前が付けられ、2 つの依存関係があると仮定しdep1ますdep2。

(function (exports) {
  "use strict";
  var createModule = function (dep1, dep2) {
    var Module;
    // initialize the module
    return Module;
  }
  if (typeof define === 'function' && define.amd) {
    define(['dep1', 'dep2'], function (dep1, dep2) {
      return createModule(dep1, dep2);
    });
  } else {
    exports.Module = createModule(dep1, dep2);
  }
})(this);

テストに関しては、現在 yeoman と を使用していmochaますPhantomJS。テストを require で機能させる方法は次のとおりです。両方のケース (AMD を使用する場合と使用しない場合) をテストするために私が取ったアプローチは、2 つの別個の html テストを行うことです。まず、Gruntfile に 2 ページ目を追加する必要があります。

// headless testing through PhantomJS
mocha: {
  all: ['http://localhost:3501/index.html', 'http://localhost:3501/no-amd.html']
},

最初のケースでは、通常の require ベースのテンプレートがあります。

<script src="lib/mocha/mocha.js"></script>
<!-- assertion framework -->
<script src="lib/chai.js"></script>

<!-- here, main includes all required source dependencies, 
    including our module under test -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>

<script>
  mocha.setup({ui: 'bdd', ignoreLeaks: true});
  expect = chai.expect;
  should = chai.should();
  require(['../spec/module.spec'], function () {
    setTimeout(function () {
      require(['../runner/mocha']);
    }, 100);
  });
</script>

amd 以外をテストするには、モジュールとすべての依存関係を明示的に含める必要があります。すべてがページに表示されたら、ランナーを含めます。

<script src="lib/mocha/mocha.js"></script>
<!-- assertion framework -->
<script src="lib/chai.js"></script>

<!-- include source files here... -->
<script src="scripts/vendor/dep1.js"></script>
<script src="scripts/vendor/dep2.js"></script>
<script src="scripts/Module.js"></script>

<script>
  mocha.setup({ui: 'bdd', ignoreLeaks: true});
  expect = chai.expect;
  should = chai.should();
</script> 
<script src="spec/romania.spec.js"></script>
<script src="runner/mocha.js"></script>

2 つの異なる仕様を持つことは意味がありませんが、その仕様は AMD を使用する場合と使用しない場合でも機能するはずです。このソリューションは、モジュールで使用したものと似ています。

(function () {
  "use strict";
  var testSuite = function (Module) {
    // break the module into pieces :)
  };
  if (typeof require === 'function') {
    require(['Module'], function (Module) {
      testSuite(Module);
    });
  } else {
    // if AMD is not available, assume globals
    testSuite(Module);
  }
})();

これを行うための別の方法またはよりエレガントな方法がある場合は、ここに回答として投稿してください。より良い答えを喜んで受け入れます。:)

于 2013-01-23T13:37:50.773 に答える