ES6模块化import和export用法方法总结
本文总结ES6模块化的import和export用法,对比CommonJS和AMD规范。详解export输出接口、import加载模块及export default默认导出机制,通过a.js与b.js示例说明变量暴露与加载方式,帮助理解浏览器和服务器通用的模块解决方案。
ES6模块化的背景与规范对比
在ES6标准推出之前,JavaScript模块加载已有多种方案,其中最具代表性的是CommonJS和AMD规范。CommonJS主要面向服务器端环境,采用同步加载机制,例如Node.js即基于此规范。而AMD规范则针对浏览器环境设计,支持异步加载,代表库为RequireJS。此外,还有CMD规范,属于同步加载方案,如SeaJS。
ES6在语言规范层面实现了模块化功能,其实现方式简洁明了,足以取代现有的CommonJS和AMD规范,成为浏览器端与服务器端通用的模块解决方案。
ES6模块核心命令:export与import
ES6模块体系主要包含两个核心命令:export和import。
export命令用于对外输出当前模块(通常一个文件视为一个模块)中变量的接口。
import命令用于在一个模块中加载另一个包含export接口的模块。
模块加载示例与语法细节
当使用export命令定义了模块的对外接口后,其他JavaScript文件即可通过import命令加载该模块(文件)。具体示例如下(假设a.js和b.js文件位于同一目录下):
// a.js
var sex="boy";
var echo=function(value){
console.log(value)
}
export {sex,echo}
//通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式,如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。
// b.js
通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js"
console.log(sex) // boy
echo(sex) // boy
a.js文件也可以采用如下export语法进行编写,但相比前文示例不够直观,因此不推荐使用。
// a.js
export var sex="boy";
export var echo=function(value){
console.log(value)
}
//因为function echo(){}等价于 var echo=function(){}所以也可以写成
export function echo(value){
console.log(value)
}
上述内容展示了export与import的基本用法,接下来进行拓展学习。
默认导出export default的使用
从前面的例子可以看出,b.js在使用import命令时,用户必须明确a.js所暴露出的变量标识符,否则无法成功加载。为此,可以使用export default命令为模块指定默认输出,这样便无需知晓所加载模块的具体变量名。
//a.js
var sex="boy";
export default sex(sex不能加大括号)
//原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default。
// b.js
本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js"
console.log(any,any12) // boy,boy
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
JS对象数组转字符串为什么推荐用JSON.stringify()
2026-11-05 09:40:31
