JavaScript-Modularität erklärt

Inhaltsverzeichnis

Vorwort:

1. Konzept
2. Die Vorteile der Modularität
3. Probleme nach der Einführung mehrerer Skript-Tags

1. GemeinsamesJS

3. CMD

ES6-Modularität

Vorwort:

1. Konzept

Ein komplexes Programm nach bestimmten Regeln (Spezifikationen) in mehrere Blöcke (Dateien) kapseln und diese miteinander kombinieren;
Die internen Daten und die Implementierung des Blocks sind privat und nur einige Schnittstellen (Methoden) werden nach außen zugänglich gemacht, um mit anderen externen Modulen zu kommunizieren.

2. Die Vorteile der Modularität

Vermeiden Sie Namenskonflikte (reduzieren Sie die Namensraumverschmutzung).
Bessere Trennung, Beladung nach Bedarf;
Höhere Wiederverwendbarkeit;
Höhere Wartbarkeit.

3. Probleme nach der Einführung mehrerer Skript-Tags

Zu viele Anfragen (zu viele abhängige Module führen zu zu vielen Anfragen);
Mehrdeutigkeit der Abhängigkeiten (die spezifischen Abhängigkeiten der Module sind unbekannt, was zu einer falschen Ladereihenfolge führt);
Schwer zu pflegen (die beiden oben genannten Gründe führen zu diesem Ergebnis).

//index.html
<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
  <script src="jQuery.js"></script>
  <script src="module.js"></script>
</Kopf>
<Text>
  <div>123</div>
</body>
<Skript>
  meinModul.foo();
  meinModul.bar();
  console.log(meinModul.daten);
  meinModul.data = "xxxx";
  meinModul.foo();
</Skript>
</html>

//module.js IIFE (anonyme, selbstaufrufende Funktion)
;(Funktion(Fenster,$){
  let data = "www.baidu.com";
  Funktion foo() {
    Konsole.log(`foo() ${data}`);
    //Hier müssen Sie die jQuery-Bibliothek verwenden $('body').css('background', 'red')
  }
  Funktion bar() {
    Konsole.log(`bar() ${data}`);
    andererSpaß();
  }
  Funktion andererSpaß() {
    Konsole.log(`otherFun()`);
  }
  window.myModule = { foo, bar };
})(Fenster, jQuery)

1. GemeinsamesJS

NODE basiert auf der commonJS -Modulspezifikation. Jede Datei ist ein Modul. Es hat seinen eigenen Umfang. Auf der Serverseite wird das Modul synchron geladen. Auf der Browserseite muss das Modul im Voraus kompiliert und verpackt werden.

Merkmale:

Der gesamte Code wird im Modulbereich ausgeführt und beeinträchtigt nicht den globalen Bereich.
Ein Modul kann mehrmals geladen werden, wird aber nur einmal ausgeführt, und zwar beim ersten Laden. Die Ergebnisse der Ausführung werden zwischengespeichert. Beim erneuten Laden werden die zwischengespeicherten Ergebnisse direkt gelesen. Um das Modul wieder zum Laufen zu bringen, muss der Cache geleert werden.
Module werden in der Reihenfolge geladen, in der sie im Code erscheinen.

Grammatik:

Modul verfügbar machen: js module.exports = value oder js exports.xxx = value
Importmodul: js require('xxx') Wenn es sich um ein Drittanbietermodul handelt, ist xxx der Modulname; wenn es sich um ein benutzerdefiniertes Modul handelt, ist xxx der Moduldateipfad

Die CommonJS Spezifikation legt fest, dass innerhalb jedes Moduls die Modulvariable das aktuelle Modul darstellt. Diese Variable ist ein Objekt und ihr Exportattribut (d. h. module.exports) ist die externe Schnittstelle. Durch das Laden eines Moduls wird tatsächlich die Eigenschaft module.exports des Moduls geladen.

Der Befehl require wird zum Laden von Moduldateien verwendet. Die Grundfunktion des Befehls „require“ besteht darin, eine JavaScript-Datei zu lesen und auszuführen und dann das Exportobjekt des Moduls zurückzugeben. Wenn das angegebene Modul nicht gefunden wird, wird ein Fehler gemeldet.

Der Lademechanismus von CommonJS -Modulen besteht darin, dass die Eingabe eine Kopie des Ausgabewerts ist. Das heißt, sobald ein Wert ausgegeben wurde, wirken sich Änderungen innerhalb des Moduls nicht mehr auf diesen Wert aus.

AMD

Im Vergleich zu den synchronen Lademodulen von CommonJS eignet sich AMD besser zum asynchronen Laden von Modulen auf der Browserseite, da AMD die Angabe von Rückruffunktionen ermöglicht.
Verzeichnisstruktur

Verwenden von require.js

<!-- index.html -->
<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>

//Definiere ein Modul1 ohne Abhängigkeiten define('module1', () => {
  lass count = 0;
  const add = () => ++ Anzahl;
  const reset = () => Anzahl = 0;
  const Großbuchstaben = Zeichenfolge => Zeichenfolge.toUpperCase()

  zurückkehren {
    hinzufügen,
    zurücksetzen,
    Großbuchstaben
  }
})

//Definiere ein Modul2 mit Abhängigkeiten, das von Modul1 abhängt
definieren('Modul2',['Modul1'], (Modul1) => {
  const showMsg = () => module1.upperCase('hallo-amd');

  zurückkehren {
    Nachricht anzeigen
  }
})

<!-- Modul in der HTML-Datei verwenden -->
<Text>

<Skript>
  erfordern.config({
    Pfade: {
      Modul1: './Module/Modul1',
      Modul2: „./Module/Modul2“
    }
  })
  erfordern(['Modul1', 'Modul2'], (Modul1, Modul2) => {
    konsole.log(module1.add()) // 1
    konsole.log(module1.reset()) //0
    console.log(module2.showMsg()) //HALLO-AMD
  })
</Skript>
</body>

3. CMD

CMD kombiniert die Vorteile von CommonJS und AMD. Die cmd-Spezifikation wird speziell auf der Browserseite verwendet. Das Modul wird asynchron geladen und nur geladen und ausgeführt, wenn das Modul verwendet wird (On-Demand-Laden wird realisiert, während AMD On-Demand-Laden nicht unterstützt).
Verzeichnisstruktur

Verwenden von sea.js

<script src="https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js"></script>

//Modul module1 definieren
definieren((erfordern, Exporte, Modul) => {

  let string = 'Ich bin ein String';
  const readString = () => 'Modul1 anzeigen() ' + Zeichenfolge;

  //Der Außenwelt zugänglich machen exports.readString = readString;
})

//Modul module2 definieren
definieren((erfordern, Exporte, Modul) => {
  exports.msg = "Ich bin es"
})

//Modul definieren
definieren((erfordern, Exporte, Modul) => {
  //Abhängige Module einführen (synchron)
  var Modul1 = erforderlich('./Modul1');
  console.log(module1.readString()) // module1 show() Ich bin ein String

  //Abhängige Module einführen (asynchron)
  erfordern.async('./module2', md2 => {
    console.log(`Dies wird asynchron importiert: ${md2.msg}`) //Dies wird asynchron importiert: Ich bin es})
})

<!-- HTML-Datei verwendet Modul -->
<Text>
<Skript>
  seajs.use('./modules/modul')
</Skript>

ES6-Modularität

Die Designidee von ES6-Modulen besteht darin, so statisch wie möglich zu sein, sodass die Modulabhängigkeiten sowie die Eingabe- und Ausgabevariablen zur Kompilierungszeit bestimmt werden können. Sowohl CommonJS- als auch AMD-Module können diese Dinge nur zur Laufzeit bestimmen.
Zwei Schlüsselwörter Import und Export

Import
Export

//mian.js
Standard exportieren {
  Nachricht anzeigen() {
    console.log('hahahahaha')
  }
}
export const msg = "Es ist eine wunderschöne Zeit mit Vollmond und Blumen!"

//index.js
importiere module1 von "./module1"; //entspricht dem Exportstandard
module1.showMsg()
import { msg } from './module1'; //entspricht export
Konsole.log(Nachricht)

/*Tipps: Verwenden Sie nicht <script type="module"> in HTML
Importieren … Es gibt domänenübergreifende Probleme. Sie können ein Plug-In in vscode herunterladen oder einen lokalen Dienst starten, um es zu lösen. Ich werde nicht ins Detail gehen.
</script>*/

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der JavaScript-Modularisierung. Weitere relevante Inhalte zur JavaScript-Modularisierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Modularität in Node.js, npm-Paketmanager erklärt
Detaillierte Erklärung der NodeJS-Modularität
So verstehen Sie die Modularität von JavaScript
Eine kurze Diskussion über mehrere Spezifikationen der JS-Frontend-Modularisierung
Detaillierte Erläuterung des Funktionsprinzips und der Lösung der Js-Modularisierung
Tutorial zum Exportieren und Importieren in Javascript zur Erzielung einer modularen Verwaltung

<<: Detaillierte Erläuterung der gleichzeitigen Parameteranpassung von MySQL

>>: CSS nutzt geschickt Farbverläufe, um eine erweiterte Hintergrundlichtanimation zu erzielen

Grundlegende Nutzungsanalyse von Explain, einem magischen Tool zur MySQL-Leistungsoptimierung

JavaScript-Modularität erklärt

Inhaltsverzeichnis

Vorwort:

1. Konzept

2. Die Vorteile der Modularität

3. Probleme nach der Einführung mehrerer Skript-Tags

1. GemeinsamesJS

AMD

3. CMD

ES6-Modularität

Grundlegende Nutzungsanalyse von Explain, einem magischen Tool zur MySQL-Leistungsoptimierung

Detaillierte Erläuterung des Zeitdarstellungsbeispiels des Linux-Zeitsubsystems

Sind die Wertebereiche von int(3) und int(10) in MySQL gleich?

Verschieben Sie die MySQL-Datenbank unter Windows auf eine andere Festplatte

Vue implementiert bidirektionale Datenbindung

Docker-Dateispeicherpfad, Befehlsvorgang zum Starten des Containers abrufen

Vue implementiert Klick-Feedback-Anweisungen für den Wasserwelleneffekt

Detailliertes Tutorial zur Installation der virtuellen Python 3-Umgebung in Ubuntu 20.04

Beispielcode zum Vergleich verschiedener Syntaxformate von vue3

So stellen Sie eigenständigen Pulsar und geclustertes Redis mit Docker bereit (Entwicklungsartefakt)

Artikel empfehlen

CSS-Implementierungscode zum Zeichnen von Dreiecken (Rahmenmethode)

Detaillierte Erklärung der Ausführungsunterschiede zwischen count(1), count(*) und count(Spaltenname)

Eine vollständige Liste häufig gestellter JavaScript-Fragen für Front-End-Interviews

Verstehen von MySQL-Deadlock-Routinen durch eindeutige Index-S-Sperre und X-Sperre

Vue realisiert die Bildschirmanpassung von Großbildschirmseiten

CentOS7-Bereitstellung Flask (Apache, mod_wsgi, Python36, venv)

Ein kurzes Verständnis der MySQL SELECT-Ausführungsreihenfolge

Vue verwendet Plug-Ins, um Bilder proportional zuzuschneiden

Native js realisiert das Ziehen und Ablegen des Neun-Quadrat-Rasters

Linux Yum-Paketverwaltungsmethode

TortoiseSvn Little Turtle Installation Neuestes ausführliches Grafik-Tutorial

Vue + SSM realisiert den Vorschaueffekt beim Hochladen von Bildern

MySQL verwendet Variablen, um verschiedene Sortierungen zu implementieren

So erstellen Sie eine MySQL-Datenbank und unterstützen chinesische Schriftzeichen

Tutorial zur HTML-Tabellenauszeichnung (5): Farbattribut für helle Rahmen BORDERCOLORLIGHT