目錄
之前看網(wǎng)上很多對es6的模塊化這塊講的不夠明確翠订，于是乎自己總結一篇記錄下來大脉。
一. export導出
1.導出變量/常量
export let a = 10;
export const b = 15;
2.集中導出和as關鍵字
let a = 10;
const b = 15;
function show(){
console.log("aa");
}
export {
a,
b as c,
show
}
上面的例子中可以將導出的內容通過as進行更名（import 里也可以使用as）
3.export default
那么export和export default的區(qū)別是：前者導出的東西需要在導入的時候加{}古劲，而后者則不需要：
export default let a = 10;
const b = 15;
function show(){
console.log("aa");
}
export{
b,
show
}
//那么import a的時候就不需要加{}、
// import a,{b,show} from './modules/1.js';
二. import導入
特點
- import可以是相對路徑，也可以是絕對路徑
- import模塊只會導入一次归园，無論你引入多少次
- import './modules/1.js'; 如果這么用，相當于引入文件
- 有提升效果稚矿，import會自動提升到頂部庸诱，首先執(zhí)行
- 導出去模塊內容，如果里面有定時器更改盐捷，外面也會改動
注意：引入的時候前面要加上(./)當前路徑偶翅，不加就會報錯
導入方式
1.導入一個變量
import {a} from "./demo.js";
2.導入多個
import {a,b,c} from "./demo.js";
3.as關鍵字
import {a as aa,b as bb,c } from "./demo.js";
4.使用* as 導出整個module
import * as modTwo from "./demo.js";
//可以使用 modTwo.aa 使用變量
5.導入default
//導入default不需要{},別的需要加
import aa,{c,d} from "./demo.js";
動態(tài)導入模塊
好處
按需加載
可以寫if中
路徑可以動態(tài)
使用示例
在JavaScript中還可以通過import() 進行動態(tài)導入模塊。
import('https://code.jquery.com/jquery-3.3.1.js').then(res =>{
$(function(){
$('body').css({
background:'gray'
})
})
})
