web-dev-qa-db-fra.com

exemple simple d'utilisation de require.js

J'essaie d'apprendre à utiliser require.js. J'ai donc fait une page HTML avec les balises suivantes dans le corps.

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

Le ../js/shirt.js a le code suivant

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

Comment puis-je utiliser ces paires de valeurs simples dans mon html?

javascriptrequirejs
22
Ibrahim

le contenu du fichier principal devrait être un appel obligatoire . par exemple, vous avez un module values.js contenant:

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

dans votre fichier principal (shirt.js), chargez values.js en tant que dépendance (en supposant qu'ils se trouvent dans le même répertoire):

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

En plus de la réponse de Domenic, vous préférez peut-être cette façon d'utiliser la fonction define sans utiliser les fonctions require dans les modules.

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

Je préfère cette façon, mais ce n'est qu'une question de goût, je suppose. (Je suppose que tous les scripts se trouvent dans le même dossier.)

33
Gabriel Jürgens

En plus de la réponse de Joseph, vous pouvez également écrire d'autres modules qui dépendent de shirt (c'est là que la vraie puissance de RequireJS entre en jeu).

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

Ensuite, votre code HTML peut simplement être

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