为什么使用替代要求定义：定义(Function(Required){.} [英] Why use alternate requirejs define: define(function(require) { ... }

问题描述

我见过人们在Required js中使用替代的定义"语法"，而不是在Required 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>

file：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.

使用此备用"语法"的优点和缺点是什么？

推荐答案

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

因此，通常您的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，然后需要内联所需的任何模块：

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. Required语句的顺序并不重要，因为变量名是单独配对的，而不是作为数组和函数之间的映射。
3. 不需要先分配模块。它们可以分配到任何地方，只要是在实际使用模块之前。

这些只是我脑海中浮现的几个原因，我相信还有其他原因。基本上，如果您只有一个或两个依赖项，任何一种语法都可以。但是，如果您有一个复杂的模块依赖网络，则CommonJS语法可能更可取。

请注意，在RequireJS文档中，它们提到this small caveat：

并非所有浏览器都提供可用的Function.Prototype.toString()结果。截至2011年10月，PS3和更早的Opera移动浏览器不支持这一功能。由于网络/设备限制，这些浏览器更可能需要优化的模块构建，因此只需使用知道如何将这些文件转换为规范化依赖项数组形式的优化器(如RequireJS优化器)进行构建即可。

但这不是大问题：

由于不支持此toString()扫描的浏览器数量非常少，因此对所有模块使用此加糖表单是安全的，特别是如果您希望将依赖项名称与将保存其模块值的变量对齐。

这篇关于为什么使用替代要求定义：定义(Function(Required){.}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！