export命令和import命令 詳解

2017-10-31

參考地址：http://es6.ruanyifeng.com/#docs/module

 

 

export命令

---

模塊功能主要由兩個命令構成：export和import。

• export命令用於用戶自定義模塊，規定對外接口；
• import命令用於輸入其他模塊提供的功能，同時創造命名空間（namespace），防止函數名沖突。

ES6允許將獨立的JS文件作為模塊，允許一個JavaScript腳本文件調用另一個腳本文件。

現有profile.js文件，保存了用戶信息。ES6將其視為一個模塊，里面用export命令對外部輸出了三個變量。

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
 
export {firstName, lastName, year};

import命令

---

使用export命令定義了模塊的對外接口以后，其他JS文件就可以通過import命令加載這個模塊（文件）。

// main.js
import {firstName, lastName, year} from './profile';
 
function sfirsetHeader(element) {
  element.textContent = firstName + ' ' + lastName;
}

上面代碼屬於另一個文件main.js，import命令就用於加載profile.js文件，並從中輸入變量。import命令接受一個對象（用大括號表示），里面指定要從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊（profile.js）對外接口的名稱相同。

如果想為輸入的變量重新取一個名字，import語句中要使用as關鍵字，將輸入的變量重命名。

1. import { lastName as surname } from './profile';

ES6支持多重加載，即所加載的模塊中又加載其他模塊。

 

模塊的整體輸入

---

export命令除了輸出變量，還可以輸出方法或類（class）。下面是一個circle.js文件，它輸出兩個方法area和circumference。

1. // circle.js
2. export function area(radius) {
3. return Math.PI * radius * radius;
4. }
5. export function circumference(radius) {
6. return 2 * Math.PI * radius;
7. }

然后，main.js輸入circlek.js模塊。

1. // main.js
2. import { area, circumference } from 'circle';
3. document.write("圓面積：" + area(4));
4. document.write("圓周長：" + circumference(14));

上面寫法是逐一指定要輸入的方法。另一種寫法是整體輸入。

1. import * as circle from 'circle';
2. document.write("圓面積：" + circle.area(4));
3. document.write("圓周長：" + circle.circumference(14));

 

module命令

---

module命令可以取代import語句，達到整體輸入模塊的作用。

1. // main.js
2. module circle from 'circle';
3.  
4. document.write("圓面積：" + circle.area(4));
5. document.write("圓周長：" + circle.circumference(14));

module命令后面跟一個變量，表示輸入的模塊定義在該變量上。