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

Eine kurze Analyse von MySQL-Verbindungen und -Sammlungen

Analyse und Neugestaltung von Musikplayer-Apps (Anwendungssoftware) So gestalten Sie eine ansprechende Musikplayer-Oberfläche

Artikel

Detaillierte Erklärung zur Verwendung von $emit in Vue.js

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

Eine kurze Analyse von MySQL-Verbindungen und -Sammlungen

Vergleich der Verwendung von EXISTS und IN in MySQL

Prototyp und Prototypenkette Prototyp und Protodetails

Analyse und Neugestaltung von Musikplayer-Apps (Anwendungssoftware) So gestalten Sie eine ansprechende Musikplayer-Oberfläche

Detaillierte Erklärung zur Verwendung von $emit in Vue.js

Lösung für das Jitter-Problem beim CSS3-Transformationsübergang

Docker verwendet das Tool nsenter, um in den Container zu gelangen

Einigen Eigenschaften in CSS geht ein "*" oder "_" voraus.

So ändern Sie die Server-UUID in MySQL

Machen Sie sich nicht die Mühe mit JavaScript, wenn es mit CSS geht

Artikel empfehlen

Eine einfache Methode, um mit der TabBar am unteren Rand des WeChat-Applets umzugehen, das Inhalte blockiert

Verwenden Sie CSS3, um den Code für dynamische Spezialeffekte beim Hovern von Schaltflächen zu implementieren

Eine kurze Analyse und Aufschlüsselung der Vor- und Nachteile von drei Baumstrukturtabellendesigns in MySQL

Fünf Dinge, die ein guter User Experience Designer gut machen sollte (Bild und Text)

Lösung für den Mysql-FEHLER 1045 (28000): Zugriff verweigert für Benutzer root@localhost-Problem im Ubuntu-System

Implementierung der Vorschaufunktion mehrerer Bild-Uploads auf HTML-Basis

Eine kurze Erläuterung zur Verwendung von Slots in Vue

Beispielcode zur Implementierung eines Musikplayers mit nativem JS

Verwendung und Ausführungsprozess des HTTP-Moduls im Knoten

Detailliertes Installations- und Konfigurationstutorial für mysql5.7 unter CentOS

Praxis der Implementierung einer benutzerdefinierten Suchleiste und des Löschens von Suchereignissen in Avue

Zwei Methoden zum Strecken des Hintergrundbilds einer Webseite

Detaillierte Erläuterung der Datenbindung von Vue-Formularereignissen

Detaillierter Prozess zum Erstellen eines NFS-Servers mithilfe des NFS-Ganesha-Image von Docker

Zusammenfassung von 4 Methoden des Div+CSS-Layouts, um eine 2-Enden-Ausrichtung von CSS zu erreichen