Question

我正在尝试学习如何使用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中使用这个简单的值对？

Answer 1

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

我更喜欢这种方式，但这只是我想的味道问题。（我假设所有脚本都在同一个文件夹中。）

Answer 2

除了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>

Answer 3

主文件should be a require call的内容。例如，您有一个包含以下内容的values.js模块：

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

在主文件（shirt.js）中，将values.js作为依赖项加载（假设它们位于同一目录中）：

require(['values'],function(values){
    //values.color
    //values.size
});

使用require.js的简单示例

3 个答案: