• 簡介
  • 模組化規範
• CommonJS規範
  • CommonJS使用 exports 和require 來匯出、匯入模組
  • 建立資料夾module
  • 建立common-js/四則運算.js
  • 匯出模組中的成員
  • 建立common-js/引入模組.js
  • 執行程式
• ES6模組化規範
  • ES6使用 export 和 import 來匯出、匯入模組。
  • 建立專案資料夾module-es6
  • 建立src/userApi.js檔案，匯出模組
  • 建立src/userTest.js檔案，匯入模組
  • 注意：這時的程式無法執行的，因為ES6的模組化無法在Node.js中執行，需要用Babel編輯成ES5後再執行。
  • 初始化專案
  • 配置.babelrc
  • 安裝轉碼器，在專案中安裝
  • package.json中定義執行指令碼
  • 執行轉碼命令
  • 執行程式
• ES6匯出匯入簡化寫法，也是工作中常用寫法
  • 建立src/userApi.js檔案，匯出模組
  • 建立src/userTest.js檔案，匯入模組

簡介

隨著網站逐漸變成”網際網路應用程式”，嵌入網頁的Javascript程式碼越來越龐大，越來越複雜。
Javascript模組化程式設計，已經成為一個迫切的需求。理想情況下，開發者只需要實現核心的業務邏輯，其他都可以載入別人已經寫好的模組。但是，Javascript不是一種模組化程式語言，它不支援”類”（class），包（package）等概念，也不支援”模組”（module）。

模組化規範

• CommonJS模組化規範
• ES6模組化規範
  

CommonJS規範

每個檔案就是一個模組，有自己的作用域。在一個檔案裡面定義的變數、函式、類，都是私有的，對其他檔案不可見。

CommonJS使用 exports 和require 來匯出、匯入模組

建立資料夾module

建立common-js/四則運算.js

// 定義成員：
const sum = function(a,b){
    return a + b
}
const subtract = function(a,b){
    return a - b
}
const multiply = function(a,b){
    return a * b
}
const divide = function(a,b){
    return a / b
}
 

匯出模組中的成員

// 定義成員：
const sum = function(a,b){
    return a + b
}
const subtract = function(a,b){
    return a - b
}
const multiply = function(a,b){
    return a * b
}
const divide = function(a,b){
    return a / b
}

// 匯出成員：
module.exports = {
    sum: sum,
    subtract: subtract,
    multiply: multiply,
    divide: divide
}

可簡寫

// 定義成員：
const sum = function(a,b){
    return a + b
}
const subtract = function(a,b){
    return a - b
}
const multiply = function(a,b){
    return a * b
}
const divide = function(a,b){
    return a / b
}

//簡寫
module.exports = {
    sum,
    subtract,
    multiply,
    divide
}

建立common-js/引入模組.js

//引入模組，注意：當前路徑必須寫 ./
const m = require('./四則運算.js')
console.log(m)
const r1 = m.sum(1,2)
const r2 = m.subtract(1,2)
console.log(r1,r2)

執行程式

node 引入模組.js

ES6模組化規範

ES6使用 export 和 import 來匯出、匯入模組。

建立專案資料夾module-es6

建立src/userApi.js檔案，匯出模組

export function getList() {
    console.log('獲取資料列表')
}
export function save() {
    console.log('儲存資料')
}

建立src/userTest.js檔案，匯入模組

//只取需要的方法即可，多個方法用逗號分隔
import { getList, save } from './userApi.js'
getList()
save()

注意：這時的程式無法執行的，因為ES6的模組化無法在Node.js中執行，需要用Babel編輯成ES5後再執行。

初始化專案

npm init -y

配置.babelrc

{
    "presets": ["es2015"],
    "plugins": []
}

安裝轉碼器，在專案中安裝

npm install --save-dev babel-preset-es2015

package.json中定義執行指令碼

{
    // ...
    "scripts": {
       "build": "babel src -d dist"
    }
}

執行轉碼命令

npm run build

執行程式

node dist/userComponent.js

ES6匯出匯入簡化寫法，也是工作中常用寫法

建立src/userApi.js檔案，匯出模組

export default {
    getList() {
        console.log('獲取資料列表2')
    },
    save() {
        console.log('儲存資料2')
    }
}

建立src/userTest.js檔案，匯入模組

import user from "./userApi2.js"
user.getList()
user.save()