export

export有两种导出模式，export 和export default(一个模块中只能有一个default)

export 后边可以是一个变量声明表达式或者是一个{}里边包含变量名，但是不能直接输出一个变量

export default 后边可以直接跟一个常量或者变量，但是不能跟声明表达式

导出变量

export var name = '曹小怂'

const age = 18

export { age }

const sex = '女'

export default {sex} 

//错误写法
export age //错误
export default var name='abc ' //错误

导出函数

export和export都可以直接导出函数声明语句，但是export后边不能跟匿名函数，如果直接导出函数名export 需要用{}包裹

export default function fn1 () {
  console.log('fn function')
 }

export function fn2 () {
  console.log('fn2 function执行')
}

function fn3 () {
  console.log('fn3 function执行')
}
export {fn3}

//错误写法
export  function  () {
  console.log('test function')
}

import和export default

export default function fn1 () {
  console.log('fn1 function')
}

import 直接导入

import fn1 from './common'
fn1();

通过解构的方式导入 不可以会报错

import {fn1} from './common'
fn1();

export default小结

这个关键字导出的是值, 这个值在import的时候可以使用任意的变量去接收

import和export

export 导出的时候
export const fn1 = () => {
  console.log('fn1执行')
}
export function fn2 () {
  console.log('fn2执行')
}
import {fn1,fn2} from './common'
fn1()
fn2()

export小结

export导出的时候是将它们放到了一个对象中, 然后导出这个对象, import的时候需要用解构方式取出每个属性/方法

export default + export

export const fn1 = () => {
  console.log('fn1执行')
}
export function fn2 () {
  console.log('fn2执行')
}
const defaultFunc = () => {
  console.log('defaultFunc执行了')
}
export default defaultFunc

import defaultFunc, {fn1, fn2} from './common' //导入

此文借鉴于某大牛的文章基础之上