es6模块 import,export

exports的几种用法

Named exports(导出每个变量/函数)

// exports.js
export const item = THIS_CONST;
export function sum(x,y){
    return x+y
}
function multiply(x,y){
    return x*y
}
export multiply;


//import1.js
import {item,sum,multiply} from 'export.js'
console.log(sum(1+2)) //3
console.log(item) //THIS_CONST
console.log(mutiply(9*9) //81

//import2.js
import * as el from 'export.js'
...
...
console.log(el.mutiply(9*9)) //81

上面的导出模块有点不简洁，有点混乱，格式可以变，统一导出即可

...
...
export {item,sum,multiply}

Default exports

一般用来导出一个简单的函数或者一个类，需要注意的是默认导出每个模块只运行一个默认导出

//export.js
export default function(){
    ...
}
//export2.js
class myClass {
    constructor(){
        ...
    }
    name(){
        console.log('myClass')
    }
}
export myClass
//import.js
import defaultFunc from 'export.js';
defaultFunc()

import myClass from 'myClass'
myClass.name() //'myClass'

需要注意的是需要加{}来接收 而如果是Named exports和default exports混合一起导出的Mixed exports的话可以通过{}和不加{}来区分Named exports和default exports

Re-exporting

别名导出

// exports.js
export function getName(){
    ...
}
eport function setName(){
    ...
}
export {
    getName as get,
    getName as getV2,
    setName as set
}

别名导出可以让同一个变量/函数别名两次导出，两个都是可用的

import

import {xx} from 'exports.js' //直接获取导出元素
import * as xx from 'exports.js' //把所有导出元素整合到一个对象中