Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie den Exportstandard in es6

So verwenden Sie den Exportstandard in es6

WBOY
WBOYOriginal
2022-08-30 17:01:311210Durchsuche

In es6 wird „Export-Standard“ verwendet, um in Echtzeit gebundene Funktionen, Objekte oder Grundwerte aus dem Modul zu exportieren. Eine Datei kann am Ende nur einen „Export-Standard“ schreiben, um die Standardausgabe für das Modul anzugeben . Die Syntax lautet „Standardfunktion exportieren () {...}“.

So verwenden Sie den Exportstandard in es6

Die Betriebsumgebung dieses Tutorials: Windows 10-System, ECMAScript Version 6.0, Dell G3-Computer.

So verwenden Sie die Export-Standardeinstellung in es6

Die Export-Anweisung wird verwendet, um in Echtzeit gebundene Funktionen, Objekte oder Grundwerte aus dem Modul zu exportieren, damit andere Programme über import {foo, bar} from ' darauf verweisen können. /util/index'

Es gibt zwei Möglichkeiten, Exporte zu exportieren:

Benannte Export-Exportfunktion FunctionName(){...} (jedes Modul enthält eine beliebige Zahl)

Standard-Export-Export-Standardausdruck (jedes Modul enthält eine)

Export

Sie können mehrere Exporte in eine Datei schreiben

In Datei a.js exportieren

export let name1 = '张三'; // 或者使用 var, const
export function FunctionName(){...}
export class ClassName {...}

In Datei b.js importieren

import {name1,FunctionName,ClassName} from '../a.js';

Beachten Sie, dass die folgende Schreibmethode einen Fehler meldet:

// 报错
export 1;
// 报错
var m = 1;
export m;
// 报错
function f() {}
export f;

Exportstandard

Eine Datei kann am Ende nur einen Exportstandard schreiben

Export in Datei a.js

const str = "export default的内容";
function FunctionName(){...}
class ClassName {...}
export default {str,FunctionName,ClassName}

Import in Datei b.js

import name from '../a.js';
// 使用
console.log(name.str)
name.FunctionName();

Der Unterschied zwischen Export und Exportstandard

1. Export und Export-Standard können zum Exportieren von Konstanten, Funktionen, Dateien, Modulen usw. verwendet werden.

2 In einer Datei oder einem Modul kann es mehrere Exporte geben, und Export-Standard hat nur einen am Ende Die Datei

3. Export durch Export, Sie müssen beim Importieren { } hinzufügen, aber der Exportstandard ist nicht erforderlich, und Sie können ihm einen beliebigen Namen geben

Detaillierte Einführung

Wir wissen, dass der Exportstandard {} ist unverzichtbar beim Erlernen von VUE, aber wir müssen seine Bedeutung verstehen.

export default{} Dies wird bei der Wiederverwendung von Komponenten verwendet. Angenommen, wir schreiben eine einseitige Komponentendatei A und müssen sie in einer anderen Datei B verwenden. Dann müssen wir die ES6-Import-/Exportsyntax verwenden, um den Export der Ausgabeschnittstelle in Datei A zu definieren und den Import in Datei B einzuführen. Verwenden Sie die importierten Komponenten sodass Sie Komponente A wiederverwenden können, um Datei B abzugleichen und HTML-Seiten zu generieren.

Bei Verwendung des Importbefehls muss der Benutzer den Namen der zu ladenden Variablen oder Funktion kennen, da diese sonst nicht geladen werden kann. Benutzer möchten jedoch auf jeden Fall schnell loslegen und sind möglicherweise nicht bereit, die Dokumentation zu lesen, um zu verstehen, über welche Attribute und Methoden das Modul verfügt. Um den Benutzern Komfort zu bieten und ihnen das Laden von Modulen zu ermöglichen, ohne die Dokumentation lesen zu müssen, wird der Befehl export default verwendet, um die Standardausgabe für das Modul anzugeben.

1. Grundlegende Verwendung

//export-default.js 这是一个模块文件export-default.js,它的默认输出是一个函数
export default function () {
  console.log('foo');
}
rrree

Wenn andere Module das anonyme Modul laden, kann der Importbefehl einen beliebigen Namen für die anonyme Funktion angeben.

2. Der Standardbefehl zum Exportieren wird vor nicht anonymen Funktionen verwendet

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Exportstandard in es6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Ist JQuery MiniUI kostenlos?Nächster Artikel:Ist JQuery MiniUI kostenlos?