ES6-import與export

使用背景：過去經常會不小心讓一個 main.js 程式碼長達千、萬行
優化目的：可以模組化管理程式碼，方便協作跟測試

解決方式：為了達到模組化管理，ES6 語法出現import 、 export，可以先將特定功能拆分到另外一個檔案中，之後再 import 到主要的檔案裡作使用

案例：假設現在要定義一個數學計算功能
可以先將這些數學計算包成一個物件，所以先新增一個 math.js 檔案，在其中地義好並且export出一個物件

//math.js

const math = {
    double: x => x * 2,
    square: x => x * x,
    area: (w,h) => w * h
};
export default math;

接著，在主要檔案 main.js 檔案中，import近這個物件，並做執行使用

• 被import的物件可以隨意命名
• 而依據實際狀況，須放上檔案正確的參考路徑
• 副檔名’.js’可以省略

  //main.js
  import m from "./math.js";
  console.log(m.square(2));//印出4

Named export
在 export 時，給予一個名字

//math.js
export const PI = 3.1415;
export const ROOT_2 = 1.414;

在引入時，用大括號包起 named 物件

//main.js
import {PI,ROOT_2} from"./math";//被import的物件命名必須跟export時的名稱一樣
console.log(PI,ROOT_2)//3.1415 1.414

default 跟 named 可以混用

// math.js
const math = {
    ...略
}
export const PI = 3.1415;
export const ROOT_2 = 1.414;
export default math;

//main.js
import m,{PI,ROOT_2} from "./math.js"

重新命名named export
在 import named 物件時，可以用 as 來重新命名

//main.js
import m,{PI as P,ROOT_2 as R} from "./math.js";
console.log(P,R)