在之前的javascript中是沒(méi)有模塊化概念的。如果要進(jìn)行模塊化操作，需要引入第三方的類(lèi)庫(kù)。隨著技術(shù)的發(fā)展，前后端分離，前端的業(yè)務(wù)變的越來(lái)越復(fù)雜化。直至ES6帶來(lái)了模塊化，才讓javascript第一次支持了module。ES6的模塊化分為導(dǎo)出（export）與導(dǎo)入（import）兩個(gè)模塊。
export的用法
在ES6中每一個(gè)模塊即是一個(gè)文件，在文件中定義的變量，函數(shù)，對(duì)象在外部是無(wú)法獲取的。如果你希望外部可以讀取模塊當(dāng)中的內(nèi)容，就必須使用export來(lái)對(duì)其進(jìn)行暴露（輸出）。先來(lái)看個(gè)例子，來(lái)對(duì)一個(gè)變量進(jìn)行模塊化。我們先來(lái)創(chuàng)建一個(gè)test.js文件，來(lái)對(duì)這一個(gè)變量進(jìn)行輸出：
export let myName="laowang";
然后可以創(chuàng)建一個(gè)index.js文件，以import的形式將這個(gè)變量進(jìn)行引入:
import {myName} from "./test.js";
console.log(myName);//laowang
如果要輸出多個(gè)變量可以將這些變量包裝成對(duì)象進(jìn)行模塊化輸出：
let myName="laowang";
let myAge=90;
let myfn=function(){
return "我是"+myName+"！今年"+myAge+"歲了"
}
export {
myName,
myAge,
myfn
}
/******************************接收的代碼調(diào)整為**********************/
import {myfn,myAge,myName} from "./test.js";
console.log(myfn());//我是laowang！今年90歲了
console.log(myAge);//90
console.log(myName);//laowang
如果你不想暴露模塊當(dāng)中的變量名字，可以通過(guò)as來(lái)進(jìn)行操作:
let myName="laowang";
let myAge=90;
let myfn=function(){
return "我是"+myName+"！今年"+myAge+"歲了"
}
export {
myName as name,
myAge as age,
myfn as fn
}
/******************************接收的代碼調(diào)整為**********************/
import {fn,age,name} from "./test.js";
console.log(fn());//我是laowang！今年90歲了
console.log(age);//90
console.log(name);//laowang
也可以直接導(dǎo)入整個(gè)模塊，將上面的接收代碼修改為：
import * as info from "./test.js";//通過(guò)*來(lái)批量接收，as 來(lái)指定接收的名字
console.log(info.fn());//我是laowang！今年90歲了
console.log(info.age);//90
console.log(info.name);//laowang
默認(rèn)導(dǎo)出（default export）
一個(gè)模塊只能有一個(gè)默認(rèn)導(dǎo)出，對(duì)于默認(rèn)導(dǎo)出，導(dǎo)入的名稱(chēng)可以和導(dǎo)出的名稱(chēng)不一致。
/******************************導(dǎo)出**********************/
export default function(){
return "默認(rèn)導(dǎo)出一個(gè)方法"
}
/******************************引入**********************/
import myFn from "./test.js";//注意這里默認(rèn)導(dǎo)出不需要用{}。
console.log(myFn());//默認(rèn)導(dǎo)出一個(gè)方法
可以將所有需要導(dǎo)出的變量放入一個(gè)對(duì)象中，然后通過(guò)default export進(jìn)行導(dǎo)出
/******************************導(dǎo)出**********************/
export default {
myFn(){
return "默認(rèn)導(dǎo)出一個(gè)方法"
},
myName:"laowang"
}
/******************************引入**********************/
import myObj from "./test.js";
console.log(myObj.myFn(),myObj.myName);//默認(rèn)導(dǎo)出一個(gè)方法 laowang
同樣也支持混合導(dǎo)出
/******************************導(dǎo)出**********************/
export default function(){
return "默認(rèn)導(dǎo)出一個(gè)方法"
}
export var myName="laowang";
/******************************引入**********************/
import myFn,{myName} from "./test.js";
console.log(myFn(),myName);//默認(rèn)導(dǎo)出一個(gè)方法 laowang
重命名export和import
如果導(dǎo)入的多個(gè)文件中，變量名字相同，即會(huì)產(chǎn)生命名沖突的問(wèn)題，為了解決該問(wèn)題，ES6為提供了重命名的方法，當(dāng)你在導(dǎo)入名稱(chēng)時(shí)可以這樣做：
/******************************test1.js**********************/
export let myName="我來(lái)自test1.js";
/******************************test2.js**********************/
export let myName="我來(lái)自test2.js";
/******************************index.js**********************/
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1);//我來(lái)自test1.js
console.log(name2);//我來(lái)自test1.js
