如何为 JavaScript 模块提供有条件的 AMD 支持

Question

我正在构建一个模块，我想为使用AMD和不使用AMD的人提供该模块。例如，我想让它与 RequireJS 一起工作：

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

但我也希望它通过手动插入所有依赖项来工作（考虑到它们也可以在没有 AMD 的情况下工作）。

如何测试此行为是否正确？

Answer 1

我发现的一种工作方法是在我的脚本文件中使用模块模式，这样就不会有泄漏的依赖项。之后，我构建一个内部函数，该函数将我的依赖项作为参数接收，并返回表示我要导出的模块的对象。

然后，我检查是否有可用的define函数，以及它是否设置了amd属性。如果是，则我使用 define 注册模块，否则将其导出为全局。

这是用于此的代码的框架。我们假设该模块名为 Module，它有两个依赖项，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）的方法是进行两个单独的html测试。首先，您需要在 Gruntfile 中添加第二页：

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

在第一种情况下，有基于要求的常规模板：

<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>

拥有两个不同的规格没有任何意义，但该规格也应该适用于 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);
  }
})();

如果您有不同或更优雅的方法，请在此处发布它们作为答案。我很乐意接受更好的答案。:)