Maison > Article > interface Web > 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
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 pasRegardez 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 renommageLes é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' }
À propos de l'importation, de l'exportation et de l'exportation par défaut introduits ici, nous continuons à
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 chargelet 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.exportsSelon 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.
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 = ainput.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 = aentré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 = ainput.js
const obj = require('./output.js') console.log(obj); //=>{ c: 'valueC1', a: 'valueA1' }
当直接给 module.exports时,exports会失效
在ES6中export default 导出的是一个对象
在AMD中exports和module.exports导出的也都是一个对象
所以如果你手中的项目代码支持两种规范,那么事可以交叉使用的(当然不建议这么去做)
通过export导出的不一定是一个对象
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' }
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' }
当直接给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!