本来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'
命名方式 vs 默许方式
可否应当使用默许输出不断存在许多争辩。 查看这2篇文章。
- Why I've stopped exporting defaults from my JavaScript modules
- GitLab RFC by Thomas Randolph
就像任何事情一样,答案没有对错之分。准确的方式永久是对你和你的团队最好的方式。
命名与默许输出的非开发术语
假设你欠伴侣一些钱。 你的伴侣说可以用现金或电子转帐的方式还钱。 通过电子转帐付款就像named export
一样,由于你的姓名已附加在交易中。 因此,假如你的伴侣忘记,并开端叫你还钱,说他没收到钱。 这里,你就可以简便地向他们显示转帐证明,由于你的名字在付款中。 但是,假如你用现金归还了伴侣的钱(就像default export
一样),则没有证据。 他们可以说当时的 100 块是来自小红。 现金上没有名称,因此他们可以说是你本人或者是任何人
那么采纳电子转帐(named export
)还是现金(default export
)更好?
这取决于你可否信赖的伴侣??, 实际上,这不是解决这一难题的准确办法。 更好的解决方案是不要将你的关系置于该位置,避免冒险危及情谊,最好还是彼此坦诚。 是的,这个设法也适用于你选中named export
还是default export
。 终究还是取决你们的团队决议,哪种方式对团队比力友好,就选中哪种,究竟不是你本人一个人在斗争,而是一个集体??