ES6: carga del módulo

Diferencias entre los módulos ES6 y los módulos CommonJS

La salida de CommonJS es una copia del valor de un valor, y la salida del módulo ES6 es una referencia a un valor. Es decir, cambiar el valor de salida del módulo CommonJS no afectará el valor del módulo en sí, mientras que ES6 afectará al mismo valor de una referencia de módulo.
CommonJS se carga en tiempo de ejecución y ES6 es la interfaz de salida en tiempo de compilación.

El comando de importación carga el módulo CommonJS

En el entorno de Node, use el comando de importación para cargar el módulo CommonJS, y Node tratará automáticamente la propiedad module.exports como la salida predeterminada del módulo, que es equivalente a export default.

// a.js
module.exports = {
      
      
    foo : "hello"
}

// 等同于
module export {
      
      
	foo : "hello"
}

// 引入
import baz from './a';
import {
      
      default as baz} from './a';
// baz === { foo : "hello"};

  
- 如果采用整体输入的方法，default将会取代module.exports作为输入的接口

  ```js
  import * as baz from './a';
  // baz === {
  //	  get default(){
  //        return module.exports;
  //    },
  //    get foo(){
  //        return {this.default.foo}.bind(baz);
  //    }
  //}

En el ejemplo anterior, this.default reemplaza module.exports, y no es difícil ver que la sintaxis de importación agregará el atributo predeterminado a baz.

requiere comando para cargar el módulo ES6

Cuando se utiliza require para cargar un módulo ES6, todas las interfaces de salida del módulo ES6 se convertirán en atributos del objeto de entrada

// a.js
let foo = {
      
      
    bar : "hello"
}
export default foo;


// b.js
const amodule = require('./a.js');
// amodule.default === {bar : "hello"}

Carga cíclica

La llamada carga cíclica significa que dos módulos se refieren entre sí, lo que hace que el programa se ejecute de forma recursiva, y los dos módulos tratan esto de diferentes maneras.

Carga cíclica de CommonJS

Principio de carga del módulo CommonJS: no importa cuántas veces se cargue un módulo cjs, solo se ejecutará una vez cuando se cargue por primera vez, y todas las cargas posteriores son los resultados devueltos por primera vez, a menos que la caché se borre manualmente;

// a.js
export.done = false;
let b = require('./b');
console.log('在a.js中，b.done = %j',b.done);
export done = true;
console.log('在a.js中，b.done = %j',b.done);
console.log('a.js执行完毕');

// b.js
export.done = false;
let a = require('./a');
console.log('在b.js中，a.done = %j',a.done);
export done = true;
console.log('在b.js中，a.done = %j',a.done);
console.log('b.js执行完毕')；

En el código anterior, la ejecución de a.js en la segunda línea ejecutará b.js, y la ejecución de b.js en la segunda línea ejecutará a.js, y el sistema automáticamente irá a a.js para encontrar el valor de exportación correspondiente, pero a.js aún no se ha ejecutado, por lo tanto, solo los valores que se han ejecutado se pueden extraer del valor de exportación.
```
// main.js
var a = require('./a');
var b = require('./b');
console.log('在main.js中，a.done = %j,b.done = %j',a.done,b.done);

// 输出
在b.js中，a.done = false;
b.js执行完毕；
在a.js中，b.done = true;
a.js执行完毕；
在main.js中，a.done = true,b.done = true;
```
El código anterior demuestra que la ejecución del archivo principal en la segunda línea no volverá a ejecutar b.js, sino que devolverá directamente su valor final.

Carga cíclica de módulos ES6

Dado que los módulos ES6 se referencian dinámicamente, las variables no se almacenarán en caché, sino que apuntarán al objeto referenciado.

// a.js
import {
      
      bar} from "./b.js";
console.log("a.js");
console.log(bar);
export let foo = 'foo';

// b.js
import {
      
      foo} from "./a.js";
console.log("b.js");
console.log(foo);
export let bar = "bar";


// 执行a.js
b.js
undefined
a.js
bar

Se ejecuta el código anterior, a.js, la primera línea de código hace referencia a b.js, por lo que se ejecuta b.js, y la primera línea de b.js es para introducir a.js, porque a.js ya se está ejecutando, por lo que no se volverá a cargar. Una vez, se genera undefined y luego se ejecuta normalmente.

Comparación de los dos modos

// a.js
import {
    
    bar} from "./b.js"
export function foo(){
    
    
    console.log('foo');
    bar();
    console.log('执行完毕');
}
foo();

// b.js
import {
    
    foo} from "./a.js"
export function bar(){
    
    
    console.log('bar');
    if(Math.random() > 0.5){
    
    
        foo();
    }
}

El fragmento de código anterior no se puede ejecutar bajo el estándar CommonJS. a carga b, y luego b carga a. En este momento, la ejecución de a no ha finalizado, por lo que el resultado de salida será nulo, es decir null, el valor de foo para b , por lo que no se puede ejecutar y se producirá un error. ser informado;
Según el estándar ES6, debido a que la importación crea una referencia a un objeto, cuando se carga a, la primera línea de código crea una barreferencia a b.js, y cuando se ejecuta en la cuarta línea de código, saltará a b.js Ejecute bar(); luego ejecute la consola de la siguiente línea de código.