ES6之module語法（export和import）

前言：ES6 在語言標準的層面上，實現了模塊功能。

模塊化語法

一、export

• export：用來定義模塊，可以導出對象、函數、類、字符串等等

1、輸出變量

// profile.js
export var firstName = 'lisa';
export var lastName = 'guagua';
export var age = 18;

// profile.js
var firstName = 'lisa';
var lastName = 'guagua';
var age = 18;

export { firstName, lastName, age  };

以上 ↑ 兩種寫法完全等同。
注意點：export輸出的必須是接口，並且要與模塊內的變量相對應。

// 報錯
export 1;

// 報錯
var m = 1;
export m;

報錯原因：第一種直接輸出1，第二種輸出變量m同樣是輸出1，只是一個數據而不是接口。
正確寫法如下 ↓

// 寫法一
export var m = 1;

// 寫法二
var m = 1;
export {m};

// 寫法三
var n = 1;
export {n as m};
export {n as p};

註釋：使用as關鍵字，可以重命名了對外接口，並且可以命名兩次。

2、輸出函數或類（class）

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2
};

二、import

• import：用於引入其他模塊提供的功能，輸入的變量都是隻讀的，不可更改

// main.js
import { firstName, lastName, age } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

import命令可以使用as關鍵字，將輸入的變量重命名。

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

三、export default

export default 命令爲模塊指定默認輸出

與export 區別：

1. 一模塊中只允許出現一個export default；
2. 通過export方式導出，在導入時要加{ }，exportdefault則不需要加{ }
3. export default與普通的export不要同時使用