ES6模块中import和export功能
- export用于对外输出本模块(一个文件可以视为一个模块)变量的接口
- import用于在一个模块中加载另一个含有export接口的模块
在es6中通过export输出变量,函数,文件,模块等,使用import导入,在一个文件或模块当中可以有多个export 但只能有一个export default
当使用export xx 时, import {xx} from xxxx
当使用export default xx 时, import xx from xxxx 注意xx是随意的词
下面的例子解释的很清楚
例如有两个文件 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要加载a.js
// b.js
通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js"
console.log(sex) // boy
echo(sex) // boy
import {sea,eho} from "./a.js" //错误,输出模块中没有sea和eho变量
如果
//a.js
var sex="boy";
export default sex(sex不能加大括号)
//原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default。
那么b.js要加载a.js
// b.js
本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js"
console.log(any,any12) // boy,boy
//加载默认输出时,模块名随意,所以无论是any,any12,还是其他名字都可以
一个模块中只能有一个默认导出export default ,但可以有多个(0个,1个,n个)命名导出
//a.js
import user, { user2, anyUser } from './b'