ES6 module

export

export用於輸出模塊的對外接口。export命令只要處於模塊頂層就可使用，也就是說，若是處於某個函數做用域、判斷語句、條件語句內，就會報錯。export命令有幾種輸出形式。

PS: export命令可用於輸出任何數據類型，能夠是Number, String, Boolean, Null, Undefined, Array, Object, Function .... 以輸出函數與對象舉例

1. export var obj = { name: 'keith' } // 直接輸出

2. var obj = { name: 'keith' }
   export { obj }  // 使用該種形式輸出時須要添加大括號
   export obj   // 不添加大括號時會報錯，由於咱們要輸出的是該對象的引用。注意是對該對象的引用，而不是拷貝。這也意味着在該模塊改變name屬性，會致使另外一個模塊下name屬性的變化，這點與CommonJS不一樣，CommonJS只是對某個對象的拷貝
   var num = function () { return 123 }
   export { num }  // 正確
   export num // 報錯，輸出對num的引用，而不是直接輸出函數num

3. var obj = { name: 'keith' }
   export { obj as person }  // export命令支持接口的重命名

4  var obj = { name: 'keith' }
   export default obj
   // 輸出默認值時不須要添加大括號, export default在一個模塊中只能使用一次，但export命令可使用屢次

   // export default的本質：就是將某個變量命名爲default
   // export default num
   // 等同於 export { num as default }
   // import Num from './module.js'
   // 等同於 import { defualt as Num } from './module.js'

5  export { num, obj }
   // export命令處於模塊頂層的任何位置，均可以將變量輸出
   // 無論是用var聲明的變量，仍是let聲明的變量
   // 在執行過程當中export命令會被默認放置在整個模塊的最底層。
   var num = function () { return 123 };
   let obj = { name: 'keith' }
   // 至關於
   var num = function () { return 123 };
   var obj = { name: 'keith' }
   // ..函數、對象等其餘數據類型
   // 被放置在模塊最底層
   export { name, obj }

import

export命令用於輸出模塊的對外接口，import命令用於引入其餘模塊提供的功能接口。與export命令同樣，import命令只能用於模塊頂層，不能用於函數做用域、條件語句、判斷語句內。import命令有如下幾種形式。

1. import { num, obj } from './export.js'  // 模塊名，能夠不添加.js後綴，但須要寫配置文件，與Node知識相關
   // import入的接口名字，要與export出的名字對應
   console.log(num()) // 123
   console.log(obj.name) // 'keith'

2. import { obj as person } from './export.js'
   // 能夠修改import進來的變量名
   console.log(person.name) // 'keith'

3. import * as $ from './export.js'
   // 使用*用於模塊的總體加載，並重命名爲$對象.此時能夠經過$對象取到export的對外接口
   console.log($.num()) // 123
   console.log($.obj.name) // 'keith'

4. import 'normalize.css'
   // 用於加載整個模塊，此時不須要添加變量名

5. let obj = { name: 'keith' }
   export default obj

   import person from './module.js'
   import boy from './module.js'
   // 對應於export default 命令
   // 此時import進來的接口不須要添加大括號
   // 且支持import時的任意命名
   console.log(person.name) // 'keith'
   console.log(boy.name) // 'keith'

6. console.log(obj.name)  // 'keith'
   import { obj } from './export.js'
   // 與export相反，import默認會被提高到模塊最頂層
   // 即
   import { obj } from './export.js'
   console.log(obj)

export與import的複合寫法

若是在某個模塊中引入了其餘模塊，又導出了該模塊，能夠採用export和import的複合寫法

1. 使用{}導出模塊
export { Hello, World } from './modules'
// 至關於
import { Hello, World } from './moudles'
export { Hello, World }

2. 改寫模塊的名字
export { Hello as Person } from './modules'
// 至關於
import { Hello as Person } from './modules'
export { Person }

3. 改寫默認export default模塊的名字
export { default as Person } from './modules'
// 至關於
import Person from './modoules'  // ./modules裏的模塊是經過export default導出的
export { Person }

😊待更新...