[TOC] ### ES6 模塊化 #### export的用法 ~~~ export let myName = "Jon"; import { myName } from "./test.js"; console.log(myName); //Jon ~~~ ***** 如果要輸出多個變量可以將這些變量包裝成對象進行模塊化輸出： ~~~ let myName = "Jon"; let myAge = 18; let myfn = function(){ return "我是"+myName+"！今年"+myAge+"歲了" } export { myName, myAge, myfn } /******************************接收的代碼調整為**********************/ import { myfn, myAge, myName } from "./test.js"; console.log(myfn()); //我是Jon！今年18歲了 console.log(myAge); //18 console.log(myName); //Jon ~~~ ***** 如果你不想暴露模塊當中的變量名字，可以通過as來進行操作: ~~~ let myName = "Jon"; let myAge = 18; let myfn = function(){ return "我是"+myName+"！今年"+myAge+"歲了" } export { myName as name, myAge as age, myfn as fn } /******************************接收的代碼調整為**********************/ import {fn,age,name} from "./test.js"; console.log(fn()); //我是Jon！今年19歲了 console.log(age); //19 console.log(name); //Jon ~~~ ***** 也可以直接導入整個模塊，將上面的接收代碼修改為： ~~~ import * as info from "./test.js"; //通過*來批量接收，as 來指定接收的名字 console.log(info.fn()); //我是Jon！今年18歲了 console.log(info.age); //18 console.log(info.name); //Jon ~~~ ***** #### 默認導出（default export） ~~~ /******************************導出**********************/ export default function(){ return "默認導出一個方法" } /******************************引入**********************/ import myFn from "./test.js"; //注意這里默認導出不需要用{}。 console.log(myFn()); //默認導出一個方法 ~~~ ***** 可以將所有需要導出的變量放入一個對象中，然后通過default export進行導出： ~~~ /******************************導出**********************/ export default { myFn(){ return "默認導出一個方法" }, myName: "Jon" } /******************************引入**********************/ import myObj from "./test.js"; console.log(myObj.myFn(), myObj.myName); //默認導出一個方法 Jon ~~~ ***** #### 重命名export和import 如果導入的多個文件中，變量名字相同，即會產生命名沖突的問題，為了解決該問題，ES6為提供了重命名的方法，當你在導入名稱時可以這樣做： ~~~ /******************************test1.js**********************/ export let myName = "我來自test1.js"; /******************************test2.js**********************/ export let myName = "我來自test2.js"; /******************************index.js**********************/ import {myName as name1} from "./test1.js"; import {myName as name2} from "./test2.js"; console.log(name1); //我來自test1.js console.log(name2); //我來自test2.js ~~~