iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 11
0
Modern Web

React - DOM界的彼方系列 第 11

Day 11: ES6篇: Module System(模組系統)

intro

本章的目標是對模組系統(Module System)提供一些使用上的簡單說明。模組系統是一個重要的ES6特性,搭配目前的NPM相依性管理工具,可以說是目前JavaScript發展的一個重大的改變,也是目前開發JavaScript應用的主要方式。對開發者來說,語法很簡單就可以開始使用,其他的工作會交由打包與編譯工具來幫你作。

註: 本文章同步放置於Github庫的這裡

特別注意: 截至目前為止(2016.12),所有的瀏覽器都沒有原生(內建)完整支援import/export語法,就算有支援也是實驗性質(需額外開啟)或是功能不完整。你必須使用如babel編譯工具來作預編譯的工作。如果你有需要在瀏覽器上直接執行,也可以打填充(polyfill)來讓瀏覽器可以使用這個語法。

註: ES6標準中雖然定義了模組的語法,但卻沒定義如何載入模組(只有抽象的表達字詞),但這也是最複雜的一部份,未來可能會因為環境而實作不同。

模組系統是什麼?

當程式碼愈寫愈多,應用程式的規模愈來愈大時,我們需要一個用於組織與管理程式碼的方式,這個需求相當明確,或許不只是應用程式發展到一定程度才會考慮這些,而是應該在開發程式之前的規劃就需要考量進來。JavaScript語言是一個沒有命名空間設計的程式語言,也沒有支援類似的組織與程式碼分離的設計。有些人認為使用物件定義的字面文字,可以定義出物件的方法與屬性,但如果你看過"物件"、"this"與"原型物件導向"的章節內容,就知道物件中並沒有區分私有、公開成員或方法的特性,這個組織方式頂多只是把方法或屬性整理集中而已。

在應用程式規模化的階段,我們需要一種機制,能夠區分出每個獨立檔案的作用域,而不會影響到全域的作用域,也就是不會任意的污染到全域。而在很早之前(2003)在社群上發展出一個稱之為模組樣式(module pattern),以及之後的變型如 暴露模組樣式(Revealing Module Pattern),就是第一代的程式碼組織管理方式。模組樣式實作相當簡單,有許多早期開始發展的函式庫或框架採用這個樣式,甚至到今天也可以看到它的使用身影。一個簡單的範例如下(以下範例來自jQuery):

// 模組樣式
var feature = (function() {

    // 私有的變數與函式
    var privateThing = "secret"
    var publicThing = "not secret"

    var changePrivateThing = function() {
        privateThing = "super secret"
    };

    var sayPrivateThing = function() {
        console.log( privateThing )
        changePrivateThing()
    };

    // 公開的API
    return {
        publicThing: publicThing,
        sayPrivateThing: sayPrivateThing
    }
})()

feature.publicThing // 公開部份的存取

// 透過公開的API來存取私有的變數
feature.sayPrivateThing()

模組樣式使用了IIFE函式的特性,區分出作用域,不過它並沒有辦法徹底解決問題,它在小型的應用程式可以用得很好,但在複雜的程式中仍然有很大的問題,例如以下的問題:

  • 沒辦法在程式中作模組載入
  • 模組之間的相依性不易管理
  • 異步地載入模組
  • 除錯與測試都不容易
  • 在大型專案中不易管理

模組樣式似乎是一個暫時性的解決方案,但不得不說它的確是上一代很重要的程式碼組織方式。第二代的模組系統,是在2009年之後的CommonJS與AMD(Asynchronous Module Definition)專案,它們實作出真正完整的模組系統,CommonJS是專門設計給伺服器端的Node.js使用的,而AMD的目標則是瀏覽器端。當然它們兩者的設計有所不同,也不相容,使用時也可能需要搭配載入工具來一併使用,不過這個階段的模組系統已經是較前一代完善許多,在相依性與模組輸出與匯入,都有相對的解決方式,程式碼的管理與組織方便了許多。

CommonJS與AMD並不會在這裡討論,我們的重點是是ES6中的模組系統,ES6中加入了模組系統的支援,它採用了CommonJS與AMD的優點,是一個語言內建的模組系統,而且它可以使用於瀏覽器與伺服器端,這是一個相當重大的新特性,可以讓你的開發日子更輕鬆許多。

模組如何開始使用

ES6的模組系統使用上相當簡單,各模組有自己的獨立的作用域,所以你必須指示要在應用程式中匯入或輸出哪一些模組。使用上大致上只有三個重點:

  • ES6的模組程式碼會自動變成Strict mode(嚴格模式),不論你有沒有使用"use strict"在程式碼中。
  • ES6的模組的分隔原則是一個檔案一個模組
  • ES6模組使用export進行輸出,與import語句來進行匯入。通常匯入語句位於程式碼檔案中最前面,輸出則可以位於識別名稱處,或是位於程式碼檔案最後。

模組的名稱

模組的名稱是由目錄與檔案名稱的組合,而省略掉副檔名(.js或.jsx)。如果是由NPM工具所安裝的模組,則是只需要模組的名稱即可,不需要有路徑部份。

  • 如果你要匯入的檔案名稱是utils.js,而且是在同目錄下,則使用import(匯入)這個檔案的名稱,例如./utils
  • 如果你要匯入的檔案名稱是在相對目錄components下,則加上目錄的相對路徑來作匯入,例如./components/utils

模組輸出與匯入

有使用模組輸出語句的程式碼檔案,才能讓其他程式碼檔案進行匯入的工作。模組輸出可以使用export關鍵字,在想要輸出(也就是變為公開部份)加在前面,物件、類別、函式定義(function 或 function*)與原始資料類型(變數與常數)都可以輸出,例如以下的範例:

多個輸出名稱

export const aString = 'test'

export function aFunction(){
  console.log('function test')
}

export const aObject = {a: 1}

export class aClass {
  constructor(name, age){
    this.name = name
    this.age = age
  }
}

上面稱之為多個輸出名稱的情況,有兩種方式可以進行匯入,一種是每個要匯入的名稱都需要定義在花括號({})之中,這在匯入模組部份的內容時很常用到。例如以下的範例:

import {aString, aObject, aFunction, aClass} from './lib'

console.log(aString)
console.log(aObject)

另一種是使用萬用字元(*),代表要匯入所有的輸出定義的值,不過你需要加上一個模組名稱,例如下面程式碼中的myModule,這是為了防止命名空間的衝突之用的,之後的程式碼中都需要用這個模組名稱來存取輸出模組中的值,這個作法不常使用:

import * as myModule from './lib'

console.log(myModule.aString)
console.log(myModule.aObject)

myModule.aFunction()
const newObj = new myModule.aClass('Inori', 16)
console.log(newObj)

單一(預設)輸出識別名稱

這個要輸出成為模組的程式碼檔案中,只會有一個輸出的變數/常數、函式、類別或物件時,或是用於作為最低使用情況的預設輸出時,通常會加上default關鍵詞。如果要使用有回傳值的函式,通常也是用單一輸出的方式。例如以下的範例:

function aFunction(param){
  return param * param
}

export default aFunction

對單一輸出的模組來進行匯入就不需要用花括號,這代表只匯入以default值定義的輸出語句:

import aFunction from './lib2'

console.log(aFunction(5))

這是最特別的,可以在匯入時改變匯入值的名稱,這樣可以讓作匯入檔案中,確保不會有名稱衝突的情況:

import square from './lib2'

console.log(square(5))

特別注意: 當使用var, let 或 const時,"不能"使用export default

輸出與匯入的語法參考

輸出與匯入的語法實際看例子會比較快。不過常用的就是那幾種而已。如果你有看到不同的語法,可以再對照一下MDN上的相關說明,這裡只有列出常見的幾個。

合法的輸出語法

export var x = 42;                      // 輸出一個變數識別名稱
export function foo() {};               // 輸出一個函式識別名稱

export default 42;                      // 輸出一個預設值
export default function foo() {};       // 輸出一個預設值,是個函式定義

export { encrypt };                     // 輸出一個已存在的變數
export { decrypt as dec };              // 輸出一個已存在的變數,改用新的識別名稱
export { encrypt as en } from 'crypto'; // 從另一個模組,輸出一個已存在的變數,改用新的識別名稱
export * from 'crypto';                 // 從另一個模組,輸出所有要輸出的

合法的匯入語法

import 'jquery';                        // 匯入一個模組,整個匯入
import $ from 'jquery';                 // 匯入模組的預設的輸出部份
import { $ } from 'jquery';             // 匯入模組的一個識別名稱
import { $ as jQuery } from 'jquery';   // 匯入模組的一個識別名稱,用不同的識別名稱取代
import * as crypto from 'crypto';    // 匯入整個模組,改用不同的識別名稱

撰寫風格

  • 不要使用萬用符(wildcard, *)作匯入模組。(Airbnb 10.2)
  • 從一個位置只作一次匯入。(Airbnb 10.4)
  • 匯入語句都放在程式碼檔案中其他語句的上面。(Airbnb 10.7)
  • 不要輸出可以改變的識別名稱(變數),類別與函式要小心被重新指定。(Airbnb 10.5)
  • 如果在一個模組只需要單一個輸出,優先使用預設(default)輸出的語法。(Airbnb 10.6)

結論

ES6的模組系統樣式設計得簡單易用,這篇文章只是簡單的提供一些使用上的說明。雖然它有很多種不同樣式的語法,但常見的只有幾種而已,用久了你自然會很習慣。模組系統是一個已經是像日常生活吃飯喝水這樣的功能,開發JavaScript不能少了它,要運用豐富的模組資源,就是使用這個語法來使用這些開放原始碼的模組。


上一篇
Day 10: ES6篇 - Class(類別)
下一篇
Day 12: ES6篇: Side Effects(副作用)與Pure Functions(純粹函式)
系列文
React - DOM界的彼方30

尚未有邦友留言

立即登入留言