Comparaison de l'import et de l'export des modules AMD et ES6 en JavaScript (exemple de code)

Le contenu de cet article concerne la comparaison de l'importation et de l'exportation des modules AMD et ES6 en JavaScript (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Notre front-end rencontre souvent des fonctions d'importation et d'exportation pendant le processus de développement
Lors de l'importation, parfois c'est requis, parfois c'est importation
Lors de l'exportation, parfois c'est des exportations, des exportations. , parfois exporter, exporter par défaut
Aujourd'hui, nous présenterons brièvement ces contenus

importation, exportation, exportation par défaut

importation, exportation, exportation par défaut appartiennent à la spécification ES6

importer

L'importation est exécutée pendant le processus de compilation
C'est-à-dire qu'elle est exécutée avant l'exécution du code
Par exemple, si le chemin après l'importation est mal écrit, il le sera. exécuté avant d'exécuter le code. Une erreur sera générée.
Lors de l'écriture du code, import n'a pas besoin d'être écrit au début de js.
La commande import a un effet liftant et sera promue en tête de. le module entier et exécuté en premier. (Il est exécuté pendant la phase de compilation)
L'importation est exécutée de manière statique
Comme l'importation est exécutée de manière statique, les expressions et les variables ne peuvent pas être utilisées, c'est-à-dire les structures syntaxiques qui ne peuvent obtenir le résultat qu'au moment de l'exécution
Par exemple , vous ne pouvez pas utiliser import
dans if et else. Pour un autre exemple, le chemin de from après l'importation peut être un chemin relatif ou un chemin absolu, mais il ne peut pas être un chemin obtenu à partir d'une variable

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

.

L'importation peut être renommée en utilisant
Il existe de nombreuses méthodes d'importation pour l'importation

  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'

La méthode d'importation est quelque peu liée à l'exportation lorsque nous parlons d'exportation ci-dessous. , ce qui précède Les méthodes d'importation sont présentées une par une

exoprt et export default

Mettez exoprt et export default ensemble car elles sont étroitement liées
Pour faire simple : l'exportation est l'exportation, l'exportation par défaut est l'exportation par défaut
Un module peut avoir plusieurs exportations, mais il ne peut y avoir qu'une seule exportation par défaut. L'exportation par défaut peut coexister avec plusieurs exportations
L'exportation par défaut est l'exportation par défaut, et l'exportation. est enveloppé avec {} Un objet qui existe sous la forme de paires clé-valeur
Différentes méthodes d'exportation conduisent à différentes méthodes d'importation
Par conséquent, il est recommandé d'utiliser la même méthode d'importation et d'exportation dans le. même projet pour faciliter le développement
Une fois l'export par défaut déconstruit, il devient export
Regardez la différence entre export et export default à travers deux démos intuitives
Regardez d'abord un morceau de code (export)
output.js

const a = 'valueA1'
export {a}

input.js

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

Faites attention au code ci-dessus Le a exporté par export {a} est le même que le a importé par. import {a}
Regardez un autre morceau de code (export par défaut)

const a = 'valueA1'
export default{a}

input.js

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

Regardez le input.js dans le châtaigne par défaut d'export, nous avons apporté quelques modifications

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

Nous avons apporté quelques modifications, mais le résultat ne change pas. L'importation importe l'objet sous l'export par défaut. Il peut être appelé n'importe quel nom, car il n'y aura qu'un seul export par défaut<.>

exoprt et export default. Mélangez

exoprt et export Il est pris en charge d'utiliser default dans le même module en même temps, bien que nous ne le fassions généralement pas

Regardez une châtaigne.
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] }

comme renommage

Les éléments exportés via exoprt et l'exportation par défaut prennent en charge le renommage comme lors de leur importation dans le import

Jetons un oeil
C'est toujours le output.js ci-dessus

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

Les variables après ainsi que les variables que vous souhaitez utiliser dans input.js

Focus sur cette partie

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

Représente tout, y compris ceux exportés par export et export default

Nous l'avons dit avant cela import{ } et export{} ont une correspondance biunivoque, donc ce qui est exporté dans export n'est pas pris en charge dans import{} Utiliser *

À propos de l'importation, de l'exportation et de l'exportation par défaut introduits ici, nous continuons à

require, exports, module.exports (rappelez-vous les s suivants)

Il s'agit d'une spécification AMD

require

require est un appel d'exécution, donc require peut théoriquement être utilisé n'importe où dans le code

exiger prend en charge l'introduction dynamique

Par exemple, ceci est pris en charge

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

exiger la variable de support de chemin

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

est introduit via require, qui est un processus d'affectation

exports et module.exports

Selon les spécifications AMD

Chaque fichier est un module et a sa propre portée. Les variables, fonctions et classes définies dans un fichier sont privées et ne sont pas visibles par les autres fichiers.
À l'intérieur de chaque module, la variable module représente le module actuel. Cette variable est un objet et son attribut exports (c'est-à-dire module.exports) est l'interface externe. Le chargement d'un module charge en fait l'attribut module.exports du module.

Pour plus de commodité, Node fournit une variable d'exportation pour chaque module, pointant vers module.exports. Cela équivaut à avoir une ligne comme celle-ci en tête de chaque module.

const exports = module.exports;

Donc

les deux façons d'écrire suivantes sont équivalentes

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

Comme mentionné précédemment, fournissez une variable exports dans chaque module, pointant vers module.exports.

Vous ne pouvez donc pas attribuer directement une valeur aux exportations, l'affectation écrasera

const exports = module.exports;

Attribuer directement une valeur aux exportations coupera la relation entre les exportations et module.exports

Regardez une châtaigne
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' }

Continuez à regarder le code

output.js

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

entrée. js

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

encore une fois Regardez un morceau de code

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视频教程栏目！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!