javascript - RequireJS 和 CommonJS 的区别

Question

我想知道这些片段之间有什么区别。

var $ = require('jquery');
var _ = require('underscore');
var BackBone = require('backbone');

和

require(['jquery','underscore','backbone'],function ($, _, BackBone){
    //code goes here
})

两者对我来说都工作得很好，但不确定上述两者背后的任何目的。

Answer 1

考虑第一个片段，它采用 CommonJS 风格:

var $ = require('jquery');
var _ = require('underscore');
var BackBone = require('backbone');

这些调用是同步调用:当require返回时，它返回您请求的模块。 CommonJS require 调用是同步的。有一项建议支持异步形式的 require 但据我 can tell它尚未超出提案水平。 Node.js 曾经有 require.async ，现已删除。有一个package但这实现了它。使用这个包看起来很像使用 AMD 风格的模块。

现在，考虑第二个片段，它采用 AMD 风格:

require(['jquery','underscore','backbone'],function ($, _, BackBone){
    //code goes here
})

由于 RequireJS 实现了 AMD 类型的模块系统，因此上述代码适用于 RequireJS。此 require 调用是 --- 正如名称异步模块定义 (AMD) 所暗示的 --- 异步的。您不能依赖 require 的返回值来获取模块值。您必须改用回调。 define 调用的工作方式类似，但除了需要模块之外还定义了一个模块。

现在，如果您使用 RequireJS，它提供了允许您在定义模块时使用任一样式的工具，以便您可以定义如下模块:

define(['jquery','underscore','backbone'],function ($, _, BackBone){
    //code goes here
});

或者使用看起来更像 CommonJS 习惯用法的东西，如下所示:

define(function (require) {
    var $ = require('jquery');
    var _ = require('underscore');
    var BackBone = require('backbone');
    //code goes here
});

它使得转换 CommonJS 样式模块以与 RequireJS 一起使用变得非常容易:只需使用上面的 define 调用将其包装起来。有一个tool帮助转化。

在幕后，RequireJS 读取第二种形式的回调代码并创建依赖项列表，以便最终将其解释为:

define(['require', 'jquery','underscore','backbone'], function (require) {
    var $ = require('jquery');
    var _ = require('underscore');
    var BackBone = require('backbone');
    //code goes here
})

令人惊讶的是(考虑到 AMD 是异步的)回调中的 require 调用是同步的。这是 RequireJS 对 CommonJS 风格支持的一部分。 RequireJS 支持一种同步 require 调用，但有以下警告:如果在调用同步 require 之前已经定义了模块，则同步 require 返回模块的值，但否则它会立即失败。也就是说，它不会尝试加载模块。因为 RequireJS 解释使用 CommonJS 样式的模块定义，如我上面所示 --- 就好像依赖项实际上在 define 参数中列出一样 --- 那么这些模块保证由同步调用 require 的时间。

除了能够在 RequireJS 中使用 CommonJS 模块(如果添加了包装器)之外，还可以在 Node.js 等 CommonJS 环境中使用为 RequireJS 设计的模块。例如，我使用过 node-amd-loader加载我在 Node.js 中设计为 AMD 模块的模块。