javascript - requirejs:这些建立模块需求的方法有什么区别？

Question

下面两种建立依赖关系的方法有什么区别，它们似乎达到了完全相同的结果。对我来说，使用#1 管理依赖关系更容易:

//#1
define(function (require) {
    var $ = require('jquery');
    //$ is available here
});
//#2
define(['jquery'],function ($) {
    //$ is available here
});

使用#1 有什么缺点吗？我在构建将其依赖项包含在一个文件中的模块时遇到了一些困难。使用 #1 与此有什么关系吗？

这是这个问题: requirejs: Build settings for a common.js module along with a main.js module where the result will be only two .js files served

Answer 1

这两种配方实现了相同的结果。在内部，RequireJS 将第一个公式转换为:

define(['jquery'], function (require) {
    var $ = require('jquery');
    //$ is available here
});

它使用单个字符串参数扫描调用require 的函数，收集所有参数并将它们添加到传递给define 的依赖项列表中。因此，由于两个原因，它比第二个公式的计算成本更高。首先，RequireJS 必须使用正则表达式来扫描函数并找到对 require 的调用。其次，当您像这样加载多个模块时，必须多次调用 require。比较依赖于其他 4 个模块并使用 var x = require('x') 加载它们的模块，转换后:

define(['a', 'b', 'c', 'd'], function (require) {
    var a = require('a');
    var b = require('b');
    var c = require('c');
    var d = require('d');

    // Actual work.
});

同样的模块是这样写的:

define(['a', 'b', 'c', 'd'], function (a, b, c, d) {
    // Actual work.
});

第一个模块需要调用 require 四次才能进入实际工作部分。我不会因为性能差异而失眠，但它确实存在。

Jeremy 指出了第一个公式的局限性，但是 elsewhere在文档中，James Burke(RequireJS 的作者)对这个可能的问题给出了更详细的意见:

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.

(强调已添加。)

那些会想“哦不!我要使用优化器”的人没有看到大局。 toString() 不可用的平台可能无论如何都需要优化。

并解决您的具体问题:

Could using #1 have anything do do with that?

使用 #1 中的语法糖本身不会使优化器无法优化您的代码。我有一个超过 50 个模块的项目，混合了两种风格。我不需要做任何特别的事情来使 r.js 工作。