Front-End-Wissen, JavaScript-Module, Modullernen

Module sind JS-Module Mein Verständnis ist, dass die Methode als Ganzes , Es kann separat als Modul definiert werden, also als Modul . Die Bedeutung von Module besteht darin, den Code zu modularisieren und Ihren Code in logisch unabhängige Teilmengen zu unterteilen. Jede Teilmenge verarbeitet bestimmte Funktionen und wird dann separat aufgerufen.

Module, also Module,

übernehmen automatisch den strikten Modus , unabhängig davon, ob „user strict“ zum Modulheader hinzugefügt wird, Agruments nicht Änderungen in Funktionsparametern automatisch widerspiegeln und verhindern, dass dies auf das globale Objekt verweist

Module haben zwei Schlüsselwörter: Importe und Exporte

• Importe: Wird zur Eingabe von Funktionen verwendet, die von anderen Modulen bereitgestellt werden

• Exporte: Wird zur Angabe externer Schnittstellen verwendet

Ein Modul ist unabhängig Datei , alle Variablen in der Datei können nicht extern abgerufen werden . Wenn Sie eine Variable innerhalb des Moduls extern lesen möchten, müssen Sie das Schlüsselwort export verwenden, um die Variable auszugeben, zu exportieren, Zusätzlich zu Ausgabevariablen können auch Ausgabefunktionen, Klassen

let a='a';
let b='b';
let c='c';
export {a,b,c}

Wenn Sie die Ausgabevariable umbenennen, verwenden Sie das Schlüsselwort

as im Importbefehl und ändern Sie den Namen in a, z Beispiel:

import {name as a} from '.../xxx.js'

Darüber hinaus

hat der Import einen Promotion-Effekt , unabhängig davon, wo darauf verwiesen wird, wird er an die Spitze des gesamten Moduls befördert, Führen Sie zuerst

zusätzlich zum angegebenen aus. Um einen bestimmten Wert zu laden, können Sie auch den gesamten Wert laden, dh ein Sternchen (*) verwenden, um ein Objekt anzugeben, und alle Ausgabewerte werden geladen zu diesem Objekt. Beispiel:

import * as a from '.../xxx.js'
console.log(a.area(4));
console.log(a.cire(4));

Standard exportieren, legen Sie die Standardausgabe der Moduldatei fest, jedes Modul darf nur eine Standardausgabe haben, und die Standardausgabe ist nicht erforderlich. Kennen Sie den Variablennamen des Moduls. Darüber hinaus muss export default keine geschweiften Klammern hinzufügen , da export default im Wesentlichen eine Variable oder Methode namens default ausgibt , und dann erlaubt Ihnen das System, es abzurufen. Beliebiger Name

var name="李四";
export { name }
//import { name } from "/.a.js" 
可以写成：
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';

Wenn es mehrmals geladen wird, entspricht es dem Laden nach dem Zusammenführen, zum Beispiel

import {b} from '.../xxx.js'
import {c} from '.../xxx.js'
//等同于
import {b,c} from '.../xxx.js'

Wenn der Browser lädt ES6-Modul verwendet auch das Tag

, fügt aber die Eigenschaft 3f1c4e4b6b16bbbd69b2ee476dc4f83a hinzu. type="module"

<script type="module">
</script>

Der Browser lädt

mit type="module" asynchron, wodurch der Browser nicht blockiert wird. Das heißt, warten Sie, bis die gesamte Seite gerendert ist, und führen Sie dann das Modulskript aus, was dem Öffnen von Das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Attribut des Tags. Im Modul 3f1c4e4b6b16bbbd69b2ee476dc4f83adefer gibt das Schlüsselwort

der obersten Ebene

this zurück, anstatt auf undefined zu verweisen. Mit anderen Worten, es ist sinnlos, das Schlüsselwort auf der obersten Ebene des Moduls zu verwenden und gleichzeitig den Syntaxpunkt window zu verwenden, dem das Schlüsselwort this auf der obersten Ebene von entspricht this kann erkennen, ob sich der aktuelle Code in einem ES6-Modul befindet. . undefinedVerwandte Artikel:

Detaillierte Einführung in allgemeine Wissenspunkte zum Erlernen des Web-Frontends

Grundlegende Grundkenntnisse von JavaScript Wenn Sie js lernen möchten, können Sie sich darauf beziehen Weiter

Das obige ist der detaillierte Inhalt vonFront-End-Wissen, JavaScript-Module, Modullernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!