3-6 浅谈一下export 与 export default

模块化规范

• CommonJs：Node.js
• AMD：require.js
• CMD：cea.js
• ES6

使用export 导出的时候需要写大括号，使用 export default 导出的时候不需要写大括号

先定义模块再使用模块

使用 export 导出

export const a = 5

使用import 导入，导入的名字必须跟导出的名字一样

import { a } from 'xx.js'
console.log(a) // 5

调用函数

export const sum = (x, y) => x + y

import {sum} from 'xx.js'
console.log(sum(1, 2))

导出对象

const obj = {
  name:'es'
}
export {obj}
import {obj} from 'xx.js'

如果想导出多个模块的时候可以在上面统一定义，一次导出

const sum = (x, y) => x + y
const obj = {
  name:'es'
}
export {sum, obj}
import {obj} from 'xx.js'

导出类，方法

class People {
  constructor(name) {
    this.name = name
  }
  showName(){
    console.log(this.name)
  }
}
export {People}

let p = new People('UU')
p.showName()

导出方式 export default

const a = 5
export default a
// export default 在导入的时候不需要一模一样的名字去导入,在一个模块里只能导出一个
import aa from 'xx.js'
console.log(aa) // 5

如果使用export default 导出多个参数需要用对象的形式导出

export default {
  a,
  b,
  sum,
  obj,
  People
}

import mod from 'xx.js'
console.log(mod) // 导出一个对象
console.log(mod.a)
console.log(mod.b)
console.log(mod.sum(1,2))

import * as mod from 'xx.js'
console.log(mod) // Module
console.log(mod.defalut.a)
console.log(mod.defalut.b)
console.log(mod.defalut.sum(1, 2))

在项目中用到ES6很多地方，在项目中引入插件的时候都可以使用import 引入当前的插件 也可以把函数当作相应的模块，在项目里哪里需要这个函数就可以使用import 导入就可以了 因为是一个函数，所以说里面的变量也不会挂在在window上，解决了全局变量污染的问题， 也不会出现模块中的变量跟业务中的变量重名