logo标签列表

使用require.js创建一个AMD模块

requirejsamd
4

I have the following function:

function(){
    add: function(x, y){
        return console.log(x + y);
    }
}

如何使用 require.js 将此代码定义为符合 AMD（异步模块定义）规范的模块，并在浏览器中使用它？

我特别想看到一个使用 jsfiddle 的示例，以便直接在浏览器中运行。

你可能想要检查一下示例代码的语法。 - Simon Smith
语法有什么问题吗？ - Jasdeep Khalsa
不要回复说你宁愿将代码复制粘贴到jsbin.com中，例如，自己看看。 - drodsou
2个回答
12
如果没有依赖项:

test.js:

define(function(){
    return {
       add: function(x, y){
           return console.log(x + y);
       }
    };
});

具有依赖关系

define(['dep1', 'dep2'], function(dep1, dep2) {
    return {
       add: function(x, y){
           return console.log(x + y);
       }
    };
});

下面是一个使用require的例子。

要引用该模块，请使用require:

bootstrap.js：

/*global define, require */

require.config({
    baseUrl: 'js'
});
require(['test'], function (test) {
    'use strict';

    test.add(4, 5);
});

我的文件夹结构：

  • 根目录（也称为public）
    • js
      • bootstrap.js
      • test.js
    • lib
      • require
        • require.js
    • index.html

在html页面中（在jade中，类似于html）：

<body>
    ...
    <script type="text/javascript" src="lib/require/require.js" data-main="js/bootstrap"></script>
</body>
如果我在jsfiddle中尝试运行你的第一个示例，require.js会报错：Uncaught Error: Mismatched anonymous define() module？ - Jasdeep Khalsa
你的代码在jsfiddle中仍然因为引用而抛出错误。如果你看到我上面的回答，如果你直接在Web上定义一个模块，它不能是匿名的，它需要有一个名称 :) - Jasdeep Khalsa
非常奇怪，因为我在本地 Web 服务器上尝试过它（但不是在 jsFiddle 上）。 - asgoth
你的文件夹/文件结构是什么样子的？我无法在我的本地Web服务器上使其工作。 - Jasdeep Khalsa
是的，那个方法有效 :) 感谢你的清晰解释。我认为这在在线环境下不起作用的唯一原因是因为 jsfiddle 不会将示例保存为文件，而 requirejs 则需要一个文件结构来查找匿名模块。 - Jasdeep Khalsa
plnkr.co可能更容易测试这个。它允许您添加文件（而不是内联）。 - asgoth
0
当直接在浏览器中定义 AMD 模块时，该模块不能是匿名的，必须要有一个名称，否则 `require.js` 将抛出错误 `Uncaught Error: Mismatched anonymous define() module`。
如果您正在使用 r.js 优化器，则可以定义匿名 AMD 模块，r.js 将负责模块名称。这是为了避免冲突的模块名称。
// Define a module (export)
define('a', {
    add: function(x, y){
         return console.log(x + y);
     }
});

// Use the module (import)
require(['a'], function(a){
    a.add(1, 2);
});

require(['a'], function(a){
    a.add(4, 6);
});

这里是jsfiddle示例。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接