ES6,import时如何正确使用花括号'{ }'
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
而我们这里要说的是在使用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'
总结:模块的默认导出通常是用在你期望该从模块中获取到任何想要的内容;而命名导出则是用于一些有用的公共方法,但是这些方法并不总是必要的。
转:https://blog.csdn.net/function__/article/details/79040111
(一句话总结上面的用法:是默认导出(就是在defau{}里面的),就要不加{},其他就需要加{})
ES6,import时如何正确使用花括号'{ }'的更多相关文章
- xcode: {} 花括号缩进一个空格
if (jsonDict.HasParseError()) { //前面总是有一个空格 CCLOG("GetParseError %d\n",jsonDict.GetParseEr ...
- es6引用模块import后面加上花括号{}和不加花括号的区别
在使用import语法引用模块时,如何正确使用{} 例如:有两个文件,home.js.user.js 当需要在home.js中引入user.js的时候 //home.js import user fr ...
- react/React Native 在 import 导入时,有的带花括号{},有的不带原理解析
在使用import引用模块时,如何正确使用{} 例如:有两个文件,home.js.user.js 一:不使用{}: 当需要在home.js中引入user.js的时候 //home.js 文件中impo ...
- import downloadjs from 'downloadjs' 如果是自己写的函数 没用默认导出 记得加花括号 例如 import { download } from './data.js'
import downloadjs from 'downloadjs' 如果是自己写的函数 没用默认导出 记得加花括号 例如 import { download } from './data.js'
- 没有花括号(大括号)的for循环也能正确执行
代码一 for循环没有{}大括号(花括号),在for语句下面是一条语句. for(var i=0;i<3;i++) console.log(1,i); 上面的代码能无误输出: 1 01 11 2 ...
- ES6 import
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...
- es6 import 与 export
1.export 命令 export 命令用于规定模块的对外接口. 一个模块就是一个独立的文件.该文件内部所有的变量,外部无法获取.要想外部能够读取模块内部的某个变量,就必须使用 export 关键字 ...
- Python的精髓居然是方括号、花括号和圆括号!
和其他编程语言相比,什么才是Python独一无二的特色呢?很多程序员会说,缩进.的确,缩进是Python语言的标志性特点,但这只是外在的.形式上的.从语言特性层面讲,Python的特点是什么呢?我尝试 ...
- 常用PHP中花括号使用规则详解
转自http://www.cnblogs.com/jayleke/archive/2011/11/08/2241609.html 1.简单句法规则(用花括号界定变量名,适用于PHP所有版本): $a ...
随机推荐
- RF页面断言
title should be(断言title与预期指定的title内容相等): should be equal (断言某个字符串与预期指定的字符串相等) should not be equal ( ...
- 攻防世界(XCTF)逆向部分write up(一)
晚上做几个简单的ctf逆向睡的更好 logmein elf文件 ida看看main函数伪代码 void __fastcall __noreturn main(__int64 a1, char **a2 ...
- Python之类的特殊成员方法
类的特殊成员方法 1.__doc__ :打印类的描述信息 class Foo: """ 描述类信息,这是用于看片的神奇 """ def fu ...
- linux自启动脚本.sh
while [ 1 ]; do PRO_NUM=`ps -ef | grep "cms$" | grep -v "grep" | wc ...
- 备战双 11!蚂蚁金服万级规模 K8s 集群管理系统如何设计?
作者 | 蚂蚁金服技术专家 沧漠 关注『阿里巴巴云原生』公众号,回复关键词"1024",可获取本文 PPT. 前言 Kubernetes 以其超前的设计理念和优秀的技术架构,在容器 ...
- Redis 文章一 之持久化机制的介绍
我们已经知道对于一个企业级的redis架构来说,持久化是不可减少的 企业级redis集群架构:海量数据.高并发.高可用 持久化主要是做灾难恢复,数据恢复,也可以归类到高可用的一个环节里面去,比如你re ...
- 关于举办【福州】《K8S社区线下技术交流会》的问卷调查
近年来,容器.Kubernetes.DevOps.微服务.Serverless等一系列云原生技术受到越来越多的关注,云原生为企业数字化转型提供了创新源动力,基于云原生技术构建企业技术中台在各行业也 ...
- 让SpringBoot的jackson支持JavaBean嵌套的protobuf
问题背景 REST 项目使用protobuf 来加速项目开发,定义了很多model,vo,最终返回的仍然是JSON. 项目中一般使用 一个Response类, public class Respons ...
- 解决logback不打印mybatis的SQL日志的问题
工作这么多年,今天还是因为Logback的这个问题稍微卡了一下,惭愧. 问题描述: logback配置了如下信息: <appender name="sql" class=&q ...
- [正确配置]win7 PL/SQL 连接Oralce 11g 64位
PL/SQL 版本号:15.0.5.1710 32位 win7 64位系统 instantclient 12.1 32位,PL/SQL不支持64位 关键问题 1.Not logged on 2.没有c ...