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