javascript - node - Ejemplo simple para usar require.js

requirejs github

Question

Estoy tratando de aprender a usar require.js. Así que hice una página HTML con las siguientes etiquetas en el cuerpo.

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

El ../js/shirt.js tiene el siguiente código

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

¿Cómo puedo usar este simple valor de pares en mi html?

Answer 1

Además de la respuesta de Domenic, quizás prefiera esta forma de usar la función de definir sin usar las funciones de requerimiento dentro de los módulos.

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

Prefiero esta manera, pero supongo que solo es cuestión de gustos. (Supongo que todos los scripts están en la misma carpeta).

Answer 2

Además de la respuesta de Joseph, también puede escribir otros módulos que dependen de la shirt (que es donde entra en juego el poder real de 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();
});

Entonces tu HTML solo puede ser

<script data-main="../js/main" src="../js/require.js"></script>

Answer 3

El contenido del archivo principal debe ser una llamada requerida . por ejemplo, tienes un módulo values.js que contiene:

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

en su archivo principal (shirt.js), cargue los valores.js como una dependencia (asumiendo que están en el mismo directorio):

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