23

私はrequire.jsの使い方を学ぼうとしています。ということで、本文に以下のタグを入れたHTMLページを作りました。

<script type="text/javascript" data-main="../js/shirt" src="../js/require.js"></script>
<script type="text/javascript">
    alert("Shirt color is " + shirt.color);
</script>

../js/shirt.js には次のコードがあります

define({
    color: "black",
    size : "large"
});

この単純な値のペアを HTML で使用するにはどうすればよいですか?

4

3 に答える 3

34

Domenicの答えに加えて、モジュール内でrequire関数を使用せずにdefine関数を使用するこの方法を好むかもしれません。

// shirt.js
define({
    color: "black",
    size : "large"
});

// logger.js
define(["shirt"], function (shirt) {
    return {
        logTheShirt: function () {
            console.log("color: " + shirt.color + ", size: " + shirt.size);
        }
    };
});

// main.js
define(["shirt", "logger"],function (shirt, logger) {    
    alert("Shirt color is: " + shirt.color);
    logger.logTheShirt();
});

私はこの方法が好きですが、それは私が推測する好みの問題にすぎません。（すべてのスクリプトが同じフォルダーにあると想定しています。）

于 2012-05-08T16:07:11.433 に答える
19

ジョセフの答えに加えて、依存する他のモジュールを作成することもできますshirt（これがRequireJSの真の力の出番です）。

// shirt.js
define({
    color: "black",
    size : "large"
});

// logger.js
define(function (require) {
    var shirt = require("./shirt");

    return {
        logTheShirt: function () {
            console.log("color: " + shirt.color + ", size: " + shirt.size);
        }
    };
});

// main.js
define(function (require) {
    var shirt = require("./shirt");
    var logger = require("./logger");

    alert("Shirt color is: " + shirt.color);
    logger.logTheShirt();
});

そうすれば、HTMLは

<script data-main="../js/main" src="../js/require.js"></script>
于 2012-05-07T15:57:55.873 に答える
16

メインファイルの内容はrequire 呼び出しでなければなりません。たとえば、以下を含む values.js モジュールがあるとします。

define({
    color: "black",
    size : "large"
});

メイン ファイル (shirt.js) で、values.js を依存関係として読み込みます (同じディレクトリにあると仮定します)。

require(['values'],function(values){
    //values.color
    //values.size
});
于 2012-05-07T15:52:25.097 に答える