我想知道这些片段之间的区别是什么。
var $ = require('jquery');
var _ = require('underscore');
var BackBone = require('backbone');
和
require(['jquery','underscore','backbone'],function ($, _, BackBone){
//code goes here
})
两者对我来说都很好,但不确定它们在上述两个背后的任何目的。
我想知道这些片段之间的区别是什么。
var $ = require('jquery');
var _ = require('underscore');
var BackBone = require('backbone');
和
require(['jquery','underscore','backbone'],function ($, _, BackBone){
//code goes here
})
两者对我来说都很好,但不确定它们在上述两个背后的任何目的。
考虑第一个片段,它是 CommonJS 风格的:
var $ = require('jquery');
var _ = require('underscore');
var BackBone = require('backbone');
这些调用是同步调用:require
返回时,它返回您请求的module。CommonJSrequire
调用是同步的。有一个支持异步形式的提案,require
但据我所知,它还没有超出提案级别。Node.js 曾经有require.async
哪些已被删除。虽然有一个实现它的包。使用这个包看起来很像使用 AMD 风格的module。
现在,考虑第二个片段,它是 AMD 风格的:
require(['jquery','underscore','backbone'],function ($, _, BackBone){
//code goes here
})
由于 RequireJS 实现了 AMD 类型的module系统,因此上述代码适用于 RequireJS。此require
调用是 --- 正如名称异步module定义 (AMD) 所建议的 --- 异步。您不能依赖 的返回值require
来获取module值。您必须改用回调。该define
调用以类似的方式工作,但除了需要module之外还定义了一个module。
现在,如果您使用 RequireJS,它提供了允许在定义module时使用任一样式的工具,以便您可以像这样定义module:
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 样式module转换为与 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
调用,但有以下警告:如果在调用 synchronous 之前已经定义了modulerequire
,则 synchronousrequire
返回module的值,否则立即失败。也就是说,它不会尝试加载module。因为 RequireJS 解释了一个使用 CommonJS 风格的module定义,就像我上面展示的那样——就好像依赖项实际上列在define
参数中一样——那么这些module保证在同步调用时加载require
制作。
除了能够在 RequireJS 中使用 CommonJS module(如果添加了包装器),还可以在像 Node.js 这样的 CommonJS 环境中使用为 RequireJS 设计的module。例如,我使用node-amd-loader加载我在 Node.js 中设计为 AMD module的module。
前一个片段遵循 CommonJS 规范,该规范概述了如何导出/传输module以在其他module中使用。
所以,你可以编写看起来像这样的代码
源代码/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 是为浏览器环境或客户端代码而构建的,您可以在此处使用和定义module,例如代码中的后一个片段
示例使用可能是这样的
源代码/main.js
requirejs.config({
baseUrl: '../vendor'
path: '../src'
});
require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
// do some client side computation here
});
然后你可以main.js
像这样在你的 index.html 中包含这个文件
<script data-main="src/main.js" src="vendor/require.js"></script>
从本质上讲,CommonJS 和 AMD 是module化 Javascript 的核心规范,但针对不同的执行环境。