ES6 系列十二：Module

"Code tailor"，爲前端開發者提供技術相關資訊以及系列基礎文章，微信關注「小和山的菜鳥們」公衆號，及時獲取最新文章。

前言

在開始學習以前，咱們想要告訴您的是，本文章是對阮一峯《ECMAScript6 入門》一書中 "Module" 章節的總結，若是您已掌握下面知識事項，則可跳過此環節直接進入題目練習

• 什麼是模塊化 ？
• import 命令和 export 命令分別有什麼做用 ？
• 如何模塊總體加載
• export default 命令有何做用 ？

若是您對某些部分有些遺忘，👇🏻 已經爲您準備好了！

學習連接

Module 的學習

彙總總結

什麼是模塊化

歷史上，JavaScript 一直沒有模塊（module）體系，沒法將一個大程序拆分紅互相依賴的小文件，再用簡單的方法拼裝起來

ES6 模塊的設計思想是儘可能的靜態化，使得編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。

模塊功能主要由兩個命令構成：export 和 import。export 命令用於規定模塊的對外接口，import 命令用於輸入其餘模塊提供的功能。

export 命令

一個模塊就是一個獨立的文件。該文件內部的全部變量，外部沒法獲取。若是你但願外部可以讀取模塊內部的某個變量，就必須使用 export 關鍵字輸出該變量。下面是一個 JS 文件，裏面使用 export 命令輸出變量。

• 輸出變量

// profile.js
export var firstName = 'Michael'
export var lastName = 'Jackson'
export var year = 1958

//等同於下列代碼
var firstName = 'Michael'
var lastName = 'Jackson'
var year = 1958

export { firstName, lastName, year }

上面代碼是 profile.js 文件，保存了用戶信息。ES6 將其視爲一個模塊，裏面用 export 命令對外部輸出了三個變量。

• 輸出函數或類（class）

export function multiply(x, y) {
  return x * y;
};

一般狀況下，export輸出的變量就是原本的名字，可是可使用as關鍵字重命名

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

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

另：export 語句輸出的接口，與其對應的值是動態綁定關係，即經過該接口，能夠取到模塊內部實時的值。

import 命令

使用 export 命令定義了模塊的對外接口之後，其餘 JS 文件就能夠經過 import 命令加載這個模塊。

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

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

//import命令接受一對大括號，裏面指定要從其餘模塊導入的變量名。大括號裏面的變量名，
//必須與被導入模塊（profile.js）對外接口的名稱相同。

• 若是想爲輸入的變量從新取一個名字，import 命令要使用 as 關鍵字，將輸入的變量重命名。

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

• import 命令輸入的變量都是隻讀的，不容許在加載模塊的腳本里面，改寫接口。

import { a } from './xxx.js'
a = {} // Syntax Error : 'a' is read-only;

// 可是若是a是一個對象，改寫a的屬性是容許的
import { a } from './xxx.js'
a.foo = 'hello' // 合法操做

• import 後面的 from 指定模塊文件的位置，能夠是相對路徑，也能夠是絕對路徑。若是不帶有路徑，只是一個模塊名，那麼必須有配置文件，告訴 JavaScript 引擎該模塊的位置。

import { myMethod } from 'util'
//  util是模塊文件名，因爲不帶有路徑，必須經過配置，告訴引擎怎麼取到這個模塊。

• import 命令具備提高效果，會提高到整個模塊的頭部，首先執行。

模塊的總體加載

除了指定加載某個輸出值，還可使用總體加載，即用星號（*）指定一個對象，全部輸出值都加載在這個對象上面。

// circle.js

export function area(radius) {
  return Math.PI * radius * radius
}

export function circumference(radius) {
  return 2 * Math.PI * radius
}

import * as circle from './circle'

console.log('圓面積：' + circle.area(4))
console.log('圓周長：' + circle.circumference(14))

export default 命令

爲了給用戶提供方便，讓他們不須要知道所要加載的變量名或函數名，就能加載模塊。

// export-default.js
export default function () {
  console.log('foo')
}

上面代碼是一個模塊文件 export-default.js，它的默認輸出是一個函數。其餘模塊加載該模塊時，import 命令能夠爲該匿名函數指定任意名字。

// import-default.js
import customName from './export-default'
customName() // 'foo'

題目自測

一：關於 ES6 的 module 模塊，下列說法錯誤的是？

• A: 能夠有效解決大型系統文件複雜的依賴問題
• B: 使用 export 語句能夠選擇性地向外部暴露本身的屬性或者方法
• C: 使用 import 語句導入其餘模塊的屬性或者方法
• D: 目前大部分主流瀏覽器都支持 module 模塊

---

二：如下代碼輸出結果爲（）

// module.js
export default () => 'Hello world'
export const name = 'Lydia'

// index.js
import * as data from './module'

console.log(data)

• A: { default: function default(), name: "Lydia" }
• B: { default: function default() }
• C: { default: "Hello world", name: "Lydia" }
• D: Global object of module.js

---

三：簡述 export 和 export default 的區別

---

題目解析

1、

Answer: D

---

2、

Answer: A

使用import*做爲名稱語法，咱們從module.js歸檔到index.js將建立名爲 data 的新對象文件。在module.js 文件有兩個導出：默認導出和命名導出。默認導出是一個函數，它返回字符串「helloworld」，命名的導出是一個名爲name的變量，該變量的值爲字符串「Lydia」。

數據對象具備默認導出的默認屬性，其餘屬性具備命名導出的名稱及其相應值。

---

3、

export default的對象、變量、函數、類，能夠沒有名字。export的必須有名字 export default在一個模塊中只能有一個，固然也能夠沒有。export在一個模塊中能夠有多個 export default對應的import和export有所區別：有default的導入不須要{}

ES 6 系列的 Module，咱們到這裏結束啦，謝謝各位對做者的支持！大家的關注和點贊，將會是咱們前進的最強動力！謝謝你們！