export:
用于對(duì)外輸出本模塊(一個(gè)文件可以理解為一個(gè)模塊)變量的接口斯撮。
import:
用于在一個(gè)模塊中加載另一個(gè)含有export接口的模塊。
export命令定義了模塊的對(duì)外接口以后其他js文件就可以通過import+(常量|函數(shù)|文件|模塊)命令加載這個(gè)模塊(文件)
基本用法
例如:
//a.js
var name="LXN";
var echo=function(value){
console.log(value)
export {name, echo}
//通過向大括號(hào)中添加name和echo 變量鼓黔,將它們export輸出
注:以上的export {name}
不能寫成export name
//b.js
//通過import獲取a.js文件的內(nèi)部變量
import {name, echo} from "./a.js"
console.log(sex) //LXN
echo(name) //LXN
export default用法
使用export default命令,微模塊制定默認(rèn)輸出携御,不需要知道所要加載模塊的變量名
//a.js
var name="LXN";
export default name //name不能加大括號(hào)纳本,注意與基本用法區(qū)分
//一個(gè)文件只能用一個(gè)export default,此處相當(dāng)于為name變量值“LXN”起了一個(gè)系統(tǒng)默認(rèn)的變量名default
}
//b.js
//其實(shí),a.js文件的export default輸出一個(gè)叫做default的變量土思,然后系統(tǒng)允許為他取任意名字务热,所以可以為import的模塊起任何變量名忆嗜,且不需要用大括號(hào)包含
import any from "./a.js"
import anyname from "./a.js"
console.log(any,anyname) //LXN,LXN
export default
命令實(shí)際上只是輸出一個(gè)叫做default的變量,所以它后面不能跟變量聲明語(yǔ)句崎岂,而export
需要跟變量聲明或者大括號(hào)最為輸出捆毫。
正確用法:
export var a = 1;
var a = 1;
export default a;
export {a}
錯(cuò)誤用法:
export default var a = 1;
導(dǎo)出一組對(duì)象
在模塊的末尾單獨(dú)進(jìn)行導(dǎo)出聲明,以導(dǎo)出該模塊的全部對(duì)象冲甘。
class Employee{
constructor(id, name){
this.id=id;
this.name=name;
}
function getEmployee(id, name){
return new Empolyee(id, name);
}
export {Employee,getEmployee};
在導(dǎo)出時(shí)绩卤,重命名對(duì)象也可以,用as江醇,如下:
export {
A as Employee,
B as getEmployee
};
導(dǎo)入模塊
無對(duì)象導(dǎo)入
如果谋舯铮考包含一些邏輯要執(zhí)行且不會(huì)導(dǎo)出任何對(duì)象,此類對(duì)象也可以被導(dǎo)入到另一模塊中
import './a.js';
導(dǎo)入默認(rèn)對(duì)象
采用Default導(dǎo)出方式導(dǎo)出對(duì)象陶夜,該對(duì)象在import聲明中將直接被分配給某個(gè)引用凛驮,如下例中的“d”
import d from './a.js';
導(dǎo)入命名的對(duì)象
import {Employee, getEmployee} form './a.js'
導(dǎo)入所有對(duì)象
import * as allFormModule from './a.js'