Detailliertes Verständnis der Klassenbibliothek „require.js“: „Einführung der Javascript-Funktion“.

Require.js ist meine Lieblingsmethode zum Programmieren von Javascript. Es zerlegt den Code in kleinere Teile und erleichtert die Verwaltung. Der Require.js Optimizer kann uns dabei helfen, eine größere Anwendung in mehrere kleinere Anwendungen aufzuteilen, sie durch Abhängigkeiten zu verbinden und sie schließlich während der Kompilierung und Verpackung zusammenzuführen. Diese Gründe veranlassen uns, require.js zu verwenden.

Werfen wir also einen Blick auf die großartigen Funktionen von require.js!

Kompatibel mit CommonJS

AMD (Asynchronous Module Definition Specification) ist aus der CommonJS-Arbeitsgruppe hervorgegangen. CommonJS zielt darauf ab, ein Javascript-Ökosystem zu schaffen. Ein wichtiger Teil von CommonJS ist transport/c, der Vorgänger von AMD, und require.js ist eine Implementierung dieser Spezifikation.

Der Syntaxunterschied zwischen dem CommonJS-Modul und dem AMD-Modul ist hauptsächlich auf die Tatsache zurückzuführen, dass AMD die asynchronen Funktionen des Browsers unterstützen muss. Das CommonJS-Modul muss synchron ausgeführt werden, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var someModule = require( "someModule" );
var anotherModule = require( "anotherModule" );
exports.asplode = function() {
SomeModule.doTehAwesome();
AnotherModule.doMoarAwesome();
};

AMD-Module laden Module asynchron, daher erfordert die Moduldefinition ein Array als ersten Parameter und die Rückruffunktion nach dem Laden des Moduls wird als zweiter Parameter übergeben.

Code kopieren Der Code lautet wie folgt:

define( [ "someModule"], function( someModule ) {
Geben Sie {
zurück asplode: function() {
                                   someModule.doTehAwesome();

                                                       // Dies wird asynchron ausgeführt
              require( [ "anotherModule" ], function( anotherModule ) {
                 anotherModule.doMoarAwesome();
            });
}
};
});

Allerdings ist AMD auch mit der CommonJS-Syntax in require.js kompatibel. Indem Sie das CommonJS-Modul mit der Definitionsfunktion von AMD umschließen, können Sie auch ein CommonJS-Modul in AMD haben, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

define(function(require, exports, module)
var someModule = require( "someModule" );
var anotherModule = require( "anotherModule" );
SomeModule.doTehAwesome();
AnotherModule.doMoarAwesome();

exports.asplode = function() {
          someModule.doTehAwesome();
         anotherModule.doMoarAwesome();
};
});

Tatsächlich interpretiert require.js den Modulinhalt der Rückruffunktion über die Funktion .toString, findet seine korrekten Abhängigkeiten und wandelt ihn in ein normales AMD-Modul um. Es ist zu beachten, dass ein auf diese Weise geschriebenes Modul möglicherweise nicht mit anderen AMD-Loadern kompatibel ist, da es gegen die AMD-Spezifikation verstößt, das Schreiben dieses Formats jedoch sehr gut verstehen kann.

Was hier passiert, ist, dass require.js tatsächlich die Rückruffunktion function.toString ausführt, um den Inhalt des Moduls zu analysieren und die richtigen Abhängigkeiten zu finden, genau wie es bei einem normalen AMD-Modul der Fall wäre. Es ist wichtig zu beachten, dass Module, die Sie auf diese Weise schreiben, höchstwahrscheinlich nicht mit anderen AMD-Modulladern kompatibel sind, da dies gegen die AMD-Spezifikationen verstößt. Es ist jedoch gut zu wissen, dass dieses Format existiert!

CDN-Fallback

Ein weiteres verstecktes Juwel von require.js ist, dass es das Zurückgreifen auf das Laden der entsprechenden lokalen Bibliothek unterstützt, wenn das CDN nicht korrekt geladen wird. Wir können dies durch require.config erreichen:

Code kopieren Der Code lautet wie folgt:

requirejs.config({
Pfade: {
jquery: [
               '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
             'lib/jquery'
]
}
});

Keine Abhängigkeiten? Objektliteral? Kein Problem!

Wenn Sie ein Modul ohne Abhängigkeiten schreiben und einfach ein Objekt zurückgeben, das einige funktionale Funktionen enthält, können wir eine einfache Syntax verwenden:

Code kopieren Der Code lautet wie folgt:

define({
forceChoke: function() {

},
forceLighting: function() {

},
forceRun: function() {

}  
});

Sehr einfach und nützlich, wenn das Modul nur eine Sammlung von Funktionen oder nur ein Datenpaket ist.

Zirkuläre Abhängigkeiten

In einigen Fällen benötigen wir möglicherweise das Modul moduleA und die Funktionen in moduleA müssen von einigen Anwendungen abhängen. Das ist eine zirkuläre Abhängigkeit.

Code kopieren Der Code lautet wie folgt:

// js/app/moduleA.js
define([ "require", "app/app"],
Funktion(erforderlich, App) {
         return {
foo: Funktion(Titel) {
              var app = require( "app/app" );
                   return app.something();
            }
}
}
);

Holen Sie sich die Adresse des Moduls

Wenn Sie die Adresse des Moduls benötigen, können Sie dies tun...

Code kopieren Der Code lautet wie folgt:

var path = require.toUrl("./style.css");

BaseUrl

Normalerweise wird bei der Durchführung von Unit-Tests Ihr Quellcode in einem Ordner ähnlich wie src abgelegt, und gleichzeitig können Ihre Tests in einem Ordner ähnlich wie Tests abgelegt werden. Es kann schwierig sein, die richtige Testkonfiguration zu erhalten.

Zum Beispiel haben wir eine index.html-Datei im Ordner „Tests“ und müssen „tests/spec/*.js“ lokal laden. Und vorausgesetzt, der gesamte Quellcode befindet sich in src/js/*.js und in diesem Ordner befindet sich eine main.js.

Legen Sie in index.html beim Laden von require.js nicht data-main fest.

Code kopieren Der Code lautet wie folgt:

<script><br> require( [ "../src/js/main.js" ], function() {<br> ​ require.config({<br> baseUrl: "../src/js/"<br> });<br> <br> ​ require([ <br> "./spec/test.spec.js",<br> "./spec/moar.spec.js"<br> ], function() {<br>                 // Starten Sie Ihr Test-Framework<br> });<br> });<br> </script>

Vous pouvez trouver main.js chargé. Cependant, comme data-main n'est pas défini, nous devons spécifier une baseUrl. Lors de l'utilisation de data-main, baseUrl sera automatiquement défini en fonction du fichier sur lequel il est défini.

Ici, vous pouvez voir main.js en cours de chargement. Cependant, comme il ne charge pas les données dans la balise de script principale, vous devez spécifier une base. Lorsque les données sont principalement destinées à baseURL, elles sont déduites de l'emplacement dans le fichier principal. En personnalisant baseUrl, nous pouvons facilement stocker le code de test et le code d'application séparément.

JSONP

Nous pouvons gérer le terminal JSONP comme ceci :

Copier le code Le code est le suivant :

exiger( [
"http://someapi.com/foo?callback=define"
], fonction (données) {
console.log(données);
});

Pour les bibliothèques non AMD, utilisez shim pour résoudre

Sous de nombreuses demandes, nous devons utiliser des bibliothèques non AMD. Par exemple, Backbone et Underscore ne sont pas adaptés aux spécifications AMD. Et jQuery se définit simplement comme une variable globale nommée jQuery, il n'y a donc rien à voir avec jQuery.

Heureusement, nous pouvons utiliser la configuration des cales pour résoudre ce problème.

Copier le code Le code est le suivant :

require.config({
Chemins : {
"backbone": "fournisseur/backbone",
"underscore": "fournisseur/underscore"
},
cale : {
« épine dorsale » : {
deps : [ "soulignement" ],
Exportations : "Backbone"
},
"souligner": {
Exportations : "_"
>
>
});