export 和 export default、import 常用语法

export 和 export default两个导出，它们的异同：

1. export与export default均可用于导出常量、函数、文件、模块等,

2. 在一个文件或模块中，export、import可以有多个，export default仅有一个

3. 通过export方式导出，在导入时要加{ }，因为不知道要导入哪个；不论是导入一个还是多个，都必须在{}内部，调用时直接调用即可。

//a.js
let add = function(){}
let option = {}
export {
  add,
  option
}

import { add } from 'a.js'       //导入时加{ } ，使用时直接使用即可
import * as A from 'a.js'         //导入时将所有导出的都放入到一个对象中，调用时可通过对象来访问（A.add）

4. export default则不需要，是因为在导出时，会作为一个默认的对象导出，调用时，通过这个对象寻找相应的属性来调用相应的方法，常量等

//b.js
export default {               //导出时直接导出对象
   num:1,
   add:function(){}
}

import   A   from 'a.js'       //使用时A.num;

5. export能直接导出变量表达式，export default不行。

export 常用导出方式

1、export导出

// 导出单个特性
export let name1, name2, …, nameN;
export let name1 = …, name2 = …, …, nameN;
export function FunctionName(){...}
export class ClassName {...}

//注意,单个导出时，如下导出报错：
// let a = 'xxx';
// export a;

// 导出列表
export { name1, name2, …, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

2、使用export default 默认导出

// 默认导出
export default {};
export default function (…) { … }
export default function name1(…) { … }

import 常用导入方式

• 静态导入
• 动态导入

1、静态导入

在浏览器中，import 语句只能在声明了 type="module" 的 script 的标签中使用。

<script type="module" src="./moduleA.js"> </script>

// 针对export default 导出的引入
import defaultExport from "module-name";

//引入重命名
import * as name from "module-name";

//针对export 导出的引入
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";

// 针对文件内既有export 又有export default导出的引入方式
// 其中 defaultExport 是针对export default导出的引入，｛｝内是针对export导出的引入
import defaultExport, { exportModule1,exportModule2} from "module-name";

2、动态导入

关键字 import 可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 promise。它不需要依赖 type="module" 的 script 标签。

import('./m.js')
  .then(m => {
    //...
});
// 也支持 await
let m = await import('./m.js');

通过 import() 方法导入返回的数据会被包装在一个对象中，即使是 default 也是如此
参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export