模塊
一個一個的局部作用域的代碼塊
模塊系統(tǒng)解決的問題
- 模塊化的問題
- 消除全局變量
- 管理加載順序
export default和對應(yīng)的import
- 導(dǎo)出的東西可以被導(dǎo)入（import），并訪問到
- 一個模塊沒有導(dǎo)出，也可以將其導(dǎo)入
- 被導(dǎo)入的代碼都會執(zhí)行一遍，也僅會執(zhí)行一遍
- 導(dǎo)入時可以隨便起名
- 一個模塊只能有一個 export default
A.js 導(dǎo)出模塊
const age = 18;
// const sex = 'male';
// console.log(age);
// export default age;
// export default 20;
// export default {};
// const fn = () => {};
// export default fn;
// export default function () {}
export default class {}
B.js引入模塊
//可以隨便起名
import age from './module.js';
console.log(age);
export 和對應(yīng)的import
- 在使用import導(dǎo)入時，不能隨意命名，要和導(dǎo)出的名字保持一致
- 使用export 導(dǎo)出時，必須是聲明或者語句，不能使一個值，例如：
錯誤寫法：const age = 18; export age;
正確寫法：export const age = 18;或者export { age }; -
as導(dǎo)出導(dǎo)入時起別名
//導(dǎo)出時起別名
function fn() {}
export { fn as func};
// 導(dǎo)入時起別名
import { func as f1} from './module.js';
-
*整體導(dǎo)入
import * from './module.js';
// 也可以起別名
import * as obj from './module.js';
- export和export default 同時導(dǎo)入 :一定是 export default 的在前
// 正確寫法
import age2, { func, age, className } from './module.js';
// 錯誤寫法
import { func, age, className },age2 from './module.js';
Module 的注意事項
- 模塊頂層的this指向undefined
- import 命令具有提升效果，會提升到整個模塊的頭部，率先執(zhí)行
- import 執(zhí)行的時候，代碼還沒執(zhí)行
- import 和 export 命令只能在模塊的頂層，不能在代碼塊中執(zhí)行
- import() 可以按條件導(dǎo)入
- 導(dǎo)入導(dǎo)出的復(fù)合寫法
export { age } from './module.js';
