這裡先建立一個負責計算的檔案,放入加總和平均兩個函式:
export function sum(numbers) {
return numbers.reduce((total, number) => total + number, 0);
}
export function average(numbers) {
if (numbers.length === 0) return 0;
return sum(numbers) / numbers.length;
}
export是將函式提供給其他檔案使用。這裡的sum和average都使用具名匯出,也就是匯入時必須使用相同的名稱。
接下來在主要的 JavaScript 檔案中使用import,把剛才匯出的兩個函式接進來:
import { sum, average } from "./day-23-math.js";
const minutes = [35, 50, 45, 70];
console.log("每天學習分鐘:", minutes);
console.log("總分鐘:", sum(minutes));
console.log("平均分鐘:", average(minutes));
{ sum, average }對應的是另一個檔案匯出的名稱,from後面則是檔案位置。路徑開頭的./代表從目前這個 JavaScript 檔案所在的位置開始尋找。
執行後可以看到總分鐘是200,平均分鐘是50。計算方式雖然寫在另一個檔案中,但透過export和import連接後,主要程式就能直接呼叫這兩個函式。
瀏覽器要使用這種模組語法時,HTML中的script需要加上type="module":
<script type="module" src="day-23.js"></script>
如果沒有加上type="module",瀏覽器會把它當成一般的 JavaScript 檔案,看到import時就會出現語法錯誤。另外,模組通常需要透過本機伺服器開啟;直接點兩下HTML,以file://方式開啟時,可能會受到瀏覽器的檔案存取限制。
還有一種export default稱為預設匯出,每個檔案只能有一個,而且匯入時可以自行命名。不過這次的檔案同時提供兩個計算功能,所以先使用名稱能一一對應的具名匯出。