您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關ES6 module的使用示例,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
這是一份備忘單,展示了不同的導出方式和相應的導入方式。 它實際上可分為3種類型:名稱,默認值和列表 。
// 命名導入/導出 export const name = 'value' import { name } from '...' // 默認導出/導入 export default 'value' import anyName from '...' // 重命名導入/導出 export { name as newName } import { newName } from '...' // 命名 + 默認 | Import All export const name = 'value' export default 'value' import * as anyName from '...' // 導出列表 + 重命名 export { name1, name2 as newName2 } import { name1 as newName1, newName2 } from '...'
接下來,我們來一個一個的看??
這里的關鍵是要有一個name。
export const name = 'value';
import { name } from 'some-path/file'; console.log(name); // 'value'
使用默認導出,不需要任何名稱,所以我們可以隨便命名它
export default 'value'
import anyName from 'some-path/file' console.log(anyName) // 'value'
默認方式不用變量名
export default const name = 'value'; // 不要試圖給我起個名字!
命名方式 和 默認方式 可以同個文件中一起使用??
eport const name = 'value' eport default 'value'
import anyName, { name } from 'some-path/file'
第三種方式是導出列表(多個)
const name1 = 'value1' const name2 = 'value2' export { name1, name2 }
import {name1, name2 } from 'some-path/file' console.log( name1, // 'value1' name2, // 'value2' )
需要注意的重要一點是,這些列表不是對象。它看起來像對象,但事實并非如此。我第一次學習模塊時,我也產生了這種困惑。真相是它不是一個對象,它是一個導出列表
// Export list ≠ Object export { name: 'name' }
對導出名稱不滿意?問題不大,可以使用as
關鍵字將其重命名。
const name = 'value' export { name as newName }
import { newName } from 'some-path/file' console.log(newName); // 'value' // 原始名稱不可訪問 console.log(name); // ? undefined
不能將內聯導出與導出列表一起使用
export const name = 'value' // 你已經在導出 name ,請勿再導出我 export { name }
同樣的規則也適用于導入,我們可以使用as
關鍵字重命名它。
const name1 = 'value1' const name2 = 'value2' export { name1, name2 as newName2 }
export const name = 'value' export default 'defaultValue'
import * as anyName from 'some-path/file' console.log(anyName.name); // 'value' console.log(anyName.default); // 'defaultValue'
是否應該使用默認導出一直存在很多爭論。 查看這2篇文章。
Why I've stopped exporting defaults from my JavaScript modules
GitLab RFC by Thomas Randolph
就像任何事情一樣,答案沒有對錯之分。正確的方式永遠是對你和你的團隊最好的方式。
關于“ES6 module的使用示例”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。