1. Ursprung
Die CommonJS-Organisation hat viele neue JavaScript-Architekturlösungen und -Standards vorgeschlagen, in der Hoffnung, eine einheitliche Anleitung für die Front-End-Entwicklung bereitzustellen. Die AMD-Spezifikation ist eine der bekanntesten. Ihr vollständiger Name ist Asynchronous Module Definition, was den asynchronen Modullademechanismus bezeichnet. Beschreibt vollständig die Moduldefinition, Abhängigkeiten, Referenzbeziehungen und den Lademechanismus. Diese Spezifikation wurde von requireJS, NodeJs, Dojo und JQuery verwendet und es ist ersichtlich, dass sie von großem Wert ist.
2. Einführung
Als Spezifikation müssen Sie nur die Syntax-API definieren und sich nicht um die Implementierung kümmern. Die AMD-Spezifikation ist so einfach wie nur eine API, die Definitionsfunktion:
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
wobei:
Modulname: Modulidentifikation, kann weggelassen werden.
Array-of-Dependences: Die Module, von denen es abhängt, können weggelassen werden.
module-factory-or-object: Modulimplementierung oder ein Javascript-Objekt.
Eine weitere Eigenschaft der Definitionsfunktion ist die Asynchronität. Wenn die Definitionsfunktion ausgeführt wird,
1) Zuerst werden die im zweiten Parameter aufgeführten abhängigen Module asynchron aufgerufen
2) Nachdem alle Module geladen wurden und der dritte Parameter ein Rückruf ist, wird die Funktion ausgeführt
3) und teilt dann dem System mit, dass das Modul verfügbar ist, das auch die von ihm abhängigen Module darüber benachrichtigt, dass es verfügbar ist.
3. AMD-Beispiel
1. So definieren Sie ein Modul
Der folgende Code definiert ein Alpha-Modul und basiert auf dem integrierten Anforderungs-, Export- und externen Modul Beta-Modul. Wie Sie sehen, ist der dritte Parameter die Rückruffunktion, und die abhängigen Module können direkt verwendet werden. Sie werden der Rückruffunktion als Parameter in der Reihenfolge der Abhängigkeitsdeklaration bereitgestellt.
1) Mit der Funktion require können Sie sich jederzeit auf ein Modul verlassen, d. h. einen Verweis auf das Modul abrufen, sodass es auch dann verwendet werden kann, wenn das Modul nicht als Parameter definiert ist ) exports ist die Entität des definierten Alpha-Moduls. Alle darauf definierten Eigenschaften und Methoden sind auch Eigenschaften und Methoden des Alpha-Moduls. Durch exports.verb = ... wird eine Verb-Methode für das Alpha-Modul definiert.
3) Im Beispiel wird einfach die Verbmethode des Moduls Beta aufgerufen.
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Oder: return require("beta").verb();
}
});
2. Mit der Definitionsmethode für anonyme Module können Sie den ersten Parameter weglassen und so ein anonymes Modul definieren. Zu diesem Zeitpunkt ist der Dateiname der Moduldatei die Modulkennung.
Wenn diese Moduldatei in a.js abgelegt wird, ist a der Modulname. Sie können „a“ in Abhängigkeiten verwenden, um von diesem anonymen Modul abhängig zu sein.
Der Vorteil besteht darin, dass das Modul in hohem Maße wiederverwendbar ist. Ein anonymes Modul kann überall dort verwendet werden, wo es platziert ist. Der Modulname ist sein Dateipfad.
Der folgende Code definiert ein anonymes Modul, das vom Alpha-Modul abhängt:
define(["alpha"], function (alpha) {
return {
verb: function() {
return alpha.verb() + 2;
}
};
});
3. Definieren Sie mit nur einem Parameter
Die Die ersten beiden Parameter von define können weggelassen werden. Für den dritten Parameter gibt es zwei Situationen: Eine ist ein JavaScript-Objekt und die andere ist eine Funktion.
Wenn es sich um ein Objekt handelt, kann es ein Objekt sein, das Methoden und Funktionen enthält, es kann aber auch nur Daten bereitstellen. Letzteres ist JSON-P sehr ähnlich, sodass man auch davon ausgehen kann, dass AMD eine vollständige JSON-P-Implementierung beinhaltet. Das Modul entwickelt sich zu einem einfachen Datenobjekt. Ein solches Datenobjekt ist hochverfügbar und da es ein statisches Objekt ist, ist es auch CDN-freundlich, was die Leistung von JSON-P verbessern kann. Stellen Sie sich ein JavaScript-Objekt vor, das die Korrespondenz zwischen Provinzen und Städten in China bereitstellt. Wenn es dem Client in Form von herkömmlichem JSON-P bereitgestellt wird, muss es einen Rückruffunktionsnamen bereitstellen und basierend auf diesem Funktionsnamen dynamisch Rückgabedaten generieren Standard-JSON-P-Daten sicher. Nicht CDN-freundlich. Wenn Sie jedoch AMD verwenden, hat diese Datendatei die folgende Form:
define({ PRovinces: [
{Name: 'Shanghai', Gebiete: ['Pudong New Area', 'Xuhui District']},
{Name: 'Jiangsu',Städte: ['Nanjing', 'Nantong']🎜> //..... ]
});
Angenommen, die Datei heißt china.js, dann, wenn ein Modul diese Daten benötigt, einfach:
define(['china'], function(china){ //Hier chinesische Provinz- und Stadtdaten verwenden});
Auf diese Weise ist dieses Modul Es ist wirklich hochgradig wiederverwendbar, unabhängig davon, ob es remote verwendet oder in ein lokales Projekt kopiert wird, es spart Entwicklungszeit und Wartungszeit.
Wenn der Parameter eine Funktion ist, besteht einer seiner Verwendungszwecke darin, ihn schnell zu entwickeln und zu implementieren. Geeignet für kleinere Anwendungen, Sie müssen sich nicht im Voraus Gedanken darüber machen, welche Module Sie benötigen und wer diese nutzen wird. In der Funktion können Sie jederzeit die von Ihnen benötigten Module anfordern. Zum Beispiel:
define(function(){
var p = require('china');
//Use the china module});
Das heißt, Sie lassen den Modulnamen und die Module weg, auf die Sie sich verlassen müssen. Das bedeutet nicht, dass Sie nicht auf andere Module angewiesen sind, aber es ermöglicht Ihnen, diese Module bei Bedarf zu benötigen. Wenn die Methode define ausgeführt wird, ruft sie die toString-Methode der Funktion auf und scannt die erforderlichen Aufrufe, um Ihnen beim Laden dieser Module im Voraus zu helfen, und führt sie dann aus, nachdem der Ladevorgang abgeschlossen ist. Dies ermöglicht eine schnelle Entwicklung.
Zu beachten ist, dass Opera die toString-Methode der Funktion nicht sehr gut unterstützt, sodass ihre Anwendbarkeit in Browsern nicht sehr gut ist. Wenn Sie jedoch alle JavaScript-Dateien über das Build-Tool packen, stellt dies kein Problem dar. Das Build-Tool hilft Ihnen beim Scannen der Anforderungen und erzwingt das Laden abhängiger Module.
Das Obige ist der AMD-Spezifikationsinhalt von JavaScript. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!
