export default 和 export

export default 和 export 是 ES6 提供的两种模块导出的方式，他俩的区别是前者是导出一个整体，后者是导出单个，举个栗子来说，现在有两个 tools 文件，tools-all和 tools-part，内容如下

// tools-all.js
export default {
  toolAll1 () {
    console.log('tool all 1')
  },
  toolAll2 () {
    console.log('tool all 2')
  }
}

// tools-part.js
function toolPart1 () {
  console.log('tool part 1')
}

function toolsPart2 () {
  console.log('tool part 2')
}

export { toolPart1, toolPart2 }

在 index.js 中引入使用

import toolsAll from './tools-all'
import { toolPart1 } from './tools-part'


toolsAll.toolAll1()
toolPart1()

看看打包后的结果吧

// 前面省略...
}([function(e,t,o){"use strict";o.r(t);var n={toolAll1(){console.log("tools 1")},toolAll2(){console.log("tools 2")}};function r(){console.log("tool part 1")}r(),n.toolAll1(),r()}]);

使用 webpack 打包后的结果中可以看到，虽然我们引入 toolsAll 只使用了 toolAll1 函数，但是函数 toolAll2 也一起被打包进来了，因为是将 toolsAll 整个的引入进来了，而只从 tools-part 中引入了 toolPart1 函数

关于这两种导出方式的使用场景呢，在项目中使用 webpack 打包，相同的文件只会被引入一次，所以按照一般项目的设计来说，类似 api.js 和 tools.js 之中的内容都是项目中要用到的，使用 tools.check() 这样的方法还能比较直观的看出函数的归属文件

然后在设计提供方法的库或者插件的时候，因为别人引用你的插件不一定使用你全部的方法，可能只用一两个方法，这样的场景采用 export 可能是要更合适一些

说一点个人在命名上的理解，如果使用 export default 这样导出整体呢，具体到函数的名字就可以简单一点，因为他们都会有一个前缀，类似 walletApi.create() walletApi.send() 这样；使用 export 导出单个呢，为了让他们和组件内的函数有区别，命名类似 createWalletApi() sendWalletApi() 这样，对于函数的用处从名字上就能得到直观的感受