【ES6系列】Module 模塊化

一、導入導出變量

// 導出變量
export const name = 'hello' // 導出變量
export let addr = 'beijing'
export var list = [1, 2, 3]

// 導入變量
import { name, addr, list} from './js-mod'

// 導出變量
const name = 'hello'
let addr = 'beijing'
let list = [1, 2, 3, 5]
export {
  name,
  addr,
  list
}

// 導入變量
import { name, addr, list} from './js-mod'

默認導出的變量不能包含在{}裏，默認導出模塊允許導入時自定義名稱，一個文件只能默認導出一個模塊。

// 導出默認變量
const name = 'hello'
let addr = 'beijing'
let list = [1, 2, 3, 5]
export default name
export {
  addr,
  list
}

// 導入默認變量和普通變量
import name, { // 默認導出的變量不能包含在{}裏，默認導出模塊允許導入時自定義名稱
  addr as newAddr, // 導入時可以用 as 關鍵字爲導出的模塊重命名/指定別名
  list
} from './js-mod'

二、導入導出函數

// 導出方法 - say 是默認導出模塊
export default function say(content) {
  console.log(content)
}
export function run() {
  console.log('I am running');
}

// 導入方法 - say 是默認導出模塊
import
say, { run } from "./js-mod";

// 導出函數
const say = (content) => {
  console.log(content)
}
const run = () => {
  console.log('I am running')
}
export default say
export {
  run
}

// 導入方法 - say 是默認導出模塊
import
say, {
  run
} from "./js-mod";
say('hello world')
run()

三、導入導出對象

// 導出對象 - 導出多個對象
const info = {
  name: 'er',
  age: 7
}
const des = {
  age: 22,
  addr: 'Beijing'
}

export default {
  info,
  des
}

// 導入對象
import obj from './js-mod'
let { info, des } = obj // 解構賦值

四、導入導出類

// 導出類-默認導出
class Test {
  constructor() {
    this.id = 5
  }
}
export default Test

// 導入類-默認導入
import Test from './js-mod'
let test = new Test()
console.log(test.id)

// 直接默許導出類
export default class { // 可省略類名。如果非默認導出不能省略類名
  constructor() {
    this.id = 7
  }
}

// 導入類
import Test from './js-mod' // 非默認導出Test需包含在{}裏
let test = new Test()
console.log(test.id)

導入導出多個類

// 導出多個類
export class Test {
  constructor() {
    this.id = 7
  }
}
export class Animal {
  constructor() {
    this.name = 'dog'
  }
}
export default class People {
  constructor() {
    this.id = '778'
  }
}

// 導入多個類
import * as Mod from './js-mod'
let test = new Mod.Test() // 注意引用通過Mod
console.log(test.id)
let animal = new Mod.Animal() // 注意引用通過Mod
console.log(animal.name)
let people = new Mod.default() // 注意：默認導出的類的引用鏈，不能通過類名調用
console.log(people.id)

 思考：被導出的模塊是否能在本模塊引用？

被導出模塊可以在本模塊引用，示例如下：

// 導出函數
export function say() {
  console.log('say')
}
export function run() {
  say()
}

// 導入函數
import {
  run
} from './js-mod'
run() // 'say'