export default和export学习整理

• 简要概述加载模块

• 模块加载方案

1.  在ES6之前有CommonJs和AMD两种，前者用于服务器，后者用于浏览器。
2.  ES6模块加载。

• 模块加载方案的区别

1. CommonJS和AMD都是“运行时加载”：在运行时才能确定模块的依赖关系，以及输入和输出的变量。
2. ES6是“编译时加载”：在编译时就完成模块加载，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

• export命令

1. export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

export命令可以输出变量、函数和类Class。

export命令要处于模块的顶级作用域的任何位置，不能放在块级作用域内。

var m = 1;
export m

export 1

 上面两种写法都会报错。

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

 上面三种才是正确的写法。

• export default命令

1. 为模块指定默认输出。
2. export default就是输出一个叫做default的变量或方法
3. 示例

   // 第一组
   export default function doSomething() { // 输出
     // ...
   }
   
   import doSomething from 'doSomething'; // 输入
   
   // 第二组
   export function doSomething() { // 输出
     // ...
   };
   
   import {doSomething} from 'doSomething'; // 输入
   
   
   //=============注意：
   //第一组是使用export default时，对应的import语句不需要使用大括号；
   //第二组使用export时，对应的import语句需要使用大括号

    

• export 和export default的区别

1. export和export default 均可用于导出常量、函数、文件、模块；

2. 在一个文件或者模块中，export、import可以有多个，但是export default仅有一个；
3. 通过export方式导出，在导入式要加{}，export default则不需要；

4. 输出单个值，使用export default；输出多个值，使用export；

5. export default 和普通的export不要同时使用；

• import

• 说到export和default export总要说到我们文件的引入加载吧，import就是这个角色。
• import { x,y} from path/module

• import的特点：

1. import命令具有提升效果，会提升到模块的顶部，因为ES6中import是编译时执行。
2. import输出的变量应该是可读的，不建议加载后对变量进行修改。
3. import from 后面可以是绝对路径、相对路径或者模块名

• import（specifier）

• 实现异步动态加载
• specifier：指定所要加载的模块的位置
• import（）返回一个Promise对象