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.

ü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

• 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}

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

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

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

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';

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

, fügt aber die Eigenschaft <script> hinzu. type="module"

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

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 <script>-Attribut des Tags. Im Modul <script>defer gibt das Schlüsselwort

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:

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!