Warum sollte das Frontend Modularität nutzen?

Dieses Mal erkläre ich Ihnen, warum das Frontend Modularisierung verwenden sollte? , was sind die Vorsichtsmaßnahmen für die Front-End-Modularisierung? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Worauf beziehen sich die CMD-, AMD- und CommonJS-Spezifikationen? Welche Anwendungen gibt es?

AMD (Asynchronous Module Definition) spezifiziert einen Mechanismus, unter dem Module und Abhängigkeiten Schritt für Schritt geladen werden können. Dies gilt insbesondere für das asynchrone Laden auf Browserseite, das ebenfalls eine Erweiterung der CommonJS-Spezifikation darstellt. 12

Syntax

define(id?, dependencies?, Factory); 1

id: Der Name des Moduls in der Definition, optional ; wenn dieser Parameter nicht angegeben wird, sollte der Modulname standardmäßig der Name des angegebenen Skripts sein, das vom Modullader angefordert wird. .

Abhängigkeiten Abhängigkeiten: Es handelt sich um ein Array-Literal, von dem das aktuelle Modul abhängt und das durch das vom Modul definierte Modul identifiziert wurde. Der Abhängigkeitsparameter ist optional. Wenn dieser Parameter weggelassen wird, sollte er standardmäßig auf ["require", "exports", "module"] lauten. Wenn das Längenattribut der Factory-Methode jedoch kleiner als 3 ist, ruft der Loader die Factory-Methode mit der durch das Längenattribut der Funktion angegebenen Anzahl von Argumenten auf.

Factory-Methode Factory: Das Modul initialisiert die auszuführende Funktion oder das auszuführende Objekt. Wenn es sich um eine Funktion handelt, sollte sie nur einmal ausgeführt werden. Wenn es sich um ein Objekt handelt, sollte dieses Objekt der Ausgabewert des Moduls sein.
Beispiele

define('modal', ['jQuery', 'dialog'], function($, Dialog){$('.modal').show();
Dialog.open();
});1234

Zu den AMD-Bibliotheken gehören RequireJS, Curl, Dojo usw. CommonJS ist eine Spezifikation für serverseitige Module und Node.js übernimmt diese Spezifikation. Node.JS übernahm zunächst das Konzept der js-Modularität. In einem Modul gibt es eine freie Variable „require“, die eine Funktion ist. Die Funktion „require“ erhält eine Modulkennung. „require“ gibt die vom externen Modul exportierte API zurück. Wenn ein Abhängigkeitszyklus auftritt, hat das externe Modul die Ausführung möglicherweise nicht abgeschlossen, wenn es aufgrund seiner transitiven Abhängigkeiten erforderlich ist. In diesem Fall muss das von „require“ zurückgegebene Objekt mindestens die Anforderungen dieses externen Moduls enthalten, das vor dem Aufruf vorbereitet wurde die Funktion require (die in die aktuelle Ausführungsumgebung des Moduls gelangt). Wenn das angeforderte Modul nicht zurückgegeben werden kann, muss „require“ einen Fehler auslösen. In einem Modul gibt es eine freie Variable namens „exports“, bei der es sich um ein Objekt handelt, zu dem das Modul während der Ausführung seine eigene API hinzufügen kann. Module müssen das „exports“-Objekt als einzige Darstellung der Ausgabe verwenden.
Beispiel

exports.add = function() {
  var sum = 0, i = 0, args = arguments, l = args.length;  while (i < l) {
      sum += args[i++];
  }
  return sum;
};1234567

CMD (Common Module Definition) wird während der Promotion von SeaJS generiert.

CMD wurde von Yu Bo in China vorgeschlagen. Der Hauptunterschied zur AMD-Spezifikation besteht im Definitionsmodul und im Einführungsteil der Abhängigkeiten. AMD muss bei der Deklaration des Moduls alle Abhängigkeiten angeben und diese über formale Parameter an das Modul übergeben
Beispiel

define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});123456789

Im Vergleich zum AMD-Modul kommt CMD näher an Nodes Definition der CommonJS-Spezifikation:

define(factory);1

Im Abhängigkeitsabschnitt unterstützt CMD die dynamische Einführung, das Beispiel lautet wie folgt:

define(function(require , exports , module){    //the module code goes here
});123

require, exports, module werden über formale Parameter übergeben. Wenn Sie bei Modulen auf das Modul angewiesen sind, können Sie das Modul jederzeit aufrufen, um es zu importieren.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!

Empfohlene Lektüre:

Methoden zum Testen von Frontend-Seiten

Anruf- und Bewerbungsanwendung in Javascript

Das obige ist der detaillierte Inhalt vonWarum sollte das Frontend Modularität nutzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!