ES6: Noções básicas de sintaxe do módulo

ES6: Introdução à sintaxe do módulo

comando de exportação

1. ES6 fornece dois métodos de exportação:

   //profile.js
   export var a = 1;
   export var b = 2;
   export function c(x,y){
         
         
       return x+y;
   };
   
   
   //profile.js
   var a = 1;
   var b = 2;
   function c(x,y){
         
         
       return x+y;
   };
   export {
         
         a,b,c};
   

2. Você pode usar a palavra-chave as para renomear variáveis ​​ou funções:

   //profile.js
   var a = 1;
   export {
         
         a as A};
   

3. Preste atenção à expressão

   //以下声明都是错误的！
   export 1;
   
   var m = 1;
   export m;
   
   
   //正确写法
   export var m = 1;
   
   var m = 1;
   export {
         
         m}
   

4. A saída da interface pela instrução de exportação e seu valor correspondente são vinculados dinamicamente!

   export var a = 1;
   setTimeout(()=>{
         
         
       a = 2;
   },1000);
   
   //1s后，a的值变成了2；
   

comando de importação

1. Gramática básica

   import {
         
         a,b,c} from './profile';
   

   2. a importação também pode ser renomeada usando como

   import {
         
         a as A} from './profile';
   

   3. O comando de importação tem um efeito de levantamento e será promovido ao cabeçalho de todo o módulo;

   4. O caminho no comando de importação não pode ser substituído por variáveis, porque a importação é executada estaticamente;

   5. Insira a mesma instrução de importação repetidamente e ela será executada apenas uma vez;

Carregamento geral do módulo

• Às vezes, queremos carregar o módulo inteiro, podemos usar os seguintes métodos para alcançar

  //profile.js
  export var a = 1;
  export var b = 2;
  export function c(x,y){
        
        
      return x+y;
  };
  
  //main.js
  import * as profile from './profile';
  console.log(profile.a);
  console.log(profile.b);
  

• Nota: Você não pode adicionar atributos no módulo importado

comando padrão de exportação

1. Para tornar mais fácil para os usuários carregar o módulo sem ler o documento, você pode usar o comando export default para especificar a saída para o módulo.

2. Os arquivos gerados pelo comando padrão de exportação podem ser nomeados durante a importação;

   //profile.js
   //这里的函数可名命也可匿名
   export default function foo(){
         
         
       console.log('heihei');
   }
   
   //main.js
   import heihei from './profile';
   heihei();		//"heihei"
   

3. Em essência, export default é exportar uma variável ou método denominado default, e então o sistema nos permite nomear, portanto, a seguinte escrita é válida.

   // module.js
   function foo(){
         
         
       console.log('foo');
   }
   export {
         
         foo as default}
   //等同于
   export default foo;
   
   
   // main.js
   import {
         
         default as hehe} from './module.js'
   import hehe from './module.js'
   

4. Como default é uma variável, não pode ser seguido por uma declaração de declaração.

   // 正确
   export var a = 1;
   //错误
   export default var a = 1;
   

5. a exportação também pode ser usada para exportar classes

   // profile.js
   export default Myclass;
   
   //main.js
   import hisclass from './profile.js';
   let a = new hisclass();
   

Uso misto de exportação e importação

• Se você deseja inserir o mesmo módulo primeiro e, em seguida, produzir o mesmo módulo em um módulo, você pode misturar as duas sintaxes

  export {
        
        foo,bar} from './profile.js';
  
  // 等同于
  import {
        
        foo,bar} from './profile.js';
  export {
        
        foo,bar};
  
  
  // 整体输出
  export * from './profile.js';
  

• Saída de interface nomeada como a interface padrão

  export {
        
        foo as default} from './profile.js'
  
  //等同于
  import {
        
        foo} from './profile.js';
  export default foo;
  

Constante de módulo cruzado

• Sabemos que a constante declarada por const só é válida no bloco de código atual. Se quiser compartilhar const entre os módulos, você pode usar o método a seguir.

  // constants.js
  export const A= 1;
  
  // main.js
  import * as constants from './constants.js';
  import {
        
        A} from './constants.js';
  
  console.log(A);	// 1
  console.log(constants.A); // 1
  

Precauções para importação

• Os comandos de importação e exportação serão analisados ​​estaticamente em javascript, portanto, serão executados antes de outros módulos, portanto, não podem ser colocados em instruções if, mas devem ser colocados no nível superior de todos os módulos;

• A sintaxe de requerimento é analisada dinamicamente e a importação é analisada estaticamente, portanto, pode ser carregada dinamicamente por meio da função import ();

  import('./mymodule.js')
  	.then(module=>{
      console.log(module.a);
  })
  

• A função import () retorna um objeto de promessa. A diferença de require é que o primeiro é carregado de forma assíncrona e o último é carregado de forma síncrona;

• Se você deseja carregar vários módulos ao mesmo tempo, pode usar o método Promise.all.

  Promise.all(
  	import('./module1.js'),
      import('./module2.js')
  ).then(([module1,module2])=>{
        
        
      ......
  })