JS 模組化:Import 和 export


Posted by l841108lily on 2020-06-22

之前使用的模組化是採用 require 和 export,現在的 ES6 語法可以更簡潔快速的撰寫模組化程式。


import

要在終端機輸入指令時,因為 node 還沒有支援 import,所以需要使用 babel,輸入:npx babel-node index.js

import {add, PI} from './utils'

console.log(add(3, 5), PI)

export

export function add(a, b){
  return a + b
}

export const PI = 3.14

接下來可以將它變形,讓看程式碼的人一眼就知道我要 export 哪些東西:

function add(a, b){
  return a + b
}

const PI = 3.14

export {
  add,
  PI
}

更改名稱

如果想要將變數或方法更改名稱,可以使用as,例如:

import 端更改名稱,此種方式 export 端不需要做更動:

import {add as addfunction, PI} from './utils'

console.log(addfunction(3, 5), PI)

export 端更改名稱,此種方式 import 端需要撰寫更動之後的名稱:

function add(a, b){
  return a + b
}

const PI = 3.14

export {
  add as addfunction,
  PI
}

所有東西都 import

使用 *代表所有已經 export 的東西都要 import:

//import 所有東西,並且稱之為 Utils
import * as Utils from './utils'

console.log(Utils.add(3, 5), Utils.PI)

設定預設值

這個功能其實不常用~
import 端,差別只在於不需要加大括號:

import add from './utils'

console.log(add(3, 5))

如果除了預設的 add 還想要 export PI

import add, {PI} from './utils'

console.log(add(3, 5), PI)

export 端,加上 default

export default function add(a, b){
  return a + b
}

export const PI = 3.14

#javascript #模組化







Related Posts

Python Table Manners - 測試 (一)

Python Table Manners - 測試 (一)

Progressive Web App 會是未來趨勢嗎?

Progressive Web App 會是未來趨勢嗎?

MTR04_0802

MTR04_0802



Comments