ES6: Basics of Module Syntax

ES6: Introduction to Module syntax

export command

1. ES6 provides two export methods:

   //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. You can use the as keyword to rename a variable or function:

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

3. Pay attention to expression

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

4. The interface output by the export statement and its corresponding value are dynamically bound!

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

import command

1. Basic grammar

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

   2. import can also be renamed using as

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

   3. The import command has a lifting effect, and it will be promoted to the head of the entire module;

   4. The path in the import command is not allowed to be replaced by variables, because the import is executed statically;

   5. Enter the same import statement repeatedly, and it will only be executed once;

Overall module loading

• Sometimes, we want to load the entire module, we can use the following methods to achieve

  //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);
  

• Note: You cannot add attributes in the imported module

export default command

1. To make it easier for users to load the module without reading the document, you can use the export default command to specify the output for the module.

2. The files output by the export default command can be named during import;

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

3. Essentially, export default is to export a variable or method called default, and then the system allows us to name it. Therefore, the following writing is valid.

   // 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. Because default is a variable, it cannot be followed by a declaration statement.

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

5. export can also be used to export classes

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

Mixed usage of export and import

• If you want to input the same module first and then output the same module in a module, you can mix the two syntaxes

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

• Named interface output as the default interface

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

Cross-module constant

• We know that the constant declared by const is only valid in the current code block. If you want to share const across modules, you can use the following method.

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

Precautions for import

• Import and export commands will be statically parsed in javascript, so they will be executed before other modules, so they cannot be placed in if statements, but must be placed at the top level of all modules;

• The require syntax is parsed dynamically, and import is parsed statically. Therefore, it can be dynamically loaded through the import() function;

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

• The import() function returns a promise object. The difference from require is that the former is loaded asynchronously, and the latter is loaded synchronously;

• If you want to load multiple modules at the same time, you can use the Promise.all method.

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