Question

我有以下功能：

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

我如何define()使用require.js作为AMD（异步模块定义）兼容模块，然后在浏览器中使用它？

我正在寻找一个使用jsfiddle的示例来直接在浏览器中显示它。

Answer 1

如果没有依赖项：

<强> 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);
});

我的文件夹结构：

root（又名public）
- JS
  - bootstrap.js
  - test.js
- LIB
  - 需要
    - require.js
- 的index.html

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

<body>
    ...
    <script type="text/javascript" src="lib/require/require.js" data-main="js/bootstrap"></script>
</body>

Answer 2

在浏览器中直接定义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 example。

使用require.js创建AMD模块

2 个答案: