js中export與import的實(shí)例介紹

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:16:46

js中export與import的實(shí)例介紹

js中export與import的實(shí)例介紹:exportexport用于輸出模塊的對(duì)外接口。export命令只要處于模塊頂層就可以使用，也就是說(shuō)，如果處于某個(gè)函數(shù)作用域、判斷語(yǔ)句、條件語(yǔ)句內(nèi)，就會(huì)報(bào)錯(cuò)。export命令有幾種輸出形式。PS: export命令可用于輸出任何數(shù)據(jù)類型，可以是Number, String,

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀js中export與import的實(shí)例介紹:exportexport用于輸出模塊的對(duì)外接口。export命令只要處于模塊頂層就可以使用，也就是說(shuō)，如果處于某個(gè)函數(shù)作用域、判斷語(yǔ)句、條件語(yǔ)句內(nèi)，就會(huì)報(bào)錯(cuò)。export命令有幾種輸出形式。PS: export命令可用于輸出任何數(shù)據(jù)類型，可以是Number, String,

export

export用于輸出模塊的對(duì)外接口。export命令只要處于模塊頂層就可以使用，也就是說(shuō)，如果處于某個(gè)函數(shù)作用域、判斷語(yǔ)句、條件語(yǔ)句內(nèi)，就會(huì)報(bào)錯(cuò)。export命令有幾種輸出形式。

PS: export命令可用于

輸出任何數(shù)據(jù)類型，可以是Number, String, Boolean, Null, Undefined, Array, Object, Function .... 以輸出函數(shù)與對(duì)象舉例 1. export var obj = { name: 'keith' } // 直接輸出 2. var obj = { name: 'keith' } export { obj } // 使用該種形式輸出時(shí)需要添加大括號(hào) export obj // 不添加大括號(hào)時(shí)會(huì)報(bào)錯(cuò)，因?yàn)槲覀円?/script>輸出的是該對(duì)象的引用。注意是對(duì)該對(duì)象的引用，而不是拷貝。這也意味著在該模塊改變name屬性，會(huì)導(dǎo)致另一個(gè)模塊下name屬性的變化，這點(diǎn)與CommonJS不同，CommonJS只是對(duì)某個(gè)對(duì)象的拷貝 var num = function () { return 123 } export { num } // 正確 export num // 報(bào)錯(cuò)，輸出對(duì)num的引用，而不是直接輸出函數(shù)num 3. var obj = { name: 'keith' } export { obj as person } // export命令支持接口的重命名 4 var obj = { name: 'keith' } export default obj // 輸出默認(rèn)值時(shí)不需要添加大括號(hào), export default在一個(gè)模塊中只能使用一次，但export命令可以使用多次 // export default的本質(zhì)：就是將某個(gè)變量命名為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聲明的變量 // 在執(zhí)行過(guò)程中export命令會(huì)被默認(rèn)放置在整個(gè)模塊的最底層。 var num = function () { return 123 }; let obj = { name: 'keith' } // 相當(dāng)于 var num = function () { return 123 }; var obj = { name: 'keith' } // ..函數(shù)、對(duì)象等其他數(shù)據(jù)類型 // 被放置在模塊最底層 export { name, obj }

import

export命令用于輸出模塊的對(duì)外接口，import命令用于引入其他模塊提供的功能接口。與export命令一樣，import命令只能用于模塊頂層，不能用于函數(shù)作用域、條件語(yǔ)句、判斷語(yǔ)句內(nèi)。import命令有以下幾種形式。

1. import { num, obj } from './export.js' // 模塊名，可以不添加.js后綴，但需要寫配置文件，與Node知識(shí)相關(guān)
 // import入的接口名字，要與export出的名字對(duì)應(yīng)
 console.log(num()) // 123
 console.log(obj.name) // 'keith'

2. import { obj as person } from './export.js'
 // 可以修改import進(jìn)來(lái)的變量名
 console.log(person.name) // 'keith'

3. import * as $ from './export.js'
 // 使用*用于模塊的整體加載，并重命名為$對(duì)象.此時(shí)可以通過(guò)$對(duì)象取到export的對(duì)外接口
 console.log($.num()) // 123
 console.log($.obj.name) // 'keith'

4. import 'normalize.css'
 // 用于加載整個(gè)模塊，此時(shí)不需要添加變量名

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

 import person from './module.js'
 import boy from './module.js'
 // 對(duì)應(yīng)于export default 命令
 // 此時(shí)import進(jìn)來(lái)的接口不需要添加大括號(hào)
 // 且支持import時(shí)的任意命名
 console.log(person.name) // 'keith'
 console.log(boy.name) // 'keith'

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

export與import的復(fù)合寫法

如果在某個(gè)模塊中引入了其他模塊，又導(dǎo)出了該模塊，可以采用export和import的復(fù)合寫法

1. 使用{}導(dǎo)出模塊
export { Hello, World } from './modules'
// 相當(dāng)于
import { Hello, World } from './moudles'
export { Hello, World }

2. 改寫模塊的名字
export { Hello as Person } from './modules'
// 相當(dāng)于
import { Hello as Person } from './modules'
export { Person }

3. 改寫默認(rèn)export default模塊的名字
export { default as Person } from './modules'
// 相當(dāng)于
import Person from './modoules' // ./modules里的模塊是通過(guò)export default導(dǎo)出的
export { Person }

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com