export:
用于对外输出本模块(一个文件可以理解为一个模块)变量的接口。
import:
用于在一个模块中加载另一个含有export接口的模块。
export命令定义了模块的对外接口以后其他js文件就可以通过import+(常量|函数|文件|模块)命令加载这个模块(文件)
基本用法
例如:
//a.js
var name="LXN";
var echo=function(value){
console.log(value)
export {name, echo}
//通过向大括号中添加name和echo 变量,将它们export输出
注:以上的export {name}
不能写成export name
//b.js
//通过import获取a.js文件的内部变量
import {name, echo} from "./a.js"
console.log(sex) //LXN
echo(name) //LXN
export default用法
使用export default命令,微模块制定默认输出,不需要知道所要加载模块的变量名
//a.js
var name="LXN";
export default name //name不能加大括号,注意与基本用法区分
//一个文件只能用一个export default,此处相当于为name变量值“LXN”起了一个系统默认的变量名default
}
//b.js
//其实,a.js文件的export default输出一个叫做default的变量,然后系统允许为他取任意名字,所以可以为import的模块起任何变量名,且不需要用大括号包含
import any from "./a.js"
import anyname from "./a.js"
console.log(any,anyname) //LXN,LXN
export default
命令实际上只是输出一个叫做default的变量,所以它后面不能跟变量声明语句,而export
需要跟变量声明或者大括号最为输出。
正确用法:
export var a = 1;
var a = 1;
export default a;
export {a}
错误用法:
export default var a = 1;
导出一组对象
在模块的末尾单独进行导出声明,以导出该模块的全部对象。
class Employee{
constructor(id, name){
this.id=id;
this.name=name;
}
function getEmployee(id, name){
return new Empolyee(id, name);
}
export {Employee,getEmployee};
在导出时,重命名对象也可以,用as,如下:
export {
A as Employee,
B as getEmployee
};
导入模块
无对象导入
如果模考包含一些逻辑要执行且不会导出任何对象,此类对象也可以被导入到另一模块中
import './a.js';
导入默认对象
采用Default导出方式导出对象,该对象在import声明中将直接被分配给某个引用,如下例中的“d”
import d from './a.js';
导入命名的对象
import {Employee, getEmployee} form './a.js'
导入所有对象
import * as allFormModule from './a.js'