requirejsKomma igång med demandjs


Anmärkningar

RequireJS är en implementering av API: n Asynchronous Module (AMD) som används för att ladda javascript-filer asynkront (dvs. utan att blockera) och hantera beroenden mellan flera javascript-filer. Det innehåller också ett optimeringsverktyg för att kombinera och minimera skriptfiler för distribution samtidigt som utvecklaren kan behålla logiskt separat kod.

Hej världen

Följande exempel visar en grundläggande installation och installation av RequireJS.

Skapa en ny HTML-fil som heter index.html och klistra in följande innehåll:

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

Skapa en ny JS-fil på scripts/say.js och klistra in följande innehåll:

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

Din projektstruktur ska se ut så här:

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

Öppna filen index.html i en webbläsare och den kommer att varna dig med "Hello World".


Förklaring

  1. Ladda skriptfilen required.js.

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
     
  2. Ladda say modulen asynkront från scripts mappen. (Observera att du inte behöver .js tillägget när du refererar till modulen.) Den returnerade modulen överförs sedan till den medföljande funktionen där hello() påkallas.

    <script>
       requirejs(["scripts/say"], function(say) {
           alert(say.hello());
       });
    </script>
     
  3. Den say modulen returnerar ett enda objekt med en funktion hello definierad.

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

Hej värld med kapslade beroenden

Följande exempel expanderar över Hello World genom att visa flera beroenden med funktionen define() .

Skapa en ny HTML-fil som heter index.html och klistra in följande innehåll:

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

Skapa en ny JS-fil på scripts/say.js och klistra in följande innehåll:

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

Skapa en ny JS-fil på scripts/translations.js och klistra in följande innehåll:

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

Din projektstruktur ska se ut så här:

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

Öppna filen index.html i en webbläsare så kommer konsolen att matas ut:

Hello World
Hola Mundo
Bonjour Le Monde
 

Förklaring

  1. Ladda skriptfilen required.js.

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
     
  2. Ladda say modulen asynkront från scripts mappen. (Observera att du inte behöver .js tillägget när du refererar till modulen.) Den returnerade modulen överförs sedan till den medföljande funktionen där hello() påkallas.

    <script>
         requirejs(["scripts/say"], function(say) {
             console.log(say.hello("english"));
             console.log(say.hello("spanish"));
             console.log(say.hello("french"));
         });
    </script>
     
  3. Den say modulen returnerar ett enda objekt med en funktion hello definierad, men i det här fallet har vi definierat ett beroende ( scripts/translations ) och vi kommer att dra översättningarna därifrån.

    define(["scripts/translations"], function(translations){
        return {
            hello: function(language){
               return translations[language].hello + " " + translations[language].world;
            }
        };
    });
     
  4. translations returnerar helt enkelt ett objekt med olika ordöversättningar.

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

Inkorporera icke-AMD-bibliotek

Inte alla bibliotek definieras på ett sätt som är kompatibelt med AMD och RequireJSs define() -funktion. Författarens har tagit upp detta genom att inkludera ett shim för att konfigurera dessa beroenden.

Ett exempel är att använda jQuery UI Layout Plugin. Den plugin beror på jQuery. Du kan konfigurera det så här:

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

Och använd den sedan i en layoutmodul som denna:

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

Använda datahuvudinmatningspunkt

En enda ingång till din ansökan är möjligt med RequireJS med hjälp av data-main i <script> tag.

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

Vid belastning kommer RequireJS att leta efter data-main attributet och injicera huvudskriptmärken i DOM med async attributuppsättningen. Det är den här filen du vill göra någon konfiguration innan du startar din ansökan.

Till exempel:

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