requirejsErste Schritte mit requestjs


Bemerkungen

RequireJS ist eine Implementierung der AMD-API (Asynchronous Module) , mit der Javascript-Dateien asynchron (dh ohne Blockierung) geladen und Abhängigkeiten zwischen mehreren Javascript-Dateien verwaltet werden. Es enthält auch ein Optimierungstool zum Kombinieren und Minimieren von Skriptdateien für die Bereitstellung, während der Entwickler logisch getrennten Code verwalten kann.

Hallo Welt

Das folgende Beispiel zeigt eine grundlegende Installation und Einrichtung von RequireJS.

Erstellen Sie eine neue HTML-Datei mit dem Namen index.html und fügen Sie den folgenden Inhalt ein:

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

Erstellen Sie eine neue JS-Datei unter scripts/say.js und fügen Sie den folgenden Inhalt ein:

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

Ihre Projektstruktur sollte so aussehen:

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

Öffnen Sie die index.html Datei in einem Browser und Sie werden mit 'Hello World' benachrichtigt.


Erläuterung

  1. Laden Sie die Scriptdatei "Require.js".

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
     
  2. Laden Sie das say Modul asynchron aus dem Ordner scripts . (Beachten Sie, dass Sie bei der Referenzierung des Moduls nicht die Erweiterung .js benötigen.) Das zurückgegebene Modul wird dann an die bereitgestellte Funktion übergeben, in der hello() aufgerufen wird.

    <script>
       requirejs(["scripts/say"], function(say) {
           alert(say.hello());
       });
    </script>
     
  3. Das say Modul gibt ein einzelnes Objekt mit einer definierten Funktion hello .

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

Hallo Welt mit verschachtelten Abhängigkeiten

Das folgende Beispiel erweitert Hello World indem mehrere Abhängigkeiten mit der Funktion define() demonstriert werden.

Erstellen Sie eine neue HTML-Datei mit dem Namen index.html und fügen Sie den folgenden Inhalt ein:

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

Erstellen Sie eine neue JS-Datei unter scripts/say.js und fügen Sie den folgenden Inhalt ein:

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

Erstellen Sie eine neue JS-Datei unter scripts/translations.js und fügen Sie den folgenden Inhalt ein:

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

Ihre Projektstruktur sollte so aussehen:

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

Öffnen Sie die Datei index.html in einem Browser und die Konsole gibt Folgendes aus:

Hello World
Hola Mundo
Bonjour Le Monde
 

Erläuterung

  1. Laden Sie die Scriptdatei "Require.js".

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
     
  2. Laden Sie das say Modul asynchron aus dem Ordner scripts . (Beachten Sie, dass Sie bei der Referenzierung des Moduls nicht die Erweiterung .js benötigen.) Das zurückgegebene Modul wird dann an die bereitgestellte Funktion übergeben, in der hello() aufgerufen wird.

    <script>
         requirejs(["scripts/say"], function(say) {
             console.log(say.hello("english"));
             console.log(say.hello("spanish"));
             console.log(say.hello("french"));
         });
    </script>
     
  3. Das say Modul gibt ein einzelnes Objekt zurück, wobei eine Funktion hello definiert ist. In diesem Fall haben wir jedoch eine Abhängigkeit definiert ( scripts/translations ), und die Übersetzungen werden von dort abgerufen.

    define(["scripts/translations"], function(translations){
        return {
            hello: function(language){
               return translations[language].hello + " " + translations[language].world;
            }
        };
    });
     
  4. Das translations einfach ein Objekt mit verschiedenen Wortübersetzungen zurück.

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

Einbindung von Nicht-AMD-Bibliotheken

Nicht alle Bibliotheken sind so definiert, dass sie mit der Funktion define() AMD und RequireJS kompatibel sind. Der Autor hat dieses shim indem er eine shim Direktive zur Konfiguration dieser Abhängigkeiten shim .

Ein Beispiel ist die Verwendung des jQuery UI Layout Plugins. Dieses Plugin hängt von jQuery ab. Sie können es so konfigurieren:

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

Und dann in einem Layout-Modul wie folgt verwenden:

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

Daten-Haupteinstiegspunkt verwenden

Mit RequireJS ist ein einziger Einstiegspunkt für Ihre Anwendung möglich, indem Sie das data-main innerhalb des <script> -Tags verwenden.

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

Beim Laden sucht RequireJS nach dem data-main Attribut und fügt das Hauptskript-Tag mit dem async Attributsatz in das DOM ein. Mit dieser Datei sollten Sie vor dem Start Ihrer Anwendung jede Konfiguration vornehmen.

Zum Beispiel:

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