【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'