0.什么是Module

歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對開發(fā)大型的、復(fù)雜的項目形成了巨大障礙。

在 ES6 之前，社區(qū)制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。ES6 模塊的設(shè)計思想是盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。ES6 模塊不是對象，而是通過export命令顯式指定輸出的代碼，再通過import命令輸入。

模塊系統(tǒng)主要解決的問題：

• 模塊化的問題
• 消除全局變量
• 管理加載順序

1.Module 的加載

使用 < script >標簽加載模塊時需要添加 type=“module”。

1.1 方式一

<script type="module">
    import module from "./module.js";
</script>

1.2 方式二

<script src="./module.js" type="module"></script>

2.導(dǎo)出和導(dǎo)入

2.1 一個模塊的導(dǎo)出可以被其它模塊導(dǎo)入，并訪問。

例1：使用About.js調(diào)用Base.js內(nèi)的Base對象，并在首頁打印。

index.html

<script type="module">
    import About from "./js/About.js";
    console.log(About);
</script>

Base.js

const Base = {
    nick: 'admin',
    age: 19
}
export default Base;

About.js

import Base from '../js/Base.js';
const src = `nick:${Base.nick},age:${Base.age}.`;
export default src;

輸出結(jié)果：

nick:admin,age:19.

2.2 沒有導(dǎo)出，也可以將其導(dǎo)入

例2：About.js不導(dǎo)出，在首頁將其導(dǎo)入。

index.html

<script type="module">
    import "./js/About.js";
</script>

About.js

const src = 'Hello World!';
console.log(src);

輸出結(jié)果：

Hello World!

2.3 被導(dǎo)入的代碼都會執(zhí)行一遍，也僅會執(zhí)行一遍

例3：導(dǎo)入3次About.js，觀察導(dǎo)出結(jié)果。

index.html

<script type="module">
    import "./js/About.js";
    import "./js/About.js";
    import "./js/About.js";
</script>

About.js

const src = 'Hello World!';
console.log(src);

輸出結(jié)果：

Hello World!

3.export default 和對應(yīng)的 import

export default 用于導(dǎo)出一個默認值，一個模塊只能有一個。

使用 export default 進行導(dǎo)出時，import 的名字可以隨意起。

例4：使用 export default 進行導(dǎo)出，import 的名字隨意起。

index.html

<script type="module">
    import bbb from "./js/About.js";
    console.log(bbb);
</script>

About.js

const src = 'Hello World!';
export default src;

輸出結(jié)果：

Hello World!

4.export 和對應(yīng)的 import

使用 export 進行導(dǎo)出時，import 的名字不能隨意起。

例5：使用 export 進行導(dǎo)出。

index.html

<script type="module">
    import { age, nick } from "./js/About.js";
    console.log(nick, age);
</script>

About.js

const age = 18;
export {age};
// export age; ×
// export const age = 18; √
export const nick = 'admin';

輸出結(jié)果：

admin 18

5.Module 的注意事項

1.模塊中，頂層的 this 指向 undefined；

2import 具有提升效果，會提升到整個模塊的頭部，率先執(zhí)行；

3.import 執(zhí)行的時候，代碼還沒執(zhí)行；

4.import 和 export 只能在模塊的頂層，不能在代碼塊中執(zhí)行；

5.import() 可以按條件導(dǎo)入；

6.復(fù)合寫法導(dǎo)出的，無法在當(dāng)前模塊中使用

復(fù)合寫法，導(dǎo)入后導(dǎo)出：

export About from './js/About.js';

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

最新評論