Простой пример использования require.js

Я пытаюсь узнать, как использовать 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?

Ответ 1

содержимое основного файла должно быть требованием к вызову. например, у вас есть модуль values.js, содержащий:

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

в вашем основном файле (shirt.js), загрузите значения .js в качестве зависимости (при условии, что они находятся в одном каталоге):

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

Ответ 2

В дополнение к Domenic ответу, возможно, вы предпочитаете этот способ использования функции определения без использования требуемых функций внутри модулей.

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

Я предпочитаю этот путь, но это только вопрос вкуса, я думаю. (Я предполагаю, что все скрипты находятся в одной папке.)

Ответ 3

В дополнение к ответу Джозефа вы также можете написать другие модули, которые зависят от 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>