requirejsCommencer avec requirejs


Remarques

RequireJS est une implémentation de l' API AMD (Asynchronous Module) utilisée pour charger des fichiers JavaScript de manière asynchrone (c'est-à-dire sans blocage) et gérer les dépendances entre plusieurs fichiers javascript. Il comprend également un outil d'optimisation permettant de combiner et de minimiser les fichiers de script en vue de leur déploiement, tout en permettant au développeur de conserver un code logiquement distinct.

Bonjour le monde

L'exemple suivant montrera une installation de base et la configuration de RequireJS.

Créez un nouveau fichier HTML appelé index.html et collez le contenu suivant:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello RequireJS</title>
    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
    <!-- place content here --->
    <script>
        requirejs(["scripts/say"], function(say) {
            alert(say.hello());
        });
    </script>
</body>
 

Créez un nouveau fichier JS dans scripts/say.js et collez le contenu suivant:

define([], function(){
    return {
        hello: function(){
           return "Hello World";
        }
    };
});
 

Votre structure de projet devrait ressembler à ceci:

- project
    - index.html
    - scripts
        - say.js
 

Ouvrez le fichier index.html dans un navigateur et il vous alertera avec 'Hello World'.


Explication

  1. Chargez le fichier de script require.js.

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
     
  2. Chargez le module say manière asynchrone à partir du dossier scripts . (Notez que vous n'avez pas besoin de l'extension .js lors du référencement du module.) Le module renvoyé est ensuite transmis à la fonction fournie où hello() est appelé.

    <script>
       requirejs(["scripts/say"], function(say) {
           alert(say.hello());
       });
    </script>
     
  3. Le module say renvoie un objet unique avec une fonction hello définie.

    define([], function(){
        return {
            hello: function(){
               return "Hello World";
            }
        };
    });
     

Bonjour tout le monde avec des dépendances imbriquées

L'exemple suivant développe Hello World en démontrant plusieurs dépendances à l'aide de la fonction define() .

Créez un nouveau fichier HTML appelé index.html et collez le contenu suivant:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello RequireJS</title>
    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
    <!-- place content here --->
    <script>
        requirejs(["scripts/say"], function(say) {
            console.log(say.hello("english"));
            console.log(say.hello("spanish"));
            console.log(say.hello("french"));
        });
    </script>
</body>
 

Créez un nouveau fichier JS dans scripts/say.js et collez le contenu suivant:

define(["scripts/translations"], function(translations){
    return {
        hello: function(language){
           return translations[language].hello + " " + translations[language].world;
        }
    };
});
 

Créez un nouveau fichier JS dans scripts/translations.js et collez le contenu suivant:

define([], function(){
    return {
        "english": {
            hello: "Hello",
            world: "World"
        },
        "spanish": {
            hello: "Hola",
            world: "Mundo"
        },
        "french": {
            hello: "Bonjour",
            world: "Le Monde"
        }
    };
});
 

Votre structure de projet devrait ressembler à ceci:

- project
    - index.html
    - scripts
        - say.js
        - translations.js
 

Ouvrez le fichier index.html dans un navigateur et la console affichera:

Hello World
Hola Mundo
Bonjour Le Monde
 

Explication

  1. Chargez le fichier de script require.js.

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
     
  2. Chargez le module say manière asynchrone à partir du dossier scripts . (Notez que vous n'avez pas besoin de l'extension .js lors du référencement du module.) Le module renvoyé est ensuite transmis à la fonction fournie où hello() est appelé.

    <script>
         requirejs(["scripts/say"], function(say) {
             console.log(say.hello("english"));
             console.log(say.hello("spanish"));
             console.log(say.hello("french"));
         });
    </script>
     
  3. Le module say retourne un objet unique avec une fonction hello définie, mais dans ce cas nous avons défini une dépendance ( scripts/translations ) et nous allons extraire les traductions à partir de là.

    define(["scripts/translations"], function(translations){
        return {
            hello: function(language){
               return translations[language].hello + " " + translations[language].world;
            }
        };
    });
     
  4. Le module de translations renvoie simplement un objet avec différentes traductions de mots.

    define([], function(){
        return {
            "english": {
                hello: "Hello",
                world: "World"
            },
            "spanish": {
                hello: "Hola",
                world: "Mundo"
            },
            "french": {
                hello: "Bonjour",
                world: "Le Monde"
            }
        };
    });
     

Intégration de bibliothèques non AMD

Toutes les bibliothèques ne sont pas définies de manière compatible avec AMD et la fonction define() de RequireJS. L'auteur a abordé cette question en incluant une directive shim pour configurer ces dépendances.

Un exemple utilise le plugin jQuery UI Layout. Ce plugin dépend de jQuery. Vous pouvez le configurer comme ceci:

requirejs.config({
    paths: {
        'jquery': '../path/to/jquery.min',
        'jquery.layout': '../path/to/jquery.layout.min'
    },
    shim: {
        'jquery.layout': {
            deps: ['jquery']
        }
    }
});
 

Et puis l'utiliser dans un module de mise en page comme celui-ci:

define(['jquery', 'jquery.layout'], function ($, layout) {
    $('body').layout();
});
 

Utilisation du point d'entrée principal de données

Un seul point d'entrée vers votre application est possible avec RequireJS en utilisant l'attribut data-main dans la <script> .

<script type="text/javascript" data-main="scripts/main" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
 

Sur chargement, RequireJS recherchera l'attribut data-main et injectera la balise script principale dans le DOM avec l'attribut async . C'est ce fichier que vous souhaitez configurer avant de lancer votre application.

Par exemple:

// contents of scripts/main.js
require.config({
    waitSeconds: 10,
    paths: {
        jquery: 'libs/jquery-1.4.2.min'
    }
});

requirejs(["jquery", "libs/say"], function($, say) {
    var $body = $('body');
    $body.append( $('<p/>').text(say.hello("english")) );
    $body.append( $('<p/>').text(say.hello("spanish")) );
    $body.append( $('<p/>').text(say.hello("french")) );
});