export export用於輸出模塊的對外介面。export命令只要處於模塊頂層就可以使用,也就是說,如果處於某個函數作用域、判斷語句、條件語句內,就會報錯。export命令有幾種輸出形式。 import export命令用於輸出模塊的對外介面,import命令用於引入其他模塊提供的功能介面。與e ...
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 }