requirejsAan de slag met vereisten


Opmerkingen

RequireJS is een implementatie van de Asynchronous Module (AMD) API die wordt gebruikt om JavaScript-bestanden asynchroon te laden (dwz zonder te blokkeren) en afhankelijkheden tussen meerdere JavaScript-bestanden te beheren. Het bevat ook een optimalisatie-tool voor het combineren en minimaliseren van scriptbestanden voor implementatie, terwijl de ontwikkelaar logisch gescheiden code kan onderhouden.

Hallo Wereld

In het volgende voorbeeld wordt een basisinstallatie en configuratie van RequireJS getoond.

Maak een nieuw HTML-bestand met de naam index.html en plak de volgende inhoud:

<!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>
 

Maak een nieuw JS-bestand op scripts/say.js en plak de volgende inhoud:

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

Uw projectstructuur moet er als volgt uitzien:

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

Open het bestand index.html in een browser en u wordt gewaarschuwd met 'Hallo wereld'.


Uitleg

  1. Laad het scriptbestand vereiste.js.

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
     
  2. Laad de say module asynchroon uit de map met scripts . (Houd er rekening mee dat u de .js extensie niet nodig hebt wanneer u naar de module verwijst.) De geretourneerde module wordt vervolgens doorgegeven aan de opgegeven functie waar hello() wordt aangeroepen.

    <script>
       requirejs(["scripts/say"], function(say) {
           alert(say.hello());
       });
    </script>
     
  3. De say module retourneert een enkel object met één functie hello gedefinieerd.

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

Hallo wereld met geneste afhankelijkheden

In het volgende voorbeeld wordt Hello World door meerdere afhankelijkheden te demonstreren met de functie define() .

Maak een nieuw HTML-bestand met de naam index.html en plak de volgende inhoud:

<!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>
 

Maak een nieuw JS-bestand op scripts/say.js en plak de volgende inhoud:

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

Maak een nieuw JS-bestand op scripts/translations.js en plak de volgende inhoud:

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

Uw projectstructuur moet er als volgt uitzien:

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

Open het index.html bestand in een browser en de console zal het volgende uitvoeren:

Hello World
Hola Mundo
Bonjour Le Monde
 

Uitleg

  1. Laad het scriptbestand vereiste.js.

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
     
  2. Laad de say module asynchroon uit de map met scripts . (Houd er rekening mee dat u de .js extensie niet nodig hebt wanneer u naar de module verwijst.) De geretourneerde module wordt vervolgens doorgegeven aan de opgegeven functie waar hello() wordt aangeroepen.

    <script>
         requirejs(["scripts/say"], function(say) {
             console.log(say.hello("english"));
             console.log(say.hello("spanish"));
             console.log(say.hello("french"));
         });
    </script>
     
  3. De say module retourneert een enkel object met één functie hello gedefinieerd, maar in dit geval hebben we een afhankelijkheid ( scripts/translations ) gedefinieerd en zullen we de vertalingen daar vandaan halen.

    define(["scripts/translations"], function(translations){
        return {
            hello: function(language){
               return translations[language].hello + " " + translations[language].world;
            }
        };
    });
     
  4. De translations retourneert eenvoudig een object met verschillende woordvertalingen.

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

Inclusief niet-AMD-bibliotheken

Niet alle bibliotheken zijn gedefinieerd op een manier die compatibel is met AMD en de functie create define() RequireJS. De auteurs hebben dit aangepakt door een shim richtlijn op te nemen voor het configureren van die afhankelijkheden.

Een voorbeeld is het gebruik van de jQuery UI Layout Plugin. Die plug-in hangt af van jQuery. U kunt het als volgt configureren:

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

En gebruik het dan in een lay-outmodule zoals deze:

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

Met behulp van data-main Entry Point

Een enkel toegangspunt tot uw toepassing is mogelijk met RequireJS met behulp van de data-main toegewezen in de tag <script> .

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

Tijdens het laden zoekt RequireJS naar het kenmerk data-main en injecteert het hoofdscript data-main tag in de DOM met de async kenmerkenset. Het is dit bestand dat u wilt configureren voordat u uw toepassing start.

Bijvoorbeeld:

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