4

我有以下功能：

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

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

我正在寻找一个专门用于jsfiddle显示它直接在浏览器中工作的示例。

4

2 回答 2

12

如果没有依赖：

测试.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);
});

我的文件夹结构：

  • 根（又名公共）
    • js
      • 引导程序.js
      • 测试.js
    • 库
      • 要求
        • 需要.js
    • 索引.html

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

<body>
    ...
    <script type="text/javascript" src="lib/require/require.js" data-main="js/bootstrap"></script>
</body>
于 2012-12-31T16:20:41.823 回答
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 示例。

于 2013-01-02T10:49:08.127 回答