如今，我們無法想象沒有Javascript的互聯網，有些網站幾乎完全使用Javascript構建的。為了使Javascript更具模塊化、簡潔性和可維護性，ES6引入了一種在Javascript文件之間輕松共享代碼的方法。這涉及使用模塊導出文件的一部分以供一個或多個其他文件使用，并在需要的地方導入所需的部分。

在本文中，將通過一些簡單且實用的示例來學習Javascript中的ES6的模塊。

什么是ES6模塊？

模塊使我們可以將代碼庫分成多個文件，以提高可維護性，也避免將所有代碼放入一個大文件中。

為了達到這個效果，需要在HTML文檔中使用一種 module 類型創建腳本。

如下代碼所示：

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

使用此 type="module" 引入的腳本就可以使用 import 和 export 功能。

export / import

用模塊來組織代碼，目的是提高代碼的復用性，模塊的代碼通過export對外暴露，對應通過import 就可以引用了。

假設在一個名為index.js的文件中有一個代碼塊，并且想要在多個不同的文件中使用該特定的代碼塊。可以通過導出該代碼塊，然后將其導入其他文件來實現。

請看下面的示例，在該示例中導出了函數 multiple 和 add：

export const multiply = (x, y) => {
    return x * y;
};

export const add = (x, y) => {
    return x + y;
};

也可以通過以下示例達到相同的要求：

const multiply = (x, y) => {
    return x * y;
};
const add = (x, y) => {
    return x + y;
};

export { multiply, add };

至于使用哪種方式組織代碼，沒有太大的區別，個人偏向第二種代碼風格。當然導出不一定是函數，變量也是可以的。下面就來看下導入的代碼示例：

import { multiply, add } from "./index";

console.log(multiply(1, 2));
console.log(add(1, 2));

加入需要引入的方法比較多的情況，沒必要每個方法都寫一遍，可以通過下面的方式，做一個統一的入口：

import * as mathHelper from "./index.js";

console.log(mathHelper.multiply(1, 2));
console.log(mathHelper.add(1, 2));

export default

僅當從文件中導出一個值或一個功能時，才可以使用 export default，我們把上面的代碼稍微改一下：

// 命名函數
export default function multiply(x, y) {
    return x * y;
}

// 匿名函數
export default function (x, y) {
    return x * y;
}

只需使用 import 即可導入上面的函數，導入代碼如下：

import multiply from "./index.js";
console.log(multiply(1, 2));

從上面我們可以看出區別，導入 export default 定義的函數 multiply 不需要花括號 {} ，無論文件index.js的 export default 是什么，在這里 multiply 只是一個函數名或者變量名。導入 export default 定義，可以在導入時候使用任何名稱。如下的方式也是對的：

import multiplyHelper from "./index.js";
console.log(multiplyHelper(1, 2));

export default 和 export 區別

• export與export default都可用于導出常量、函數、文件、模塊等
• 在一個文件或模塊中，export/import可以有多個，export default 只能有一個
• 通過export方式導出的模塊，在導入時要加花括號{ } ；而 export default 則不需要加花括號

總結

Javascript中的ES6模塊允許將Javascript代碼導出和導入到不同的文件中，這有助于將代碼分解為更小的粒度文件，提高代碼的復用性，從而減少代碼代碼冗余，也能讓代碼更簡潔。