ES6 - Módulos - Code World

I. Visão geral

Antes do ES6, RequireJS ou seaJS eram usados para implementar a modularização (biblioteca modular baseada na especificação AMD e biblioteca modular baseada na especificação CMD, respectivamente).

ES6 introduz modularidade e sua ideia de design é determinar as dependências dos módulos, bem como as variáveis de entrada e saída em tempo de compilação.

A modularização do ES6 é dividida em exportar (exportar) @ e importar (importar) dois módulos.

2. Recursos

Os módulos ES6 ativam automaticamente o modo estrito, independentemente de você adicionar use strict; ao cabeçalho do módulo ou não.

Vários tipos de variáveis podem ser importados e exportados em módulos, como funções, objetos, strings, números, booleanos, classes, etc.

Cada módulo possui seu próprio contexto, e as variáveis declaradas em cada módulo são variáveis locais, que não poluirão o escopo global.

Cada módulo só é carregado uma vez (é um singleton), se você carregar novamente o mesmo arquivo no mesmo diretório, ele será lido diretamente da memória.

Três, exportar e importar

1. Uso básico

Os módulos importam e exportam variáveis de vários tipos, como strings, valores, funções e classes.

As declarações de função e declarações de classe exportadas devem ter nomes (considerados separadamente pelo comando export default).

Não apenas declarações, mas também referências (por exemplo, funções) podem ser exportadas.

O comando de exportação pode aparecer em qualquer lugar do módulo, mas deve estar no nível superior do módulo.

O comando de importação é elevado ao topo de todo o módulo e é executado primeiro.

/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {
    static a = "yeah!";
}
export { myName, myAge, myfn, myClass }
 
/*-----import [xxx.js]-----*/
import { myName, myAge, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!

Recomenda-se usar colchetes para especificar um conjunto de variáveis a serem geradas e escrevê-las no final do documento para esclarecer a interface exportada.

Tanto as funções quanto as classes precisam ter nomes correspondentes, e o final do documento de exportação também evita não ter nomes correspondentes.

2. Uso de como

O nome da interface exportado pelo comando export deve ter uma correspondência um-para-um com as variáveis dentro do módulo.

O nome da variável importada deve ser igual ao nome da interface exportada, ou seja, a ordem pode ser inconsistente.

/*-----export [test.js]-----*/
let myName = "Tom";
export { myName as exportName }
 
/*-----import [xxx.js]-----*/
import { exportName } from "./test.js";
console.log(exportName);// Tom
使用 as 重新定义导出的接口名称，隐藏模块内部的变量
/*-----export [test1.js]-----*/
let myName = "Tom";
export { myName }
/*-----export [test2.js]-----*/
let myName = "Jerry";
export { myName }
/*-----import [xxx.js]-----*/
import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";
console.log(name1);// Tom
console.log(name2);// Jerry

O nome da interface exportada de diferentes módulos é repetido, use as para redefinir o nome da variável.

3. Recursos do comando de importação

Atributo somente leitura : Não é permitido reescrever o ponto de referência da interface no script do módulo carregado, ou seja, você pode reescrever o valor do atributo do tipo de variável de importação como um objeto, mas não pode reescrever o valor do importe o tipo de variável como um tipo básico.

import {a} from "./xxx.js"
a = {}; // error
 
import {a} from "./xxx.js"
a.foo = "hello"; // a = { foo : 'hello' }

Modo Singleton : Repita a mesma instrução de importação várias vezes, então ela será executada apenas uma vez, não várias vezes. Importar o mesmo módulo, declarando diferentes referências de interface, declarará as variáveis correspondentes, mas executará a importação apenas uma vez.

import { a } "./xxx.js";
import { a } "./xxx.js";
// 相当于 import { a } "./xxx.js";
 
import { a } from "./xxx.js";
import { b } from "./xxx.js";
// 相当于 import { a, b } from "./xxx.js";

Recurso de execução estática: a importação é executada estaticamente, portanto, expressões e variáveis não podem ser usadas.

4. comando padrão de exportação

Em um arquivo ou módulo, pode haver múltiplas exportações e importações, mas apenas uma exportação padrão.

O padrão em export default é a variável de interface de exportação correspondente.

Para exportar por meio de exportação, você precisa adicionar { } ao importar, mas o padrão de exportação não precisa disso.

Os membros expostos por padrão de exportação podem ser recebidos por qualquer variável.

var a = "My name is Tom!";
export default a; // 仅有一个
export default var c = "error"; 
// error，default 已经是对应的导出变量，不能跟着变量声明语句
 
import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收

4. Uso composto

Nota : import() é uma proposta e a explicação não será estendida aqui por enquanto.

exportação e importação podem ser utilizadas no mesmo módulo, utilizando os recursos:

Você pode renomear a interface exportada, incluindo padrão.

Uso combinado de exportação e importação, você também pode exportar tudo, a interface exportada pelo módulo atual substituirá a exportação herdada.

export { foo, bar } from "methods";
 
// 约等于下面两段语句，不过上面导入导出方式该模块没有导入 foo 与 bar
import { foo, bar } from "methods";
export { foo, bar };
 
/* ------- 特点 1 --------*/
// 普通改名
export { foo as bar } from "methods";
// 将 foo 转导成 default
export { foo as default } from "methods";
// 将 default 转导成 foo
export { default as foo } from "methods";
 
/* ------- 特点 2 --------*/
export * from "methods";

ES6 - Módulos