在ES6模块特性中，import时如何正确使用花括号'{ }'

neuSnail 发布于2019-08-21 11:55 / 769人阅读

摘要：在之前，社区制定了一些模块加载方案，最主要的有和两种。而我们这里要说的是在使用语法引用模块时，如何正确使用。也就是在这种不使用来引用模块的情况下，模块时的命名是随意的，即如下三种引用命名都是正确的因为它总是会解析到中默认的。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

上文引用自：阮一峰老师的ECMAScript 6 入门。

而我们这里要说的是在使用import语法引用模块时，如何正确使用{}。

假如有一个B.js，想要通过import语法引用模块A.js，那么可以这么写：

// B.js
import A from "./A"

而上面的代码生效的前提是，只有在如下A.js中有默认导出的export default语法时才会生效。也就是：

// A.js
export default 42

在这种不使用{}来引用模块的情况下，import模块时的命名是随意的，即如下三种引用命名都是正确的：

// B.js
import A from "./A"
import MyA from "./A"
import Something from "./A"

因为它总是会解析到A.js中默认的export default。

而下面是使用了花括号命名的方式{A}来导入A.js：

import { A } from "./A"

上面代码生效的前提是，只有在模块A.js中有如下命名导出为A的export name的代码，也就是：

export const A = 42

而且，在明确声明了命名导出后，那么在另一个js中使用{}引用模块时，import时的模块命名是有意义的，如下：

// B.js
import { A } from "./A"                 // 正确，因为A.js中有命名为A的export
import { myA } from "./A"               // 错误！因为A.js中没有命名为myA的export
import { Something } from "./A"         // 错误！因为A.js中没有命名为Something的export

要想上述代码正确执行，你需要明确声明每一个命名导出：

// A.js
export const A = 42
export const myA = 43
export const Something = 44

ps: 一个模块中只能有一个默认导出export default，但是却可以有任意命名导出（0个、1个、多个），你也可以如下，一次性将他们导入：

// B.js
import A, { myA, Something } from "./A"

这里我们使用导入默认导出A，以及命名导出myA和Something。

我们甚至可以在导入的时候重命名导入：

import X, { myA as myX, Something as XSomething } from "./A"

总结：模块的默认导出通常是用在你期望该从模块中获取到任何想要的内容；而命名导出则是用于一些有用的公共方法，但是这些方法并不总是必要的。

原文stackoverflow：原文地址，如有问题欢迎指出。

云服务器 GPU云服务器 python中&039t&039 php中&amp039 attr&039&039checked&039&039 given&039&039

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87286.html

避免取值时出现Cannot read property &#039;xx&#039; of unde

摘要：由于是以空函数为代理对象，我们可以将执行它，触发。中会遍历数组依次取值，如果发现无法继续取值则，跳出循环。本文来自我的博客，欢迎大家去GitHub上star我的博客我们在取值特别是链式取值的时候，常常会遇到Cannot read property xx of undefined的错误，如何避免这种情况的发生呢？这里有几种方法以供参考使用成熟的库方法这是最简单的一种手段：只用引入...

fantix 2019-08-23 15:23 评论0 收藏0
写了2年python，知道 if __name__ == &#039;__main__&#039;

摘要：原因很简单，因为中的代表的就是当前执行的模块名。缺点就是主程序会受待执行程序的影响，会出现待执行程序中抛异常或主动退出会导致主程序也退出的尴尬问题。总结来说就是，一个是在子进程中执行代码，一个是在当前进程中执行代码。 showImg(https://segmentfault.com/img/remote/1460000018607395?w=502&h=318); 相信刚接触Pytho...

wangbinke 2019-07-31 10:11 评论0 收藏0
Nginx Beginner&#039;s Guide

摘要：主进程的主要目的就是读取和评估配置，并且维护工作进程。工作进程实际上是处理请求。下一步，使用上一小节的服务器配置块并将其修改为代理服务器配置。符合响应的请求将会映射到文件夹。为了使新的配置文件生效，发送信号给概述译文。参考官方文档这篇指南描述了如何启动、停止nginx，重新加载配置，并且解释了配置文件的结构，描述了如何设置nginx去服务静态内容，如何配置nginx作为代理...

yeyan1996 2019-07-25 14:24 评论0 收藏0
You Don&#039;t Know Js 阅读笔记

摘要：回调传递函数是将函数当做值并作为参数传递给函数。这个例子中就是因为事件绑定机制中的传入了回调函数，产生了闭包，引用着所在的作用域，所以此处的数据无法从内存中释放。 javascript作用域一门语言需要一套设计良好的规则来存储变量，并且之后可以方便的找到这些变量，这逃规则被称为作用域。这也意味着当我们访问一个变量的时候，决定这个变量能否访问到的依据就是这个作用域。一、词法作用域 ...

wanglu1209 2019-08-19 17:26 评论0 收藏0
&#039;{ }&#039;在不同上下文中的作用

摘要：大括号的作用，在不同的上下文中差别很大以下观点若有错误，请前辈及时指出一被当做对象字面量如，外层的被赋值给了，这里的被当做对象处理。本文参考你不知道的大括号‘{ }’的作用，在不同的上下文中差别很大！以下观点若有错误，请前辈及时指出！一、{ }被当做对象字面量如：var obj = { foo: function(){} };，外层的{...}被赋值给了obj，这里的{...}被...

Reducto 2019-08-20 11:27 评论0 收藏0