前言
因爲ES6中的模塊化是將來,所以就必須有必要好好的瞭解一下,學習一下,這篇文章就簡單總結一下ES6中模塊的概念,語法和用法。純屬個人總結,不喜勿噴。
下面我將通過a.js、b.js和c.js三個文件把ES6的知識點穿起來。
默認導出
導出語法:
export default 默認導出的成員
樣例代碼a.js:
// 默認暴露
export default {
name: '果凍想',
getInfo: function(){
return "歡迎關注微信公衆號:果凍想";
}
}
注意事項:
- export default 向外暴露的成員,可以使用任意的變量來接收;
- 在每個模塊中,只允許使用唯一一次export defalut,否則會報錯;
- 如果一個模塊未export導出,但在另外一個模塊中引入了,會返回一個空對象,不會報錯。
統一導出
導出語法:
export {a, b, c};
樣例代碼b.js:
// 統一暴露
let name = '果凍想';
function getInfo(){
return "歡迎關注微信公衆號:果凍想";
}
export {name, getInfo};
分別導出
導出語法:
export a
export b
樣例代碼c.js:
// 分別暴露
export let name = '果凍想';
export function getInfo(){
return "歡迎關注微信公衆號:果凍想";
}
導入方式彙總
直接上代碼:
<script type="module">
// 1. 通用的導入方式
// 引入 a.js 模塊內容
import * as m1 from "./a.js";
console.log(m1.default.name);
console.log(m1.default.getInfo());
// 引入 b.js 模塊內容
import * as m2 from "./b.js";
console.log(m2.name);
console.log(m2.getInfo());
// 引入 c.js
import * as m3 from "./c.js";
console.log(m3.name);
console.log(m3.getInfo());
//2. 解構賦值形式
import {name, getInfo} from "./b.js";
console.log(name);
console.log(getInfo());
//3. 簡便形式 針對默認暴露
import a from "./a.js";
console.log(a.name);
console.log(a.getInfo());
</script>
在瀏覽器中如果無法直接運行,安裝一個live server插件就OK了。
總結
一天一個小知識點,學到了~