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')
}