91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

ES6 module的使用示例

發布時間:2021-01-30 09:46:10 來源:億速云 閱讀:147 作者:小新 欄目:web開發

這篇文章將為大家詳細講解有關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
}

ES6 module的使用示例

導入全部

export const name = 'value'

export default 'defaultValue'
import * as anyName from 'some-path/file'

console.log(anyName.name); // 'value'
console.log(anyName.default); // 'defaultValue'

命名方式 vs 默認方式

是否應該使用默認導出一直存在很多爭論。 查看這2篇文章。

  • Why I've stopped exporting defaults from my JavaScript modules

  • GitLab RFC by Thomas Randolph

就像任何事情一樣,答案沒有對錯之分。正確的方式永遠是對你和你的團隊最好的方式。

關于“ES6 module的使用示例”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

文山县| 张家界市| 普洱| 亚东县| 芮城县| 丰城市| 兰考县| 赣榆县| 喀喇沁旗| 凯里市| 苍溪县| 龙陵县| 寻乌县| 嘉祥县| 玉田县| 德江县| 响水县| 贞丰县| 兴和县| 岳阳市| 永平县| 保亭| 文成县| 封丘县| 册亨县| 新绛县| 大田县| 云安县| 德令哈市| 淮北市| 剑阁县| 清新县| 白玉县| 聂荣县| 恩平市| 临清市| 德安县| 屏东县| 巴里| 越西县| 鱼台县|