js中export與import的實例介紹

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 20:16:46

js中export與import的實例介紹

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

推薦度：

點擊下載本文 文檔為doc格式

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

export

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

PS: export命令可用于

輸出任何數(shù)據(jù)類型，可以是Number, String, Boolean, Null, Undefined, Array, Object, Function .... 以輸出函數(shù)與對象舉例 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的引用，而不是直接輸出函數(shù)num 3. var obj = { name: 'keith' } export { obj as person } // export命令支持接口的重命名 4 var obj = { name: 'keith' } export default obj // 輸出默認值時不需要添加大括號, export default在一個模塊中只能使用一次，但export命令可以使用多次 // export default的本質(zhì)：就是將某個變量命名為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í)行過程中export命令會被默認放置在整個模塊的最底層。 var num = function () { return 123 }; let obj = { name: 'keith' } // 相當于 var num = function () { return 123 }; var obj = { name: 'keith' } // ..函數(shù)、對象等其他數(shù)據(jù)類型 // 被放置在模塊最底層 export { name, obj }

import

export命令用于輸出模塊的對外接口，import命令用于引入其他模塊提供的功能接口。與export命令一樣，import命令只能用于模塊頂層，不能用于函數(shù)作用域、條件語句、判斷語句內(nèi)。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 }

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