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 的回答之外,您可能更喜欢这种使用 define 函数而不在模块内使用 require 函数的方式。

// 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();
});

I prefer this way, but it's only a matter of taste I guess. (I'm assuming that all the scripts are on the same folder.)

于 2012-05-08T16:07:11.433 回答
19

除了 Joseph 的回答之外,您还可以编写其他依赖的模块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 回答