es6模块的导入和导出

情景描述

• 项目中在每一个目录下都有一个index.js
• 每一个index.js文件都是做的都是将整个目录下的文件整合到这个index.js中做统一的暴露
• 然后使用webpack做一个统一的alias

//某个文件夹下面的index.js
export * from './guid'
export * from './promiseMiddleware'
export * from './auth'
export httpClient from './http/index'

优点和问题

• 第一次看到这样的做法，其实我也不太理解他的优点，从我个人角度认为这样做的好处是：

  • 符合面向对象的概念：封装
    • 将同一功能的模块进行封装，做一个统一暴露
  • 便于对一个模块的内容进行管理
    • 能够清晰的看出这个模块中具备什么工具

• 但是存在问题：

  • 我认为并不是所有的模块（目录）都需要这样的统一管理和暴露
    • 比如：工具目录确实是需要的，但是诸如conatiner我认为是没有这样的需求的
  • 而且我们如果通过import * as XXX from 的方式引用会不会造成性能问题（因此我对es6模块的暴露和引入做了一些学习）

es6的暴露

• 暴露方式分为两种：命名暴露和默认暴露

  • 主要区别是:
    • 默认暴露（export default）可以匿名暴露所以一个文件只能暴露一个东西
    • 命名暴露（export）将所有暴露出来的东西作为value并以你对他的命名作为key，整合成对象暴露出来
      • 因此所有暴露出来的东西必须命名
      • 引入的时候要么是引入一个对象要么使用解构的方式

• 不仅可以暴露本文件中定义的定西还可以直接暴露其他模块或者文件中的东西

  • 本文件：

    export const name = '111'
    

  • 其他模块

    export * from '../../utils'
    

终于明白import的碾压require的地方了

• require：要把这个模块中的所有内容引入
• import：可以只把需要使用的引入到文件
  • 大大提升性能啊！！！！

const ant = require('antd')
//必须引入antd模块中的所有东西在通过antd.**使用

import {DatePicker} from 'antd'
//只引入我需要使用的DatePicker组件

模块加载的方式

• 同步加载

import * from **

• 异步加载

System.import(***).then()

现在感觉好处有：

• 不会block住接下来的代码
• 可以在某个function中引用也就意味这并不是需要在文件开始的时候引入所有模块

• 动态加载

-------> 模块加载问题还需要再研究研究