后端开发教程 - Java、Spring Boot 实战 - msg200.com
JavaScript 模块速查表
这里有一份速查表，向您展示不同的导出方式以及相应的导入方式。它实际上可以归结为三种类型：名称、默认和列表。只要确保您的导出方式与导入方式匹配，就不会有问题👍
// Name Export | Name Import
export const name = 'value'
import { name } from '...'
// Default Export | Default Import
export default 'value'
import anyName from '...'
// Rename Export | NameImport
export { name as newName }
import { newName } from '...'
// Name + Default | Import All
export const name = 'value'
export default 'value'
import * as anyName from '...'
// Export List + Rename | Import List + Rename
export {
name1,
name2 as newName2
}
import {
name1 as newName1,
newName2
} from '...'
现在让我们看看它们每一个，看看它们是如何工作的🤓
a. 姓名
这里的关键是要有个名字。因此要“命名”导出，哈哈 😂
export const name = 'value';
import { name } from '...';
console.log(name); // 'value'
❌ 我说什么了，没有名字，就无法出口！
export 'value'
import { } // 👈 see I don't even know what to put here...give me a name!
b. 违约
使用默认导出，您不需要任何名称。因为您可以随意命名它👏
export default 'value'
import anyName from '...';
console.log(anyName); // 'value'
❌ 没有使用默认值的变量声明
export default const name = 'value'; // don't try to give me a name!
混合默认+名称
您完全可以将默认导出和名称导出合并到一个文件中🤝
export const name = 'value';
export default 'value'
import anyName, { name } from '...';
c. 出口清单
第三种样式是导出列表。
const name1 = 'value1';
const name2 = 'value2';
export {
name1,
name2
}
import {
name1,
name2
} from '...'
console.log(
name1, // 'value1'
name2, // 'value2'
)
需要注意的一点是，这些列表不是对象。是的，我知道它看起来像对象。但它不是。我第一次学习模块的时候就犯了这个错误。它不是对象，而是一个导出列表！
// ❌ Export list ≠ Object
export {
name: 'name'
}
重命名导出
对导出名称不满意。没问题，您可以使用as关键字重命名。
const name = 'value'
export {
name as newName
}
import { newName } from '...'
console.log(newName); // 'value'
// Original name is not accessible
console.log(name); // ❌ undefined
❌ 无法将内联导出与导出列表结合使用
export const name = 'value';
// You're already exporting name ☝️, don't export me again
export {
name
}
重命名导入
同样的规则也适用于导入。我们可以使用as关键字重命名它。
const name1 = 'value1';
const name2 = 'value2';
export {
name1,
name2 as newName2
}
import {
name1 as newName1,
newName2
} from '...'
console.log(newName1); // 'value1'
console.log(newName2); // 'value2'
❌
name1; // undefined
name2; // undefined
全部导入
export const name = 'value';
export default 'defaultValue';
import * as anyName from '...';
console.log(anyName.name); // 'value'
console.log(anyName.default); // 'defaultValue'
名称与默认
关于是否应该使用导出功能，一直存在很多争论default。请查看这两篇文章。
就像任何事情一样，没有正确或错误的答案。正确的方法永远是对您和您的团队最有利的。但以下是我对这场辩论的看法。萨曼莎的故事时间……
非开发术语中的名称与默认导出
假设你欠朋友一些钱。朋友说你可以用现金或电子转账还钱。电子转账就像一个账户，named export因为你的名字和交易记录绑定在一起。所以，如果你的朋友忘了钱，开始追着你，声称你还欠他们钱。你可以直接给他们看转账凭证，因为你的名字在付款记录上。但是，如果你用现金还钱，就像一个账户default export，你就没有凭证了。他们会说这50美元是Susan的，而不是你的。这笔钱没有名字，所以他们会说是你或其他任何人的。
那么，电子转账（named export）还是现金（default export）更好呢？这取决于你信任你的朋友吗？🤔 其实，这并非解决这个难题的正确方法。更好的解决办法是不要把你们的关系置于这种境地。最好说得明确些，这样才不会危及你们的友谊。没错，这个道理也适用于你是选择转账named还是default导出转账。我更喜欢说得更明确些，这样你的代码就清晰明了了。当然，你的代码就是你的代码。你可以做任何对你和你的团队有利的事情😄
社区意见
-
@kyleshevlin：也许还有一种方法可以添加星号导入，这样就可以导入模块中的所有导出。
import * as myModule from '/modules/my-module.js';这种方法的关键在于，在使用模块时，导入端默认为，myModule.default其余的则按其名称命名myModule.nameOfSomething。CodeSandbox示例 -
@erikayabar：👍 这里强调的是默认导出的 anyName！*这就是为什么我更喜欢命名导出的原因，但社区似乎默认导出所有内容（尤其是 React 组件），所以理解其中的区别很重要！还看到一些困惑：
named imports != destructuring
资源
感谢阅读❤
打个招呼！Instagram | Twitter | Facebook |博客| SamanthaMing.com