export、export default和import用法详解

这三个名词的出现为了实现js模块化，属于es6语法

在没有这个es6语法之前，js按功能分为不同文件，导致在html 文件引用时要使用大量的script 标签。如果把不同的功能放在一个js 文件里，可能出现只使用一两个功能，却要引入相对大的文件，导致资源冗余浪费等问题。

接着js 模块化，在js中按需导入你需要的模块功能就出现了。

export, export default 负责导出，import 负责导入

export 在一个js 文件中可以有多个，export default 最多只有一个

1. export

• 方式1： 先声明后导出，假设在1.js 里

let aa = '123';
function test1(){
console.log('我是test1函数');
}

export {aa, test1}

• 方式2： 导出与声明一起，假设在2.js 里

let bb = '123';
function test2(){
console.log('我是test1函数');
}

export {bb, test2}

• 方式3： 混合使用，假设 3.js 里

• let cc = '123';
  export function test3(){
  console.log('我是test3函数');
  }
  
  export {cc}

  2. import

• 用哪个取哪个，还可以重命名

import {aa, test1} from './1.js';
import {bb as B, test2 } from './2.js';
import {cc, test3} from '3/js';
test1();
console.log(B);
test2();
console.log(cc);

• 全部取出，对象方式使用

import * as A from './1.js';
import * as B from './2.js';
A.test1();
B.test2();
console.log(B.bb);

3. export default

• 先声明后导出，假设4.js

function test4(){
    console.log('');
}

export default test4

• 导出与声明一起，假设5.js

function test5(){
    console.log('我是test5函数');
}

export default test5

4. export default 导出import导入方式

 使用：export default 只有一种使用方式如下, import 的名称是对默认导出名称的重命名

import EE from './5,js';
EE();

总结：export和export default 的方式可以搭配混合使用，所以Import 的方式也可根据export 的不同方式来导入。