RequireJS - Kurzanleitung

RequireJS ist eine JavaScript-Bibliothek und ein Dateilader, die die Abhängigkeiten zwischen JavaScript-Dateien und in der modularen Programmierung verwalten. Es hilft auch, die Geschwindigkeit und Qualität des Codes zu verbessern.

RequireJS wurde von David Mark entwickelt und seine ursprüngliche Version v1.0.0 wurde 2009 veröffentlicht. Es ist Open Source und Version 2.3.3 ist die jüngste stabile Version.

Warum RequireJS verwenden?

Es ist eine Open-Source-JavaScript-Bibliothek unter der MIT-Lizenz.
Es bietet asynchrones Laden von Modulen.
Es kann verschachtelte Abhängigkeiten laden.
Wenn Sie viele kleine Dateien haben, müssen Sie sich nicht um die Reihenfolge der Abhängigkeiten kümmern.
Es bietet Unterstützung für Plugins und lädt mehr als eine JavaScript-Datei.

Funktionen von RequireJS

Es verwaltet die Abhängigkeiten zwischen JavaScript-Dateien und verbessert die Geschwindigkeit und Qualität des Codes.
Es kombiniert und minimiert die Module in einem Skript für eine optimierte Erfahrung.
Es reduziert die Codekomplexität in großen Anwendungen.
Zum Zeitpunkt der Kompilierung werden verschiedene JavaScript-Dateien aus verschiedenen Modulen erfasst.
Es ermöglicht ein einfaches Debuggen, da die Dateien aus einfachen Skript-Tags geladen werden.

In diesem Kapitel erfahren Sie, wie Sie die Umgebung für RequireJS einrichten. Dazu müssen Sie die neueste Version der RequireJS-Bibliothek herunterladen. Sie können entweder die minimierte Version oder die detaillierte Version herunterladen .

Nach dem Herunterladen müssen wir die require.js Die Datei in Ihrem libs-Ordner und die Struktur Ihres Projekts sollten wie folgt aussehen:

projectname/
|--index.html
|--libs/
   |---main.js
   |---require.js
   |---helper/
      |----util.js

Wir müssen eine HTML-Datei als definieren index.html Dabei wird RequireJS wie unten gezeigt geladen.

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

Beachten Sie das nur require.js mit einem RequireJS-Aufruf ist im Skript-Tag enthalten, um das Skript zu laden.

RequireJS im Knoten

Es gibt zwei Möglichkeiten, den Knotenadapter zu erhalten.

npm - Sie können die neueste Version von requirejs über die Eingabeaufforderung wie unten gezeigt installieren.

npm install requirejs

Herunterladen r.js - Sie können die herunterladen r.jsDatei von der Download- Seite und Quelle vonr.js Repository- Seite.

RequireJS kann initialisiert werden, indem die Hauptkonfiguration in der HTML-Vorlage über das Datenhauptattribut übergeben wird. RequireJS verwendet es, um zu wissen, welches Modul in Ihre Anwendung geladen werden soll.

Zum Beispiel -

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

Um die Datei Require.js einzuschließen, müssen Sie das Skript-Tag in die HTML-Datei einfügen. Fügen Sie innerhalb des Skript-Tags das hinzudata-mainAttribut zum Laden des Moduls. Dies kann als Haupteinstiegspunkt für Ihre Anwendung verwendet werden. Das Skript / main ist eine JavaScript-Hauptdatei einer Anwendung, die die RequireJS-Konfiguration enthält.

Einstellmöglichkeiten

Im Folgenden sind die Konfigurationsoptionen aufgeführt, die beim Laden des ersten Anwendungsmoduls festgelegt werden können:

baseUrl- Dies ist ein Routenpfad für alle Module, die über RequireJS geladen werden. Die baseUrl wird durch eine Zeichenfolge angezeigt, die mit "slash (/)" beginnt, ein Protokoll enthält und mit der Erweiterung ".js" endet. Wenn es keine baseUrl angegeben, verwendet RequireJS die Daten-Haupt- Attribut Pfad als baseUrl.
paths- Es gibt die Pfadzuordnungen für Module an, die relativ zur baseUrl sind. Beim Zuordnen des Modulnamens wird einem Pfad automatisch die Erweiterung .js hinzugefügt.
shim - Es ermöglicht die Verwendung von Nicht-AMD-Bibliotheken mit RequireJS, indem ihre Abhängigkeiten konfiguriert und ihre globalen Werte exportiert werden.
map - Für das angegebene Modul verwendet eine Anwendung dasselbe Modul unterschiedlicher Versionen für unterschiedliche Ziele, indem sie ihre IDs teilt, um denselben Code für unterschiedliche Bedingungen zu verwenden.
config- Er stellt die Konfiguration eines Moduls durch die Verwendung von Konfigurationsoption , und dies kann durch Verwendung der speziellen Abhängigkeit „Modul“ und ruft seine erfolgenmodule.config() Funktion.
urlArgs- Die Abfragezeichenfolgenargumente werden verwendet, um alle Ressourcen abzurufen, die mit RequireJS geladen werden. Es wird für das Cache-Busting verwendet, wenn der Browser oder Server nicht ordnungsgemäß konfiguriert ist.
waitSeconds- Gibt die Anzahl der Sekunden an, die gewartet werden muss, bevor das Laden des Skripts ausgelöst wird. Der Standardwert ist "7" Sekunden und "0" deaktiviert das Timeout.
packages - Es enthält die CommonJS-Pakete zum Konfigurieren der Lademodule.
context - Es gibt den Namen für das Laden des Kontexts an, mit dem verschiedene Module auf einer Seite geladen werden können.
deps - Es handelt sich um ein Array von Abhängigkeiten, das erforderlich ist, wenn Require als Konfigurationsobjekt angegeben wird, bevor RequireJS geladen wird.
callback - Es führt eine Funktion nach dem Laden der Abhängigkeiten aus und ist erforderlich, wenn Require als Konfigurationsobjekt angegeben ist, bevor RequireJS geladen wird.
xhtml - Es wird verwendet, um die Skriptelemente mithilfe von zu erstellen document.createElementNS()Methode, wenn diese Option auf true gesetzt ist .
scriptType- Definiert den Wert für das im Dokument verwendete Skripttypattribut. Der Standardtyp ist "Text / Javascript".
skipDataMain- Beim Scannen des Moduls wird das Scannen der Datenhauptattribute übersprungen, wenn diese Option auf true gesetzt ist .

Ein Modul in RequireJS ist ein Objekt mit Gültigkeitsbereich und im globalen Namespace nicht verfügbar. Daher wird der globale Namespace nicht verschmutzt. Mit der RequireJS-Syntax können Module schneller geladen werden, ohne sich um die Reihenfolge der Abhängigkeiten kümmern zu müssen. Sie können mehrere Versionen desselben Moduls auf derselben Seite laden.

Module definieren

Das Modul wird mit dem definiert define()Funktion; Die gleiche Funktion wird auch zum Laden des Moduls verwendet.

Einfache Name / Wert-Paare

Wenn das Modul nur eine Sammlung von Name- und Wertepaaren ist, können Sie die folgende Syntax verwenden:

define({
   state: "karnataka",
   city: "bangalore"
});

Funktionen definieren

Ein Modul kann auch eine Funktion für Frameworks verwenden, ohne Abhängigkeiten zu haben. Dies kann mithilfe der folgenden Syntax erfolgen:

define(function () {
   
   //Do setup work here
   return {
      state: "karnataka",
      city: "bangalore"
   }
});

Funktionen mit Abhängigkeiten definieren

Wenn das Modul Abhängigkeiten aufweist, wird die Platzierung des ersten Arguments (Array von Abhängigkeitsnamen), des zweiten Arguments (Definitionsfunktion) und des Rückgabeobjekts, das das Modul definiert, in der folgenden Syntax angezeigt:

define(["./mnc", "./startup"], 
   function(mnc, startup) {
        
      return {
         state: "karnataka",
         city: "bangalore",
      
         addCompany: function() {
            mnc.decrement(this);
            startup.add(this);
         }
      
      }
   }
);

Modul als Funktion definieren

Es ist nicht zwingend erforderlich, dass ein Modul nur Objekte zurückgibt. Es kann auch ein gültiger Wert einer Funktion zurückgegeben werden. Die folgende Syntax wird verwendet, um ein Modul als Funktion zu definieren:

define(["./mnc", "./startup"],
   function(mnc, startup) {
       
      return function(title) {
         return title ? (window.title = title) :
         startup.storeName + ' ' + mnc.name;
      }
      
   }
);

Ein Modul mit einem Namen definieren

In einigen Fällen müssen Sie möglicherweise einen Namen für das Modul als erstes Argument angeben define(). Dies kann mithilfe der folgenden Syntax erfolgen:

define("js2/title",
   ["js1/mnc", "js1/startup"],
   
   function(mnc, startup) {
      //Define js2/title object in here.
   }
   
);

Laden des Moduls

Die Funktion define () kann zum Laden der Module verwendet werden (Modul kann ein Objekt, eine Funktion, eine Klasse oder ein Code sein, der nach dem Laden eines Moduls ausgeführt wird). Sie können verschiedene Versionen desselben Moduls auf derselben Seite laden. Die verschiedenen Versionen können in derselben Reihenfolge analysiert werden, auch wenn sie in einer anderen Reihenfolge geladen werden.

Syntax

define(['module1', 'module2'], function (module1, module2) {
   //define the module value by returning a value
   return function () {};
});

Sie können eine Liste von Modulnamen übergeben, wenn Sie ein Modul definieren, und RequireJS kann verwendet werden, um diese Module vor dem Ausführen des Moduls abzurufen. Diese Module können als Parameter der übergeben werdendefinition function.

Beispiel

Das folgende Beispiel zeigt die Verwendung der Funktion define () beim Laden der Module. Erstellen Sie eine HTML-Datei mit dem Namen index.html und fügen Sie den folgenden Code ein:

<!DOCTYPE html>
<html>
   <head>
      <title>Define() Function</title>
      <script data-main = "main" src = "require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS Define() Function Example</h2>
   </body>
</html>

Ein ... kreieren jsDatei mit dem Namen main.js und fügen Sie den folgenden Code hinzu -

define(function (require) {
   var myteam = require("./team");
   var mylogger = require("./player");
   alert("Player Name : " + myteam.player);
   mylogger.myfunc();
});

Erstellen Sie jetzt zwei weitere jsDateien mit den Namen team.js und player.js und platzieren Sie den folgenden Code -

team.js

define({
   player: "Sachin Tendulkar",
   team : "India"
});

player.js

define(function (require) {
   var myteam = require("./team");

   return {
      myfunc: function () {
         document.write("Name: " + myteam.player + ", Country: " + myteam.team);
      }
   };
});

Ausgabe

Öffnen Sie die HTML-Datei in einem Browser. Sie erhalten eine Ausgabe wie im folgenden Screenshot -

Klicken Sie auf die Schaltfläche "OK", Sie erhalten eine weitere Ausgabe von Modulen -

In diesem Kapitel werden wir die Optimierung in RequireJS diskutieren. Der Optimierer in RequireJS weist die folgenden Eigenschaften auf:

Kombiniert Skriptdateien mit Hilfe von UglifyJS für die Standardverwendung oder Closure Compiler für die Java-Verwendung
Kombiniert CSS-Dateien miteinander.

Der Optimierer ist Bestandteil der r.jsAdapter für Node und Nashorn . Es wurde entwickelt, um Teil eines Build-Prozesses zu sein und nicht für den Entwicklungsprozess.

Beispiel

Nach dem Herunterladen der r.js in Ihren Projektordner sollte die Struktur des Ordners wie folgt aussehen:

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

Ihre HTML-Datei sieht wie folgt aus:

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

Ihre main.js- Datei sieht wie folgt aus:

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

Ihre main.css- Datei sieht wie folgt aus:

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

Grundeinstellung des Optimierers

Sie können die Befehlszeilenargumente oder Profilerstellungseigenschaften zum Festlegen des Projekts verwenden. Beide sind untereinander austauschbar.

Es folgt die Syntax für die Befehlszeile -

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

Es folgt die Syntax zum Erstellen eines Profils -

({
   baseUrl: ".",
  
   paths: {
      jquery: "content/path/jquery"
   },
   
   name: "main",
   out: "main-built.js"
})

Danach können Sie den Namen des Build-Profils in der Befehlszeile an den Optimierer weitergeben, wie unten gezeigt -

node r.js -o build.js

Die Syntax der Befehlszeilenargumente weist einige Mängel auf. Eine kombinierte Verwendung beider Befehlszeilenargumente oder Profilbildungseigenschaften kann diese Mängel beheben.

Optimieren einer einzelnen JS-Datei

Um eine einzelne JS-Datei zu optimieren, müssen Sie eine JS-Datei erstellen, die den Inhalt aller Abhängigkeiten enthält. Ihre Datei sollte wie folgt aussehen -

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

Jetzt können Sie die Datei main.js erstellen, die alle Abhängigkeiten für die App enthält. Diese Datei wird in einer HTML-Datei verwendet, um alle JS-Dateien mit einer Anforderung zu laden. Beachten Sie, dass erstellte Dateien nicht im Quellcodeverzeichnis vorhanden sein dürfen. Die Dateien sollten sich in der Kopie des Projekts befinden.

Verwendung von CDN-Ressourcen

Das Optimierungsprogramm lädt keine Skripte über die Netzwerkressourcen / CDN (Content Delivery Network). Wenn die Skripte mithilfe eines CDN geladen werden müssen, müssen Sie diese Dateien einem Modulnamen zuordnen und die Dateien in Ihren lokalen Dateipfad herunterladen. Sie können das spezielle Wort "leer" in der Pfadkonfiguration des Build-Profils verwenden, wie in der folgenden Syntax gezeigt:

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

Die Hauptdatei sieht wie folgt aus:

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

Einzelne CSS-Datei optimieren

CSS-Dateien werden mithilfe der folgenden Parameter direkt in der Befehlszeile optimiert, wie unten gezeigt -

node ../../r.js -o cssIn = main.css out = main-built.css

CSS-Dateien können auch in einer Build-Datei mit denselben Eigenschaften wie unten gezeigt optimiert werden.

...
cssIn:"main.css",
out:"main-built.css"
...

Beide oben genannten Methoden sind zulässig und erstellen eine Datei mit dem Namen projectfolder / css / mainbuild.css . In dieser Datei werden der Inhalt von main.css, die URL () -Pfade ordnungsgemäß angepasst und Kommentare entfernt.

Gesamtes Projekt optimieren

Der Optimierer verwendet das Build-Profil, um alle zu optimieren css und jsDateien. Im folgenden Beispiel wird die Datei build.js erstellt.

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

Die Datei build.js weist RequireJS an, alle App-Ordner (Parameter appDir) in den erstellten Ausgabeordner (Parameter dir) zu kopieren und alle Optimierungen auf die Dateien im Ausgabeordner anzuwenden. Führen Sie den folgenden Befehl aus, um ein Profil im App-Ordner zu erstellen:

node r.js -o build.js

RequireJS verwendet jQuery als weitere Abhängigkeit und registriert sich als benannte Modul- Abfrage in Kleinbuchstaben. Registriert sich standardmäßig auch mithilfe der globalen Funktionen $ und jQuery, während AMD / RequireJS verwendet wird.

Laden von jQuery

require(['jquery'], function($) {
   //code here
}

Sie können mehrere und benutzerdefinierte Bibliotheken zusammen mit der jQuery laden, wie unten gezeigt -

require(['custom_library_path','jquery'], function(load_library,$) {
   //related code of $ and load_library
});

Die folgende Tabelle zeigt die Verwendung von jQuery mit RequireJS zum Angeben ihrer Abhängigkeiten.

Sr.Nr.	Typen & Beschreibung
1	Verwenden der Shim-Konfiguration jQuery verwendet die Shim-Konfiguration, um die Abhängigkeiten für jQuery-Plugins zu definieren.
2	Laden von jQuery von CDN jQuery verwendet CDN, um die Abhängigkeiten für jQuery-Plugins zu definieren.

Der Knotenadapter kann zusammen mit der Implementierung des Suchpfads Require und Node verwendet werden. Wenn RequireJS keine Modulkonfiguration verwendet, können Sie die vorhandenen knotenbasierten Module verwenden, ohne sie zu ändern. Sie können die Knotenpakete mit dem Befehl npm im Verzeichnis node_modules des Projekts installieren .

Der Knoten lädt Module nur von der lokalen Festplatte, und Konfigurationsoptionen wie Zuordnung, Pakete, Pfade usw. werden nur angewendet, wenn das Modul von RequireJS geladen wird.

Knoten installieren

Sie können den Knotenadapter mit dem folgenden Befehl installieren, mit dem die neuesten Release-Dateien installiert werden:

npm install requirejs

Sie können den Knoten auch auf folgende Arten installieren:

Sie können die r.js von diesem Link herunterladen und in Ihrem Projektordner aufbewahren.
Besorgen Sie sich die Quelle von r.js Repository oder installieren Sie es durch Knoten dist.js .

Verwendung des Knotens

Um den Knoten verwenden zu können, müssen Sie require ('requirejs') haben und die require- Funktion in der Konfiguration in die Datei main.js der obersten Ebene verschieben.

Zum Beispiel -

var requirejs = require('requirejs');

requirejs.config({
   //load the mode modules to top level JS file 
   //by passing the top level main.js require function to requirejs
   nodeRequire: require
});

requirejs(['name1', 'name2'],
   function (name1, name2) {
      //by using requirejs config, name1 and name2 are loaded
      //node's require loads the module, if they did not find these
   }
);

Erstellen von Knotenmodulen mit AMD oder RequireJS

Sie können das Codemodul mit RequireJS und Node arbeiten lassen, ohne dass Benutzer der Bibliothek erforderlich sind, und dann das amdefine- Paket verwenden, um diese Arbeit auszuführen .

Zum Beispiel -

if (typeof define !== 'function') {
   var define = require('amdefine')(module);
}

define(function(require) {
   var myval = require('dependency');

   //The returned value from the function can be used 
   //as module which is visible to Node.
   return function () {};
});

Optimierer als Knotenmodul

Das Knotenmodul verwendet den RequireJS-Optimierer als Optimierungsmethode , indem der Funktionsaufruf anstelle des Befehlszeilentools verwendet wird.

Zum Beispiel -

var requirejs = require('requirejs');

var config = {
   baseUrl: '../directory/scripts',
   name: 'main',
   out: '../build/main-built.js'
};

requirejs.optimize(config, function (buildResponse) {

   //The text output of the modules specify by using buildResponse 
   //and loads the built file for the contents
   //get the optimized file contents by using config.out 
   var contents = fs.readFileSync(config.out, 'utf8');
}, function(err) {
   //code for optimization err callback
});

Dojo ist ein JavaScript-Toolkit, das auf der AMD-Modularchitektur basiert und zusätzliche Module bereitstellt, um der Webanwendung zusätzliche Funktionen hinzuzufügen. Außerdem spart es Zeit und Skalierbarkeit bei der Entwicklung von Webanwendungen.

Beispiel

Das folgende Beispiel zeigt die Verwendung von Dojo zusammen mit RequireJS. Erstellen Sie eine HTML-Datei mit dem Namen index.html und fügen Sie den folgenden Code ein:

<!DOCTYPE html>
<html>
   <head>
      <title>RequireJS Dojo</title>
      <script data-main="app" src="lib/require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS  Dojo</h2>
      <p>
         Hello... ...
      </p>
   </body>
</html>

Ein ... kreieren jsDatei mit dem Namen app.js und fügen Sie den folgenden Code hinzu -

require ({
   //You can configure loading modules from the lib directory
   baseUrl: 'lib',
   
   paths: {
      //mapping of package
      dojo: 'http://sfoster.dojotoolkit.org/dojobox/1.7-branch/dojo'
   }
   
}, [
      //modules which we are using here
      'dojo/dom'
   ], function(dom) { 
   
      //using the 'byId' method from dom module
      var mydojo = dom.byId('dojo_val')
      mydojo.innerHTML = "The text is displaying via dojo/dom";   
   }
);

Ausgabe

Öffnen Sie die HTML-Datei in einem Browser. Sie erhalten folgende Ausgabe:

Das Modulformat wird von CommonJS definiert. Es wird definiert, ohne dass Browser eine andere Option für andere JavaScript-Umgebungen bietet. Daher empfiehlt die CommonJS-Spezifikation Transportformate und eine asynchrone Anforderung . Sie können das traditionelle CommonJS-Modulformat problemlos für die Arbeit mit RequireJS konvertieren. Es werden jedoch nicht alle Module in das neue Format konvertiert. Einige der Ausnahmen sind unten aufgeführt -

Module mit bedingtem Code für einen erforderlichen Aufruf.
Module mit zirkulären Abhängigkeiten.

Manuelle Konvertierung

CommonJS-Module können mithilfe der folgenden Syntax manuell in das RequireJS-Format konvertiert werden:

define(function(require, exports, module) {
   //place CommonJS module content here
});

Konvertierungswerkzeug

Commonjs Module können durch die auf das RequireJS Format konvertiert werden r.js Projekt - Konverter - Tool, das eingebaut ist r.js Datei. Sie sollten den Pfad der zu konvertierenden Datei und den Ausgabeordner wie unten gezeigt angeben -

node r.js -convert path/to/commonjs/modules/ path/to/output

Exportierten Wert einstellen

Einige der Systeme in CommonJS ermöglichen das Festlegen des exportierten Werts durch Zuweisen des exportierten Werts als module.exports But RequireJS unterstützt jedoch die einfachere Möglichkeit, den Wert von der zur Definition übergebenen Funktion zurückzugeben. Dies hat den Vorteil, dass Sie die Argumente für Exporte und Modulfunktionen nicht benötigen, sodass Sie sie wie unten gezeigt aus der Moduldefinition entfernen können.

define(function (require) {
   var name = require('name');

   //Define the module as exporting a function
   return function () {
      name.doSomething();
   };
});

Alternative Syntax

Die alternative Möglichkeit, Abhängigkeiten anzugeben, besteht in einem Abhängigkeitsarray-Argument define () . Die Reihenfolge der Namen im Abhängigkeitsarray sollte jedoch mit der Reihenfolge der Argumente übereinstimmen, die an die Definitionsfunktion define () übergeben werden (siehe unten).

define(['name'], function (name) {
   
   return function () {
      name.doSomething();
   };
});

Laden von Modulen aus CommonJS-Paketen

Um Informationen zu Speicherort und Paketattributen zu erhalten, werden Module mithilfe von RequireJS in CommonJS-Pakete geladen, indem Sie die RequireJS-Konfiguration einrichten.

Optimierungswerkzeug

In RequireJS ist ein Optimierungstool vorhanden, mit dem die Moduldefinitionen zu optimierten Bundles für die Browserbereitstellung kombiniert werden können. Es fungiert als Befehlszeilentool, sodass Sie es als Teil der Codebereitstellung verwenden können.

RequireJS enthält eine kleine Reihe von Plugins, mit denen verschiedene Arten von Ressourcen als Abhängigkeiten geladen werden können. Es folgt eine Liste der verfügbaren Plugins in RequireJS -

text
domReady
i18n
CSS wird geladen

Text

Das Text- Plug-In wird zum asynchronen Laden textbasierter Ressourcen verwendet, das hauptsächlich zum Einfügen des HTML-Inhalts in JavaScript-Dateien verwendet wird. Es kann geladen werden, wenn Sie den Text verwenden! Präfix in jedem erforderlichen oder definierten Modulaufruf und Übergabe der Dateierweiterung an das Plug-In. Im Vergleich zum normalen Laden von Modulen lädt das Text- Plug-In Module mit XHR und fügt den Code nicht als Header zum Header hinzuscript Etikett.

Die Textdateiressource kann als Abhängigkeit in den Code aufgenommen werden als -

require(["mymodule", "text!mymodule.html", "text!mymodule.css"],
   
   function(mymodule, html, css) {
      //the html and css variables will be the text
      //of the mymodule.html file and mymodule.css files respectively
   }
);

domReady

Mit RequireJS können Skripte geladen werden, bevor DOM bereit ist, und Entwickler können nur dann mit DOM interagieren, wenn die Skripte vollständig geladen sind. Manchmal können Skripte geladen werden, bevor DOM fertig ist. Um dieses Problem zu lösen, bietet RequireJS einen modernen Ansatz namens DOMContentLoaded- Ereignis, der die domReady-Funktion aufruft, sobald DOM bereit ist.

require(['domReady'], function(domReady) {
   
   domReady(function() {
      //the domReady function is called when DOM is ready 
      //which is safe to manipulate DOM nodes in this function
   });
});

i18n

Es kann mit mehreren Gebietsschemas verwendet werden, die bereitstellen i18nBundle-Unterstützung, die automatisch geladen wird, wenn ein Modul oder eine Abhängigkeit "i18n!" Präfix. Um dies zu nutzen, laden Sie es herunter und legen Sie es in demselben Verzeichnis ab, in dem sich Ihre JavaScript-Hauptdatei befindet. Platzieren Sie dieses Plug-In im Verzeichnis "nls", um Ihre Lokalisierungsdateien zu finden.

Angenommen, wir haben eine js-Datei namens country.js mit dem folgenden Inhalt und legen sie im Verzeichnis als mydirectory / nls / country.js - ab.

define({
   
   "root": {
      "india": "india",
      "australia": "australia",
      "england": "england"
   }
});

Sie können einer Datei mithilfe des Gebietsschemas fr-fr eine bestimmte Übersetzung hinzufügen. Der obige Code ändert sich wie folgt:

define({
   
   "root": {
      "title": "title",
      "header": "header",
      "description": "description"
   },
   
   "es-es": true
});

Geben Sie als Nächstes die Datei in mydirectory / nls / es-es / country.js mit dem folgenden Inhalt an:

define({
   
   "root": {
      "title": "título",
      "header": "cabecera",
      "description": "descripción"
   },
   
   "es-es": true
});

Sie können das Gebietsschema festlegen, indem Sie es mithilfe der Modulkonfiguration in der Datei main.js wie unten gezeigt an das Plugin übergeben.

requirejs.config({
   
   config: {
      //set the config for the i18n plugin
      
      i18n: {
         locale: 'es-es'
      }
      
   }
});

CSS-Laden mit RequireJS

Sie können einige Plug-Ins zum Laden der CSS-Datei verwenden, indem Sie einfach an den Header-Link anhängen, um die CSS-Datei zu laden.

Das CSS kann mit Ihrer eigenen Funktion geladen werden, wie unten gezeigt -

function myCss(url) {
   var mylink = document.createElement("mylink");
   mylink.type = "text/css";
   mylink.rel = "stylesheet";
   mylink.href = url;
   document.getElementsByTagName("head")[0].appendChild(mylink);
}