4

私は次の機能を持っています：

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

define()これを AMD (Asynchronous Module Definition) 互換モジュールとして使用require.jsし、ブラウザで使用するにはどうすればよいですか?

jsfiddleブラウザで直接動作することを示すために使用する例を特に探しています。

4

2 に答える 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 を使用します。

ブートストラップ.js:

/*global define, require */

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

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

私のフォルダ構造：

  • ルート (別名パブリック)
    • js
      • ブートストラップ.js
      • test.js
    • ライブラリ
      • 必要とする
        • require.js
    • index.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 に答える