JavaScript 導出模塊

在 JavaScript 中，導出模塊是指將代碼封裝成一個單獨的模塊，以便于在其他文件中重用。

常見的導出語法有兩種：

// 導出單個變量或函數
export const name = 'John';
export function sum(a, b) {
return a + b;
}
// 導出多個變量或函數
const name = 'John';
function sum(a, b) {
return a + b;
}
export {name, sum};

使用*語法可以導出整個模塊：

// 模塊1
export const name1 = 'John';
// 模塊2
export function sum(a, b) {
return a + b;
}
// 導出整個模塊
import * as module from './module.js';
console.log(module.name1); // John
console.log(module.sum(1, 2)); // 3

導出模塊的好處在于可以避免全局命名沖突，提高代碼可重用性。例如，在一個項目中，我們可以將不同功能的代碼分別封裝成不同的模塊，在需要時再引入使用。

使用 commonJS 模塊化規范的 Node.js 環境中，導出模塊的語法有所不同，使用 module.exports 導出。

// 導出單個變量或函數
module.exports.name = 'John';
module.exports.sum = function(a, b) {
return a + b;
};
// 導出整個模塊
module.exports = {
name: 'John',
sum: function(a, b) {
return a + b;
}
};

需要注意的是，在瀏覽器中，使用 ES6 的導出語法需要編譯為 ES5 代碼才能運行。

最后，我們來看一下一個實際的例子。假設我們有一個實用工具庫，其中包含了諸如格式化時間、格式化貨幣、生成隨機數等功能，我們可以將這些功能封裝成不同的模塊，方便其他開發者使用。

示例代碼如下：

export function formatDate(date) {
// 日期格式化邏輯
}

export function formatMoney(money) {
// 貨幣格式化邏輯
}

export function randomNum(min, max) {
// 生成隨機數邏輯
}

import {formatDate} from './utils/time.js';
import {formatMoney} from './utils/currency.js';
import {randomNum} from './utils/random.js';
document.write(formatDate(new Date()));
document.write(formatMoney(100));
document.write(randomNum(1, 10));

上述代碼中，我們將時間格式化、貨幣格式化、生成隨機數三個功能封裝成了獨立的模塊，在 index.js 中引入并使用了這三個模塊。

導出模塊是 JavaScript 中非常重要的一個概念，在實際開發中也經常用到。希望您能通過本文了解導出模塊的語法和用法，并在實際開發中加以應用。