关于javascript: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 学习幅员