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的提案，但据我所知，它还没有超出提案级别。 Node.js 曾经有require.async已被删除。 虽然有一个实现它的包。 使用这个包看起来很像使用 AMD 风格的模块。

现在，考虑第二个片段，它是 AMD 风格的：

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

由于 RequireJS 实现了 AMD 类型的模块系统，因此上述代码适用于 RequireJS。 这个require调用是 --- 正如名称 Asynchronous Module Definition (AMD) 所建议的 --- asynchronous。 您不能依赖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调用包装它。 有一个工具可以帮助转换。

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

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

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

除了能够在 RequireJS 中使用 CommonJS 模块（如果添加了包装器），还可以在像 Node.js 这样的 CommonJS 环境中使用为 RequireJS 设计的模块。 例如，我使用node-amd-loader加载我在 Node.js 中设计为 AMD 模块的模块。

Answer 2

前一个片段遵循 CommonJS 规范，该规范概述了如何导出/传输模块以在其他模块中使用。

所以，你可以编写看起来像这样的代码

源代码/ExpressModule.js

var express = require('express');
// do initialization
exports.express = express;

然后你可以像这样使用它

src/UserExpressModule.js

var express = require('./ExpressModule');
// do something else

CommonJS 规范主要是为服务器端环境构建的，并且通过扩展在 Node.js 中使用

另一方面是 AMD，最著名的是由 RequireJS 实现的。 AMD 是为浏览器环境或客户端代码而构建的，您可以在此处使用和定义模块，例如代码中的后一个片段

示例使用可能是这样的

源代码/main.js

requirejs.config({
    baseUrl: '../vendor'
    path: '../src'
});
require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
    // do some client side computation here
});

然后你可以像这样在你的 index.html 中包含这个main.js文件

<script data-main="src/main.js" src="vendor/require.js"></script>

从本质上讲，CommonJS 和 AMD 是其模块化 Javascript 的核心规范，但针对不同的执行环境。