Was zum Importieren von Ressourcen in es6 verwendet werden soll-Front-End-Fragen und Antworten-php.cn

In es6 können Sie die Importanweisung oder import() verwenden, um Ressourcen zu importieren. Der Importbefehl wird zum Importieren eines bestimmten Moduls (Ressourcendatei) mit der Syntax „import {member} from ‚module Identifier‘“ verwendet; import() wird zum Importieren von Dateien oder Modulen mit der Syntax „import (Ressourcenspeicherort)“ verwendet. ".

Was zum Importieren von Ressourcen in es6 verwendet werden soll

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Die modulare Entwicklung kann in es6 durchgeführt werden, das in der ES6-Modulspezifikation definiert ist:

Jede JS-Datei ist ein unabhängiges Modul.
Verwenden Sie das Schlüsselwort import, um andere Modulmitglieder zu importieren.
nach außen geteilt Modulmitglieder verwenden das Export-Schlüsselwort

export command

export

Die Modulfunktion besteht hauptsächlich aus zwei Befehlen: export und import. Der Befehl export wird verwendet, um die externe Schnittstelle des Moduls anzugeben, und der Befehl import wird verwendet, um von anderen Modulen bereitgestellte Funktionen zu importieren. export和import。export命令用于规定模块的对外接口，import命令用于导入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部所有的变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
例如：

//test1.js
export var firstName = &#39;mike&#39;
export var lastName = &#39;Jack&#39;

Nach dem Login kopieren

上面代码是test1.js文件，保存了用户信息。ES6将其视为一个模块，里面用export命令对外部输出了三个变量。
export的写法，除了像上面哪样，还有另一种写法：

//test1.js
var firstName = &#39;mike&#39;
var lastName = &#39;Jack&#39;
export {firstName, lastName}

Nach dem Login kopieren

export命令除了输出变量，还可以输出函数或类

export function add(x, y){
    return x + y
}

Nach dem Login kopieren

export命令可以出现在模块得任意位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，import命令也是如此

通常情况下,export输出的变量就是本来的名字，但是可以使用as关键字重命名

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

Nach dem Login kopieren

import命令

使用export命令定义了模块的对外接口以后，其他js文件就可以通过import命令加载这个模块

import {firstName, lastName} from &#39;./test1.js&#39;
console.log(firstName,lastName)

Nach dem Login kopieren

如果想为输入的变量重新取一个名字，import命令要使用as，将输入的变量重命名。

import {lastName as suName} from &#39;./test1.js&#39;

Nach dem Login kopieren

import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面改写接口。

import {a} from &#39;./xxx&#39;
a = {}   //报错

Nach dem Login kopieren

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省去。如果只是模块名，不带有路径，那么必须有配置文件，告诉JavaScript引擎该模块的位置

模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

下面是一个circle.js文件，它输出两个方法area和circumference。

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

Nach dem Login kopieren

现在，加载这个模块。

// main.js

import { area, circumference } from &#39;./circle&#39;;
console.log(&#39;圆面积：&#39; + area(4));
console.log(&#39;圆周长：&#39; + circumference(14));

Nach dem Login kopieren

上面写法是逐一指定要加载的方法，整体加载的写法如下。

import * as circle from &#39;./circle&#39;;
console.log(&#39;圆面积：&#39; + circle.area(4));
console.log(&#39;圆周长：&#39; + circle.circumference(14));

Nach dem Login kopieren

注意，模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。

import * as circle from &#39;./circle&#39;;

// 下面两行都是不允许的
circle.foo = &#39;hello&#39;;
circle.area = function () {};

Nach dem Login kopieren

export default 命令

export default用来为模块指定默认输出

//export-default.js
export default function(){
    console.log(&#39;foo&#39;)
}

Nach dem Login kopieren

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字

import cus from &#39;./export-default.js&#39;

Nach dem Login kopieren

export default命令用在非匿名函数前，也是可以的，但是在模块外部该函数名是无效的，加载的时候，视为匿名函数加载，本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为他取任意名字

export default function test(){
    console.log(&#39;test&#39;)
}

Nach dem Login kopieren

对比正常输出和默认输出

//第一组
export function arc(){
    //...
} //输出

import {arc} from &#39;arc&#39;  //输入

//第二组
export default arc2(){
    //...
}  //输出
import arc2 from &#39;arc2&#39;   //输入

Nach dem Login kopieren

总结：export对应的import语句需要使用大括号，export default对应的import语句不需要使用大括号。export default命令用于指定模块的默认输出，显然，一个模块只能有一个默认输出，因此export default在同一个模块中只允许使用一次。所以与他对应的import命令后面才不用加大括号

export 与 import的复合写法

如果在一个模块中，先输入后输出同一个模块，import语句可以与export

Ein Modul ist eine unabhängige Datei. Alle Variablen in dieser Datei können nicht von außen abgerufen werden. Wenn Sie möchten, dass die Außenwelt eine Variable innerhalb des Moduls lesen kann, müssen Sie das Schlüsselwort export verwenden, um die Variable zu exportieren. 🎜 Zum Beispiel: 🎜

export {foo, bar} from &#39;my_module&#39;
//可以简单理解为
import {foo, bar} from &#39;my_module&#39;
export {foo, bar}

Nach dem Login kopieren

🎜Der obige Code ist die Datei test1.js, die Benutzerinformationen speichert. ES6 behandelt es als Modul, das den Befehl export verwendet, um drei Variablen nach außen zu exportieren. Zusätzlich zum Schreiben von 🎜export wie oben gibt es eine andere Möglichkeit, es zu schreiben: 🎜

const main = document.querySelector(&#39;main&#39;);
import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

Nach dem Login kopieren

🎜Zusätzlich zur Ausgabe von Variablen kann der Befehl export auch Funktionen oder Klassen ausgeben🎜 rrreee🎜< Der Befehl code>export kann überall im Modul erscheinen, solange er sich auf der obersten Ebene des Moduls befindet. Wenn es sich um einen Bereich auf Blockebene handelt, wird ein Fehler gemeldet, und das Gleiche gilt für den Befehl import🎜🎜🎜🎜as🎜🎜🎜🎜Normalerweise wird die Variable von ausgegeben export ist der ursprüngliche Name, aber Sie können das Schlüsselwort as verwenden, um den 🎜rrreee🎜🎜import-Befehl🎜🎜🎜 umzubenennen, nachdem Sie den Befehl export zum Definieren verwendet haben Über die externe Schnittstelle des Moduls können andere js-Dateien übergeben werden. < Der Befehl code>import lädt dieses Modul🎜rrreee🎜Wenn Sie die Eingabevariable umbenennen möchten, verwenden Sie zum Umbenennen den Befehl import der Name der Eingabevariable. 🎜rrreee🎜Die mit dem Befehl import eingegebenen Variablen sind alle schreibgeschützt, da es sich im Wesentlichen um eine Eingabeschnittstelle handelt. Mit anderen Worten: Die Schnittstelle darf im Skript, das das Modul lädt, nicht neu geschrieben werden. 🎜rrreee🎜from nach import gibt den Speicherort der Moduldatei an, der ein relativer Pfad oder ein absoluter Pfad sein kann. Das Suffix .js kann weggelassen werden. Wenn es sich nur um den Modulnamen ohne Pfad handelt, muss eine Konfigurationsdatei vorhanden sein, die der JavaScript-Engine den Speicherort des Moduls mitteilt Verwenden Sie auch die Gesamtladung, dh verwenden Sie ein Sternchen (*). Geben Sie ein Objekt an, auf das alle Ausgabewerte geladen werden. 🎜🎜Das Folgende ist eine circle.js-Datei, die zwei Methoden area und circumference ausgibt. 🎜rrreee🎜Jetzt laden Sie dieses Modul. 🎜rrreee🎜Die obige Methode besteht darin, die zu ladenden Methoden einzeln anzugeben. Die allgemeine Lademethode ist wie folgt. 🎜rrreee🎜Beachten Sie, dass das Objekt, in das das Modul als Ganzes geladen wird (das obige Beispiel ist circle), statisch analysierbar sein sollte, sodass Laufzeitänderungen nicht zulässig sind. Die folgenden Schreibmethoden sind nicht zulässig. 🎜rrreee🎜Standardbefehl exportieren🎜🎜export default wird verwendet, um die Standardausgabe für das Modul anzugeben🎜rrreee🎜Wenn andere Module das Modul laden, kann der Befehl import alles angeben für die anonyme Funktion Der Befehl name 🎜rrreee🎜export default kann auch vor einer nicht anonymen Funktion verwendet werden, aber der Funktionsname ist außerhalb des Moduls ungültig. Beim Laden wird er als anonyme Funktion betrachtet Laden. Im Wesentlichen besteht export default darin, eine Variable oder Methode namens default zu exportieren, und das System erlaubt Ihnen dann, ihr einen beliebigen Namen zu geben🎜rrreee🎜Vergleichen Sie normale Ausgabe und Standard Ausgabe🎜rrreee🎜🎜Zusammenfassung:🎜 Die import-Anweisung, die export entspricht, muss geschweifte Klammern verwenden, und die import-Anweisung, die export entspricht default benötigt keine geschweiften Klammern. Der Befehl export default wird verwendet, um die Standardausgabe des Moduls anzugeben. Offensichtlich kann ein Modul nur eine Standardausgabe haben, daher darf export default nur einmal verwendet werden im selben Modul. Daher müssen nach dem entsprechenden Importbefehl keine geschweiften Klammern hinzugefügt werden🎜🎜Kombinierte Schreibmethode für Export und Import🎜🎜Wenn Sie sich in einem Modul befinden, geben Sie zuerst dasselbe Modul ein und geben Sie es dann aus, den import Die Anweisung kann mit Export-Anweisungen zusammengeschrieben werden🎜

export {foo, bar} from &#39;my_module&#39;
//可以简单理解为
import {foo, bar} from &#39;my_module&#39;
export {foo, bar}

Nach dem Login kopieren

上面代码中，export和import语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar.

import()函数

import(specifier)

上面的代码中，import函数的参数specifier,指定所要加载的模块的位置。。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。

import()返回一个 Promise 对象。下面是一个例子。

const main = document.querySelector(&#39;main&#39;);
import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

Nach dem Login kopieren

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

【相关推荐：javascript视频教程、web前端】

Das obige ist der detaillierte Inhalt vonWas zum Importieren von Ressourcen in es6 verwendet werden soll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!