Vergleich von Import und Export von AMD- und ES6-Modulen in JavaScript (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit dem Vergleich des Imports und Exports von AMD- und ES6-Modulen in JavaScript (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist .

Unser Frontend stößt während des Entwicklungsprozesses häufig auf Import- und Exportfunktionen.
Beim Importieren ist es manchmal erforderlich, manchmal ist es Import.
Beim Exportieren sind es manchmal Exporte, Modulexporte , manchmal Export, Exportstandard
Heute werden wir diese Inhalte kurz vorstellen

Import, Export, Exportstandard

Import, Export, Exportstandard gehören zur ES6-Spezifikation

Import

Der Import wird während des Kompilierungsprozesses ausgeführt
Das heißt, er wird ausgeführt, bevor der Code ausgeführt wird
Wenn beispielsweise der Pfad nach dem Import falsch geschrieben ist, wird dies der Fall sein Wird vor dem Ausführen des Codes ausgeführt.
Beim Schreiben von Code muss der Import nicht an die Spitze von js geschrieben werden Das gesamte Modul wird zuerst gelesen und ausgeführt. (Wird während der Kompilierungsphase ausgeführt)
Der Import wird statisch ausgeführt
Da der Import statisch ausgeführt wird, können keine Ausdrücke und Variablen verwendet werden, d. h. Syntaxstrukturen, die das Ergebnis nur zur Laufzeit erhalten können
Zum Beispiel , Sie können import
nicht in if und else verwenden. In einem anderen Beispiel kann der Pfad von from after import ein relativer Pfad oder ein absoluter Pfad sein, aber es kann kein Pfad sein, der auf einer Variablen

//import 路径不可以为变量
var url = './output'
  import {
    a,
    b
  } from url//这么写会报错
//------------------
//import 的引入与否不能和代码逻辑向关联
let status= true
if(status){
     import {
    a,
    b
  } from url//这么写会报错
}

importieren Sie können as zum Umbenennen verwenden

Es gibt viele Importmethoden

  import foo from './output'
  import {b as B} from './output'
  import * as OBj from './output'
  import {a} from './output'
  import {b as BB} from './output'
  import c, {d} from './output'

Die Importmethode hängt in gewisser Weise mit dem Export zusammen. Wir werden weiter unten darauf eingehen Führen Sie die oben genannten Importmethoden nacheinander aus.

exoprt und export default

Fügen Sie exoprt und export default zusammen, da sie eng miteinander verbunden sind

Einfach ausgedrückt: Export ist Export und Export Standard ist der Standardexport

Ein Modul kann mehrere Exporte haben, aber es kann nur einen Exportstandard geben.
Exportstandard ist der Standardexport export ist ein in {} eingeschlossenes Objekt. Es liegt in Form von Schlüssel-Wert-Paaren vor.Unterschiedliche Exportmethoden führen zu unterschiedlichen Importmethoden.

Daher wird empfohlen, dieselbe Import- und Exportmethode zu verwenden dasselbe Projekt, um die Entwicklung zu erleichtern
Export Nach der Standarddekonstruktion ist es ExportSehen Sie sich den Unterschied zwischen Export und Exportstandard anhand zweier intuitiver Demos an
Sehen wir uns zunächst einen Codeabschnitt an (Export)
output.js

const a = 'valueA1'
export {a}

input.js

import {a} from './output.js'//此处的import {a}和export {a}，两个a是一一对应关系
console.log(a)//=>valueA1

Beachten Sie, dass im obigen Code das von export {a} exportierte a das gleiche a ist wie das von import {a} importierte a.

Sehen Sie sich einen anderen Codeabschnitt an (Exportstandard)

const a = 'valueA1'
export default{a}

input js

import a from './output.js'//此处的a和export default{a}，不是一个a，
console.log(a)//=>{ a: 'valueA1' }

Sehen Sie sich die input.js in der Kastanie von Export Default an. Wir haben einige Änderungen vorgenommen.

import abc from './output.js'//此处的a和export default{a}，不是一个a，
console.log(abc)//=>{ a: 'valueA1' }

Wir haben einige Änderungen vorgenommen, aber die Ausgabe hat sich nicht geändert. Der Import erfolgt unter Exportstandard. Das Objekt kann unter einem beliebigen Namen aufgerufen werden, da es nur einen Exportstandard gibt.

Exoprt und Export default werden miteinander gemischt.

exoprt und export default werden gleichzeitig im selben Modul verwendet, was jedoch unterstützt wird. Wir tun dies im Allgemeinen nicht.

Sehen Sie sich eine Kastanie an

output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
const d = 'valueD1'
function foo() {
  console.log(`foo执行，c的值是${c}`);
}
export {a}
export {b}
export default { b,d,foo}

input.js

import obj, {a,b } from './output'
console.log(a); //=>valueA1
console.log(b); //=>valueB1
console.log(obj); //=>{ b: 'valueB1', d: 'valueD1', foo: [Function: foo] }

as rename

Export über exoprt und export default Wenn der Import eingeführt wird, unterstützt er das Umbenennen über

Schauen Sie mal

Es ist immer noch die obige Ausgabedatei

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
const d = 'valueD1'
function foo() {
  console.log(`foo执行，c的值是${c}`);
}
export {a}
export {b}
export default { b,d,foo}

input.js

import {a as A} from './output'
import {* as A} from './output'//这是不支持的
import * as obj from './output'
console.log(A); //=>valueA1
console.log(obj); //=>{ a: 'valueA1',default: { b: 'valueB1', d: 'valueD1', foo: [Function: foo] },b: 'valueB1' }

Die Variable nach as ist Die

, die Sie in input.js verwenden möchten, konzentriert sich auf diesen Teil

import {* as A} from './output'//这是不支持的
import * as obj from './output'
console.log(obj); //=>{ a: 'valueA1',default: { b: 'valueB1', d: 'valueD1', foo: [Function: foo] },b: 'valueB1' }

stellt alles dar, einschließlich Export und Export standardmäßig exportiert

• Wir haben bereits gesagt, dass es eine Eins-zu-Eins-Entsprechung zwischen Import{} und Export{} gibt, also ist der Export im Export nicht unterstützt im Import{} >require, exports, module.exports (denken Sie an die folgenden s)

Dies ist die AMD-Spezifikation

require

require ist ein Laufzeitaufruf, daher ist require theoretisch überall im Code einsetzbar

require unterstützt dynamische Einführung

Dies wird beispielsweise unterstützt

let flag = true
if (flag) {
  const a = require('./output.js')
  console.log(a); //支持
}

require path unterstützt Variablen

let flag = true
let url = './output.js'
if (flag) {
  const a = require(url)
  console.log(a); //支持
}

Einführung durch require ist ein Zuweisungsprozess

exports und module.exports

Gemäß AMD-Spezifikationen

jede Datei ist ein Modul und hat ihren eigenen Umfang. In einer Datei definierte Variablen, Funktionen und Klassen sind privat und für andere Dateien nicht sichtbar.

In jedem Modul repräsentiert die Modulvariable das aktuelle Modul. Diese Variable ist ein Objekt und ihr Exportattribut (dh module.exports) ist die externe Schnittstelle. Beim Laden eines Moduls wird tatsächlich das module.exports-Attribut des Moduls geladen.

Der Einfachheit halber stellt Node für jedes Modul eine Exportvariable bereit, die auf module.exports verweist. Dies entspricht einer Zeile wie dieser am Kopf jedes Moduls.

const exports = module.exports;

Also
die folgenden beiden Schreibweisen sind gleichwertig

exports.a ='valueA1'
module.exports.a='valueA1'

Wie bereits erwähnt, wird in jedem Modul eine Exportvariable bereitgestellt, die auf module.exports verweist.

Sie können exports also keinen Wert direkt zuweisen, die Zuweisung wird überschrieben

const exports = module.exports;

Wenn Sie exports direkt einen Wert zuweisen, wird die Beziehung zwischen exports und module.exports unterbrochen Sehen Sie sich ein Beispiel an

output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
module.exports = { c}
exports.b = b//当直接给 module.exports时，exports会失效
module.exports.a = a

input.js

  const obj = require('./output.js')
  console.log(obj); //=>{ c: 'valueC1', a: 'valueA1' }

Schauen Sie sich den Code weiter an
output.js

//部分省略
exports.b = b//这样可以生效
module.exports.a = a

input.js

  const obj = require('./output.js')
  console.log(obj); //=>{ b: 'valueB1', a: 'valueA1' }

Schauen Sie sich einen anderen Code an
output.js

//部分省略
module.exports = { c}
module.exports.a = a

input.js

  const obj = require('./output.js')
  console.log(obj); //=>{ c: 'valueC1', a: 'valueA1' }

当直接给 module.exports时，exports会失效

交叉使用

在ES6中export default 导出的是一个对象
在AMD中exports和module.exports导出的也都是一个对象
所以如果你手中的项目代码支持两种规范，那么事可以交叉使用的（当然不建议这么去做）
通过export导出的不一定是一个对象

demo1

output.js

//部分省略
module.exports = { c}
module.exports.a = a

inputj.s

import obj from './output'
import {a} from './output'
console.log(a);//=>valueA1
console.log(obj);//=>{ c: 'valueC1', a: 'valueA1' }

demo2

output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
function foo() {
  console.log(`foo执行，c的值是${c}`);
}
export {a}
export default {b,c,foo}
export {b}

input.js

  const a = require('./output.js')
  console.log(a); //=>{ a: 'valueA1',default: { b: 'valueB1', c: 'valueC1', foo: [Function: foo] }, b: 'valueB1' }

总结

• require，exports，module.export属于AMD规范，import，export，export default属于ES6规范
• require支持动态导入，动态匹配路径，import对这两者都不支持
• require是运行时调用，import是编译时调用
• require是赋值过程，import是解构过程
• 对于export和export default 不同的使用方式，import就要采取不同的引用方式，主要区别在于是否存在{},export导出的，import导入需要{},导入和导出一一对应,export default默认导出的，import导入不需要{}
• exports是module.export一种简写形式，不能直接给exports赋值

• 当直接给module.export赋值时，exports会失效

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

Das obige ist der detaillierte Inhalt vonVergleich von Import und Export von AMD- und ES6-Modulen in JavaScript (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!