import 与 require | export与 export default

传送门：添加链接描述

下面写一下自己的理解：
1、import 的思想尽量静态化，在编译时就确定依赖关系，require 在运行时加载
2、Export

// profile.js
export var a = 1
export var b = 2
export function func () {}

// 另一种写法
var a = 1
var b = 2
function func () {}
export {a, b, func}
// 导出时可以声明一个别名
export {a as aaa, b as bbb, func as funccc}

2种错误写法

export 1

var m = 1
export m

export 导出的是对外接口，而这两种方法导出的都是具体的值
所以使用export 导出的时候

// 方法一
export function a () {}
export var b = 2
// 方法二  大括号的方式
export {a, b}

3、import

import {a, b, func} from './profile'
// 起别名
import {a as aa, b as bb, func} from './profile'

4、export default

// 可为匿名函数
export default function () {}
// 也可非匿名
export default function func () {}

// export default 导出的 import可以不实用{}
import func from './profile'

5、export导出的时候 需阅读模块内的内容 然后需要的去使用
但如果 不想关注模块内有什么 可以使用export default
6、import()
因为require是运行时加载，所以import命令没有办法代替require的动态加载功能。
所以引入了import()函数。完成动态加载。

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

因为可以在运行时加载所以可以 和条件语句搭配

if(a) {
	import('./a')
} else {
	import('./b')
}