es6模块化设计

Posted 2021-03-14 qjb2404

//导出
//方式一
export const name = ‘hello‘
export let addr = ‘chengdu‘
export var list = [1,2,3]

//方式二
const name = ‘hello‘
let addr = ‘chengdu‘
var list = [1,2,3]

export default name  //默认导出，只能有一个默认导出
export {
  //name,
  addr,
  list
}

//导入
import { name,addr,list } form ‘./lesson-mod‘
import name, { addr,list } form ‘./lesson-mod‘
import name2 form ‘./lesson-mod‘ //只有默认导出的才能自己命名
import name, { addr as addr2 } form ‘./lesson-mod‘ //可以利用as重命名
console.log(name,addr,list)

//导出函数,方式一
export default function say (content) {
   console.log(content)
}
export function run (){
   console.log(‘running‘)
}

//方式二
const say = (content) => {
  console.log(content)
}
const run = () => {
  console.log(‘running‘)
}

export {
   say,
   run
}

//导入函数
import say,{ run } form ‘./xx‘
say(‘hello word‘)
run()

//导出对象
const data = {
  code: 1,
  message: ‘success‘
}
const des = {
  age: 20,
  addr: ‘chengdu‘
}
export default {
   data,
   des
}

//导入
import obj from ‘./xxx‘
let {data, des} = obj
console.log(obj)
console.log(data,des)

//导出类
class Test {
  constructor () {
     this.id = 2
  }
}
export {
  Test
}

//导出默认类
export default Test

//这样写也行
export class Test {
  constructor () {
     this.id = 3
  }
}

//如果导出默认类，类名可以省略
export class {
  constructor () {
     this.id = 4
  }
}

//导入
import { Test } from ‘xxx‘
import Test  from ‘xxx‘ //默认导出

let test = new Test()
console.log(test.id)

//同时导出多个类
export class Test1 {
  constructor () {
     this.id = 3
  }
}
export class Test2{
  constructor () {
     this.id = 4
  }
}

export default class people {
  constructor () {
     this.id = 11
  }
}

//导入
import * as Mod from ‘xxxx‘
let test1 = new mod.Test1()
console.log(test1.id)
let test2 = new mod.Test2()
console.log(test2.id)
let people = new Mod.default() //注，这里找不到people,要用default
console.log(people.id)