requirejs - 为什么使用备用 requirejs 定义 : define(function(require) { . .. }

Question

我见过人们在 require js 中使用替代的定义“语法”，而不是 require js 文档或许多教程中描述的语法。

通常定义“语法”:

define(['module/first'], function (firstModule) {
   //Module code with a dependency on module/first goes here.
});

备用定义“语法”:

<script data-main="app/config" src="assets/js/libs/require.js"></script>

文件:config.js:

require.config({
   paths: {
      jquery:      '../assets/js/libs/jquery'
   }
});
require(['app']);

文件:app.js:

define(function(require) {
     var FirstModule = require('modules/first');
     //Module code with a dependency on module/first goes here.

使用这种替代“语法”的优点和缺点是什么？

Answer 1

我认为你的解释有点误导:在这两种情况下，你都会有一个顶级 require 调用，其中 data-main 属性指定要踢的文件-启动需要不同模块的过程。

因此，通常您会在 HTML 中包含以下内容:

<script data-main="app/config" src="assets/js/libs/require.js"></script>

然后，在这两种情况下，您都会有一个文件 app/config 来设置您的配置(尽管您可以直接在 HTML 中执行此操作)，更重要的是调用您的模块上的require:

require.config({
  paths: {
    jquery:      '../assets/js/libs/jquery'
  }
});
require(['app']);

现在，当我们开始定义具有这些样式不同的依赖项的模块时。在 amd 风格中，您将模块名称(路径)作为数组传递，以及采用相同数量参数的函数:

app.js

define(['module/first', 'module/second', 'module/third'], function (firstModule, secondModule, thirdModule) {
  // use firstModule, secondModule, thirdModule here
});

在简化的 CommonJS 语法中，您只需将 require 传递到 define 中，然后 require 内联所需的任何模块:

app.js

define(function(require) {
  var firstModule = require('modules/first');
  var secondModule = require('modules/second');
  var thirdModule = require('modules/third');
  // use firstModule, secondModule, thirdModule here

}

回到你原来的问题，CommonJS 风格相对于 amd 风格的优势应该很明显。

一方面，使用传统语法，如果需要很多模块，很容易错误地将模块分配给错误的变量名称。考虑这种常见情况:

define(['jquery', 'underscore', 'backbone', 'modules/first', 'modules/second', 'modules/third', 'i18n', 'someOtherModule'], function ($, _, Backbone, first, second, third, I18n, someOtherModule) {
  // ...
});

马上，你可以看到，当我们向这个列表中添加一个新模块时，我们必须非常小心，相应的新函数参数出现在正确的位置，否则我们可以将 jQuery 分配给 Backbone 等。在某些情况下，这可能会产生非常微妙的错误，很难追踪。

现在考虑 CommonJS 语法:

define(function(require) {
  var $ = require('jquery');
  var _ = require('underscore');
  var Backbone = require('backbone');
  var firstModule = require('modules/first');
  var secondModule = require('modules/second');
  var thirdModule = require('modules/third');
  var I18n = require('i18n');
  var someOtherModule = require('someOtherModule');
  // ...
}

请注意:

1. 模块与变量名的配对非常清晰。
2. require 语句的顺序并不重要，因为变量名称是单独配对的，而不是作为数组和函数之间的映射。
3. 不需要先分配模块。它们可以在任何地方分配，只要在模块实际使用之前即可。

这些只是我想到的几个原因，我确信还有其他原因。基本上，如果您只有一个或两个依赖项，则任何一种语法都可以。但如果您有一个复杂的模块依赖关系网络，那么 CommonJS 语法可能更合适。

请注意，在 RequireJS 文档中，他们提到 this small caveat :

Not all browsers give a usable Function.prototype.toString() results. As of October 2011, the PS 3 and older Opera Mobile browsers do not. Those browsers are more likely to need an optimized build of the modules for network/device limitations, so just do a build with an optimizer that knows how to convert these files to the normalized dependency array form, like the RequireJS optimizer.

但这不是一个主要问题:

Since the number of browsers that cannot support this toString() scanning is very small, it is safe to use this sugared forms for all your modules, particularly if you like to line up the dependency names with the variables that will hold their module values.