ES6（十六）—— Modules

目錄

• 模塊這裏，先簡簡單單講些語法吧

• export、import

  • 導出單個變量
  • 導出多個變量
  • 導出數組
  • 整合導出
  • 默認導出
  • 導出函數
  • 導出對象
  • 導出類
  • 多變量多類導出
• ES6-ES10學習版圖

模塊這裏，先簡簡單單講些語法吧

export、import

使用export、import語法，記得要進行babel編譯

導出單個變量

// A.js
export const name = 'hello'
// B.js
import {name} from './A'
console.log(name) // hello

導出多個變量

// A.js
export const name = 'hello'
export let addr = 'beijing'
// B.js
import { name, addr } from './A'
console.log(name, addr)
// hello beijing

導出數組

// A.js
export const list = [1, 2, 3]
// B.js
import { list } from './A'
console.log(list)
// [1, 2, 3]

整合導出

// A.js
const name = 'hello'
let addr = 'beijing'
const list = [1, 2, 3]

export {
    name,
    addr,
    list
}
// B.js
import { name, addr, list } from './A'
console.log(name, addr, list)
// hello beijing [1, 2, 3]

默認導出

只能有一個默認導出，其餘的都要放如對象後面去

// A.js
const name = 'hello'
let addr = 'beijing'
const list = [1, 2, 3]

export default name
export {
    addr,
    list
}
// B.js
import name, { addr, list } from './A'
console.log(name, addr, list)
// hello beijing [1, 2, 3]
// C.js
// 若是想要直接更名字，須要默認導出的變量才行
import name2 from './A'
console.log(name2)
// hello
// D.js
// 不是默認導出的變量，修更名字就須要用as
import { addr as addr2 } from './A'
console.log(addr2)
// beijing

導出函數

// A.js
export function say (content) {
  console.log(content)
}

// B.js
import {say} from './A'
say("helloword")
// helloword

導出對象

默認導出

// A.js
export default  {
  code: 1,
  message: 'success'
}

// B.js
import obj from './A'
console.log(obj)

變量形式

// A.js
const data = {
    code: 1,
    message: 'success'
}
const info = {
    name: 'xm',
    age: 16
}
export default {
  data,
  info
}

// B.js
import { data, info } from './A' // 報錯，引入衝突
// 只能總體導入再結垢賦值
import obj from './A'
let { data, info } = obj
console.log(data, info)
// {code: 1, message: "success"} {name: "xm", age: 16}

導出類

// A.js
class Test {
  constructor () {
    this.id = 2
  }
}

export {
  Test
}

// B.js
import {Test} from './A'
let test = new Test()
console.log(test.id) // 2

or

export class Test {
  constructor () {
    this.id = 4
  }
}

默認導出類

// A.js
class Test {
  constructor () {
    this.id = 3
  }
}

export default Test

// B.js
import Test from './A'
let test = new Test()
console.log(test.id)  // 3

or

export default class Test {
  constructor () {
    this.id = 4
  }
}

or

// 若是是default就不用寫類名了，沒有default必須寫類名
export default class {
  constructor () {
    this.id = 5
  }
}

多變量多類導出

// A.js
class Test {
  constructor () {
    this.id = 3
  }
}
class Ani {
  constructor () {
    this.name = 'animal'
  }
}

export {
  Test,
  Ani
}

export default class People{
  constructor () {
    this.id = 123
  }
}

// B.js
import * as Mod from './A'
let test = new Mod.Test()
console.log(test.id) // 3
let ani = new Mod.Ani()
console.log(ani.name) // animal
// 只能用default來獲取默認的類，不能使用People
let people = new Mod.default()
console.log(people.id) // 123

ES6-ES10學習版圖