export defaultexport 是 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.jstools.js 之中的内容都是项目中要用到的,使用 tools.check() 这样的方法还能比较直观的看出函数的归属文件

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

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

标签: none

添加新评论