JavaScript ES6 Module模塊詳解

Posted on by

0.什麼是Module

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

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

模塊系統主要解決的問題：

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

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.導出和導入

2.1 一個模塊的導出可以被其它模塊導入，並訪問。

例1：使用About.js調用Base.js內的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;

輸出結果：

nick:admin,age:19.

2.2 沒有導出，也可以將其導入

例2：About.js不導出，在首頁將其導入。

index.html

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

About.js

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

輸出結果：

Hello World!

2.3 被導入的代碼都會執行一遍，也僅會執行一遍

例3：導入3次About.js，觀察導出結果。

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);

輸出結果：

Hello World!

3.export default 和對應的 import

export default 用於導出一個默認值，一個模塊隻能有一個。

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

例4：使用 export default 進行導出，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;

輸出結果：

Hello World!

4.export 和對應的 import

使用 export 進行導出時，import 的名字不能隨意起。

例5：使用 export 進行導出。

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';

輸出結果：

admin 18

5.Module 的註意事項

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

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

3.import 執行的時候，代碼還沒執行；

4.import 和 export 隻能在模塊的頂層，不能在代碼塊中執行；

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

6.復合寫法導出的，無法在當前模塊中使用

復合寫法，導入後導出：

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

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容！

推薦閱讀：