Índice
1, Pontos a serem observados
exportar
1. O comando de exportação só pode gerar 3 interfaces:
- Funções
- Aulas
- Variáveis declaradas por var, let e const.
2. A saída da interface pelo comando de exportação possui um relacionamento de ligação dinâmica com seu valor correspondente. Ou seja, através desta interface é possível obter o valor em tempo real dentro do módulo.
// test1.js
export var foo = "cat";
setTimeout(() => (foo = "dog"), 500);
import {
foo } from "./test1.js";
setTimeout(() => {
console.log(foo); // dog
}, 1000);
3. O comando de exportação estipula que a interface externa deve estabelecer uma correspondência um a um com as variáveis dentro do módulo .
Em outras palavras, se você deseja exportar as três interfaces acima, você só pode usar os três métodos a seguir
export var firstName = "cat"; // 直接导出
function add(x, y) {
return x + y;
}
export {
add }; // 放到对象中
class MyName {
}
export {
MyName as MyNameFaker }; // 使用别名
Em vez disso:
// 报错
export 1;
// 报错
var m = 1;
export m;
// 报错
function f() {
}
export f;
4. O comando de exportação pode aparecer em qualquer lugar do módulo, desde que esteja no nível superior do módulo . Se estiver no escopo de nível de bloco, um erro será relatado.
Isso ocorre porque dentro de um bloco de código condicional, a otimização estática não pode ser feita, o que viola a intenção original do design do módulo ES6.
function foo() {
export default "bar"; // SyntaxError
}
importar
Tome a seguinte test1.jsexportação como exemplo
// test1.js
export var firstName = "cat"; // 直接导出
export var obj = {
name: '下雪天的夏风' }
function add(x, y) {
return x + y;
}
export {
add }; // 放到对象中
1. Use para {}especificar o nome da variável importada de outros módulos. O nome da variável deve ser igual ao nome da interface externa do módulo importado .
2. asRenomeie as variáveis importadas através da palavra-chave.
import {
firstName as myname } from './test1.js';
3. As variáveis importadas são todas somente leitura porque sua essência é a interface importada.
import {
firstName, obj } from './test1.js'
obj.name = 123; // ok
firstName = {
}; // TypeError: Assignment to constant variable;
4. importSe houver efeito de promoção variável, ele será promovido ao cabeçalho de todo o módulo e executado primeiro.
add(1, 1);
import {
add } from "./test1.js";
padrão de exportação
1. Um módulo só pode ter uma saída padrão, portanto export defaulto comando só pode ser usado uma vez.
2. Essencialmente: export defaulté gerar uma defaultvariável ou método chamado. então
// test1.js
function add(x, y) {
return x + y;
}
export default add;
// 等价于
export {
add as default };
import otherName from './test1.js'; // otherName 就是 add 函数。
// 等价于
import {
default as otherName } from "./test1.js";
Mesma razão
// 可行
export default 123;
// 报错
export 123;
// 正确
export var a = 1;
// 正确
var b = 1;
export default b;
// 错误
export default var a = 1;
3. importVocê pode importar exportações padrão e outras interfaces ao mesmo tempo.
// test1.js
export var a = 1;
function add(x, y) {
return x + y;
}
export default add;
import otherName, {
a } from './test1.js'; // otherName 就是 add 函数。
2. Métodos comumente usados
Exemplo 1,
// test.js
export var firstName = "cat";
function add(x, y) {
return x + y;
}
export {
add };
class MyName {
}
export {
MyName as MyNameFaker };
import {
firstName, add, MyNameFaker } from "./test.js";
Exemplo 2,
// test1.js
export const firstName = "cat";
export function add(x, y) {
return x + y;
}
export default {
name: "123",
};
// test2.js
export * from './test1.js' // 导出除默认导出之外的所有导出。
import a from "./test1.js"; // a: {name: '123'}
// test3.js
import {
firstName, add } from "./test2.js";
// SyntaxError: The requested module './test2.js' does not provide an export named 'default'
import a from "./test2.js";
Exemplo 3,
// test1.js
export var a = 1;
function add(x, y) {
return x + y;
}
export default add;
// test2.js
export {
default as addFaker } from "./test1.js";
import {
addFaker } from "./test2.js"; // addFaker 就是 add 函数
E se
// test2.js
export * as all from "./test1.js";
import {
all } from "./test2.js"; // all 是 { a: 1, default: add函数 }