ES6模块详解-优快云博客

本文深入解析ES6模块的定义和使用，包括不同导出方式、导入模块的多种途径及提升效果，对比import与import()的区别，阐述按需加载模块的方法。

一、模块化

一个JS文件就是一个模块，暴露出一个接口使用 .(js可以省略)

CommonJS
- require('http') 导入模块
  - 相对路径 require('./module1');
  - 绝对路径 require('jquery-min.js');
  - 模块名先去找内置模块，内置模块没有在去文件夹node_models里面找，、内置模块 => node_modules模块 require('http')
- modeule.exports 导出模块建议使用module.exports全部导出, 会覆盖exports内存地址， exports一个个导出
AMD require.js
CMD sea.js
ES6模块(采用严格模式)
- import导入模块(预解释完成了)、import()按需导入模块，返回promise对象
- export导出模块、export default 导出默认模块

二、定义和使用模块 (ES6 www.jianshu.com/p/3d69d4ac2…)

1. 导出模块和导入模块对应
     - export const a =1;               ===> import {a} from './module1.js'
     - export { a, b }                  ===> import {a, b} from './module1.js'
     - export {a as xx}                 ===> import {xx, b as cc} from './module1.js'
     - export default function() {}     ===> import fn from './module1.js'
     - export default {                 ===> import mod from './module1.js'   mod.new Person()
        Person
      }
      - export {a, b, c, d}             ===> import * as common from './module1.js',   common.a common.b
复制代码

   module1.js文件
  //==> 1.一一导出
      export let a = 1;
      export let b = 2;             =======>> import {a, b, c} from './a.js'
      export let c = 3;
  
  //==>2.全部一次导出
      let a = 1;
      let b = 2;
      let c = 3;
      export {                     =======>> import {a, b, c} from './a.js'
          a,
          b, 
          c
      }
      
   //==> 3.使用别名
      let a = 1;
      let b = 2;
      let c = 3;
      export {                  =======>> import {x, y, z} from './a.js'  import里面也可以用别名哦!
                                =======>> ***接收所有用别名 import * as modTwo from './a.js' import接收所有的导出用别名
          a as x,                       modTwo.a   modTwo.b  modTwo.c
          b as y, 
          c as z
      }
      
   //==> 4.导出函数
   const let fn = function() {
       
   }
   export {fn};                   ============>> import {fn} from './module1.js'
   
  //==> 5.导出类
  class Peron {
      
  }
  
  export {Person};
  
  
  //==> 6.export default默认导出, import导入不需要加{}
  
  
   export default let a =  1;          ============>> import a from './module.js'
  
  // 6.1) 导出类 
   class Person {
       
   }
   export default Peron;             ============>> import Person from './module.js'
   
   // 6.2导出匿名函数
   export default function() {       ============>> import tools  from './module.js'
                               
   }
   //6.3导出对象
   class Person {
       constructor(x) {
           this.x = x;
       }
   }
   
   export default {                ============>> import mod  from './module.js'
       Person                                     mod.new Person('x');
   }
   
复制代码

2.导入模块

import

可以是相对路径，也可以是绝对路径引入
- import 'code.jquery.com/jquery-3.3.…'; 导入jQuery文件
- import './module1.js' 引入JS文件
- import {a} from './a' export导出的文件
- import tools from './tools' export default tool 导出默认的
- import Routers from './routers' export default {Routers: Routers} Routers.Routers default默认导出对象
import模块只会导入一次，无论你引入多少次，同一个模块下
import后缀.js可以省略，但是相对路径必须加./，以后估计会去掉
import {a as x, b as y} from './module1.js' 相对引入模块
import * as modTwo from './module1.js'; modTwo.a ， modTwo.b
导出使用了export default 就不要加{}，没有defaullt必须加，解构
有提升效果，import自动提升到顶部，首先执行，可以在import上面执行，哈哈
导出去的模块，如果里面有定时器更改，外面也会随之改变，不像common规范缓存
默认import语法不能写到if之类里面
动态加载模块， import()函数，类似node里面的require函数，可以动态引入模块，返回一个promise对象，可以使用then，或者Promise.all
- 按需加载
- 可以写到if判断里面

总结:

- 1.当用export default people导出时，就用 import people 导入（不带大括号）

- 2.一个文件里，有且只能有一个export default。但可以有多个export。

3.当用export name 时，就用import { name }导入（记得带上大括号）

4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age } 

5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

import和import()的区别是什么? 
   ==> import是在预解释的时候就加载完毕 了，所以可以在导入前面使用，但是他没有按需加载模块功能
   ==> import()是在执行的时候才去加载相应的模块，按需加载
   ==> 都可以绝对路径和相对路径引入
复制代码

import('模块路径相对或者绝对').then((res) => {
     console.log('模块加载成功');
 }).catch(err => {
     console.log('模块加载失败');
 });
 
 // ==> 2.按需加载
     let a = 1;
     if (a > 1) {
         import('./a.js').then(res =>{
             
         })
     } else {
          import('./b.js').then(res =>{
             
         })
     }
     
 //==> 3.采用Promise.all加载多个模块
 Promise.all([
     import('./a.js'),
     import('./b.js'),
     import('./c.js')
 ]).then(res => {
     let [aModuel, bModuel, cModule] => res;   // ==> 解构赋值
 }).catch(err => {
     cosole.log(err);
 });
 
 //==> 4.配合 async函数使用, 一个个导入
 async function main() {
     // => 4.1 分开写， (有顺序问题)
         const mod1 = await import('./a.js');
         const mod2 = await import('./b.js');
         const mod3 = await import('./c.js');
         console.log(mod1, mod2, mod3);
         
     //==>导入多个模块    
     Promise.all([
         import('./module1.js'),
         import('./module2.js'),
         import('./module3.js'),
     ]).then(([module1, module2, module3]) => {  // ==>>直接解构赋值了，太方便了
          ···
     });    
         
     
     // => 4.2 合并写 Promise.all (没有顺序问题), 配合async函数， 直接全部导入 ,都没有then方法了
         async function getModule() {
              const [mod1, mod, mod3] = await Promise.all([   // ==>> await 等待执行完的结构给前面解构
                 import('./a.js'),
                 import('./b.js'),
                 import('./c.js')
             ]);
             console.log(mod1, mod2, mod3);
         }
        
 }
复制代码

eg1: 提升效果和函数预解释差不多

  =>module1.js
        export const a = 1;
  
  
  =>a.js
        console.log(a); // ==> 1
        import {a} from './module1.js';

复制代码

eg2: 案例分析

  导入的模块, 导出模块怎么写呢?
  =>a.js
    import mod, {show, sum, a, b} from './module1.js';
    let p1 = new mod.Person('es6-moduel');
    console.log(p1.showName());
    show();
    sum();
    console.log(a, b);
    
    
    
  => b.js   分离a, b
    const let a = 1;
    const let b = 2;
    export {
        a,
        b
    }
  
  
  =>moduel1.js
      import {a, b} from './bjs'
      cosnt let sum = () =>{
        console.log(a + b);
      };
      
      const show = () => {
          console.log('show');
      }
    export {
        a,
        b,
        sum,
        show
    }
    
    class Person {
        constructor(name) {
            this.name = name;
        }
        showName() {
            return this.name;
        }
    }
    
    export default {
        Person
    }
  
复制代码