ES6模块加载(export和export default)上

首先要注意es6模块加载规范必须在网络环境环境运行，直接打开html会报错，可以使用live server插件使用，第二要注意的是引入的时候script标签必须要加上type='module',这个加是自己创建html引入外部的js文件暴露的对象时使用的

1.export

• 暴露(可以是变量，函数或者类）

写法一
export var m = 1；
写法二
var m =1;
export {m};
写法三
var n =1;
export {n as m};//名称当做m暴露

• 引入

写法一
import {m} from './a.js'
写法二
import {m as n} from './a.js'  //名称当做n引入
写法三
import {* as obj} from './a.js'  //全部模块引入
obj.a();  //a和b是a.js里面暴露的方法
obj.b()

注： ①as的用法暴露和引入不是一起使用的，如暴露的时候用了as，引入的时候不一定要使用。
②暴露出来的数据一般不能修改。如果暴露的是个对象，那可以修改对象里面的键和值，但是一般不要改

• import命令具有提升效果，会提升到整个模块的头部，首先执行

foo();
import { foo } from 'my_module';

• import里面引入不能通过变量引入

// 报错
let module = 'my_module';
import { foo } from module;

• 如果想引入所有的模块，可以使用：

import 'lodash';

• import可以和require引入方式一起使用，但是尽量不要一起使用，因为import会提升（类似变量提升），最先执行，可能会出现意想不到的错误

2.export default

• 暴露(相当于直接给export暴露的变量起了个default的名字)

//正确写法：
var a = 1;
export default a; 
//错误写法：（export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句)
export default var a = 1
// 正确
export default 42;
// 报错：（报错是因为没有指定对外的接口，而export default指定对外接口为default）
export 42;

• 引入(引入变量时想用什么名字都可以，但是export的不行）

基础写法（_这个可以用任意替代）
import _ from 'lodash';
扩展写法：（import 可以同时引入export暴漏的和export default暴露的）
暴露：
export default function (obj) {
  console.log(123)
}

export function each(obj, iterator, context) {
  console.log(456)
}
export { each as forEach };
引入
import fn, { each, forEach } from 'a.js';

3. export 与 import 的复合写法

export {m} from "a.js"
//等价于
import {m} from "a.js"；
export {m}

注意：简写为一行时，会导致当前模块不能使用m

export * from 'circle';
//这个表示再输出circle模块的所有属性和方法，但是export *命令会忽略circle模块的default方法

• 应用(多个暴露模块引入到一个文件下）

//a.js
export const a = {
  name: 'a'
}
//b.js
export const b = {
  name: 'b'
}
//tot.js
export {a} from "./a"
export {b} from "./b"
//index.js
import {a,b} from 'tot.js'

4.import动态加载模块（就是在需要的时候才加载import，而不是一读取到文件先加载）

• import引入时会在直接先执行，因此不能在代码执行过程中导入；

// 报错
if (x === 2) {
  import MyModual from './myModual';
}

为了解决上面这个例子问题，因此引入了import()函数;

• 应用（动态加载模块）

button.addEventListener('click', function(){
    import('./box.js').then(box => {
        box.open();
  }.catch(error => {
  })
})

import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块