ES6 - Módulos - Code World

I. Descripción general

Antes de ES6, se usaba RequireJS o seaJS para implementar la modularización (biblioteca modular basada en la especificación AMD y biblioteca modular basada en la especificación CMD, respectivamente).

ES6 introduce modularidad y su idea de diseño es determinar las dependencias de los módulos, así como las variables de entrada y salida en tiempo de compilación.

La modularización de ES6 se divide en exportar (exportar) @ e importar (importar) dos módulos.

2. Características

Los módulos ES6 habilitan automáticamente el modo estricto, ya sea que agregue use estricto al encabezado del módulo o no.

Se pueden importar y exportar varios tipos de variables en módulos, como funciones, objetos, cadenas, números, booleanos, clases, etc.

Cada módulo tiene su propio contexto y las variables declaradas en cada módulo son variables locales, lo que no contaminará el alcance global.

Cada módulo solo se carga una vez (es un singleton), si vuelve a cargar el mismo archivo en el mismo directorio, se leerá directamente desde la memoria.

Tres, exportar e importar.

1. Uso básico

Los módulos importan y exportan variables de varios tipos, como cadenas, valores, funciones y clases.

Las declaraciones de funciones y las declaraciones de clases exportadas deben tener nombres (considerados por separado por el comando predeterminado de exportación).

No sólo se pueden exportar declaraciones sino también referencias (por ejemplo, funciones).

El comando de exportación puede aparecer en cualquier parte del módulo, pero debe estar en el nivel superior del módulo.

El comando de importación se eleva al encabezado de todo el módulo y se ejecuta primero.

/*-----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!

Se recomienda utilizar llaves para especificar un conjunto de variables que se generarán y escribirlas al final del documento para aclarar la interfaz exportada.

Tanto las funciones como las clases deben tener nombres correspondientes y el final del documento de exportación también evita que no haya nombres correspondientes.

2. Uso de como

El nombre de la interfaz exportado por el comando de exportación debe tener una correspondencia uno a uno con las variables dentro del módulo.

El nombre de la variable importada debe ser el mismo que el nombre de la interfaz exportada, es decir, el orden puede 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

El nombre de la interfaz exportada de diferentes módulos se repite; utilice as para redefinir el nombre de la variable.

3. Características del comando de importación.

Atributo de solo lectura : No está permitido reescribir el punto de referencia de la interfaz en el script del módulo cargado, es decir, puede reescribir el valor del atributo del tipo de variable de importación como un objeto, pero no puede reescribir el valor del importar el tipo de variable como tipo básico.

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

Modo singleton : repita la misma declaración de importación varias veces, luego solo se ejecutará una vez, no varias veces. Importar el mismo módulo, declarar diferentes referencias de interfaz, declarará las variables correspondientes, pero solo ejecutará la importación una 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";

Función de ejecución estática: la importación se ejecuta estáticamente, por lo que no se pueden utilizar expresiones ni variables.

4. exportar comando predeterminado

En un archivo o módulo, puede haber múltiples exportaciones e importaciones, pero solo una exportación predeterminada.

El valor predeterminado en la exportación predeterminada es la variable de interfaz de exportación correspondiente.

Para exportar mediante exportación, debe agregar {} al importar, pero la exportación predeterminada no lo necesita.

Los miembros expuestos por defecto de exportación pueden ser recibidos por cualquier variable.

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

4. Uso compuesto

Nota : import() es una propuesta y la explicación no se ampliará aquí por el momento.

La exportación y la importación se pueden utilizar en el mismo módulo, utilizando las funciones:

Puede cambiar el nombre de la interfaz exportada, incluida la predeterminada.

Uso combinado de exportación e importación, también puede exportar todo, la interfaz exportada por el módulo actual anulará la exportación heredada.

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