这是我参与新手入门的第1篇文章
概述
在ES6出现以前,JavaScript是没有模块体系的。编程人员在进行前端模块化开发时,只能采用社区指定的一些模块加载方案。其中服务器端采用的是CommonJs,浏览器端是AMD。ES6的出现,在语言标准层面,实现了模块功能,统一的浏览器和服务器模块解决方案。模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。下面讲解这两个命令。
export
文件即为模块。文件中的变量,方法和类,统称接口。 模块只能导出接口
使用export导出模块中的接口,有两种写法:
- 定义接口的同时导出接口。如下:
- 先定义接口,后统一导出
注意:导出的接口需要使用花括号括起来
import
语法:import XXX from YYY;
XXX:加载的模块接口或模块对象;YYY:模块地址
import命令也有两种写法。
- 使用花括号逐一指定接口
- 使用(*)指定模块对象
实际开发中,除了上述两个命令外,还有一个高频率使用的命令: export default
export default命令,指定模块默认的输出接口。一个模块中,只能有一个export defalut 命令:同export命令,也有两种写法;
- 定义接口同时导出接口(方法或类)
注意注意注意(重要的事说三遍):export default 后面不能跟变量声明语句 (若模块需要默认导出变量接口,请采用第二种写法)
- 先定义接口,后导出(不需要花括号)
使用import 加载export fefault导出的模块,在语法上同加载export 导出的模块有明显区别,前者不需要花括号。如下图所示: