module.exports、exports、export、export default之间的关系和区别

对于module.exports、exports和export、export default之间的关系以及他们的区别一直处于懵逼状态的小伙伴，本篇文章带你走进新大陆。

首先我们要明白一个前提，CommonJS模块规范和ES6模块规范完全是两种不同的概念。此处会产生一个疑问，为什么会出现模块化这种东西，模块化规范又是指的什么？

：很久以前，开发网页要通过命名空间的方式来组织代码，例如 jQuery 库将它的 API 都放在了 window.$ 下，在加载完 jQuery 后，其他模块再通过 window.$ 去使用 jQuery。这样做有很多问题，其中包括：

1、命名空间冲突，两个库可能会使用同一个名称，例如 Zepto(http://zepto.com) 也是放在 window.$ 下
2、无法合理地管理项目的依赖和版本
3、无法方便地控制依赖的加载顺序

当项目变大，这种方式将变得难以维护，需要用模块化的思想来组织代码。

模块化的特点：

1、提升开发效率：代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发法类似的功能。
2、方便后期维护：代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发法类似的功能。

模块化的规范：

 服务器端规范主要是CommonJS，node.js用的就是CommonJS规范。

 客户端规范主要有：AMD（异步模块定义，推崇依赖前置）、CMD（通用模块定义，推崇依赖就近）。AMD规范的实现主要有RequireJS，CMD规范的主要实现有SeaJS。但是SeaJS已经停止维护了，因为在ES6中已经有了模块化的实现，随着ES6的普及，第三方的模块化实现将会慢慢的淘汰。

本文主要介绍的也是CommonJS和ES6，所以其他的规范请允许我无耻的忽略了，下面进入正题：

一、CommonJS模块规范
CommonJS的核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports到处需要暴露的接口。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

module.exports:

// utils.js
let appid = '123456'
let bar = function (id) {
    return `编号：${id}` 
}
// 通过module.exports将appid与bar暴露出去
module.exports = {
    appid , bar
}

----------------------------------------------------

 let utils = require('./utils') // 通过require引入utils
 console.log(utils.appid) // 12345
 console.log(utils.bar(2)) // 编号：2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
exports:

为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。

let exports = module.exports;

！！！ 这里要注意：

不能直接将exports变量指向一个值，因为这样等于切断了exports与module.exports的联系。

let exports = module.exports
let appid = '123456'
// 错误写法
exports = {
    appid
}
// 正确写法
exports.appid = appid
1
2
3
4
5
6
7
8
二、ES6模块规范
不同于CommonJS，ES6使用 export 和 import 来导出、导入模块。

export：

// utils.js
export const appid = '123234'
export function getAppid() {
  return '123456'
}

-------------------------------------------------
// 导出的几种方式：
import { appid , getAppid } from './utils' // 导入多个导出
import * as utils from 'utils' // 作为命名空间导入整个模块
console.log(appid) // 123234
console.log(getAppid ()) // 123456
1
2
3
4
5
6
7
8
9
10
11
12
export default：

使用export default命令，为模块指定默认输出，这里要注意错误的一种写法：

// 错误写法
export default const appid = '123456'
// 正确写法
const appid = '123456'
export default appid

----------------------------------------------------

import utils from './utils' // 导入默认值
console.log(utils) // 123456
1
2
3
4
5
6
7
8
9
10
顺便介绍一下import常用的几种写法：

import { foo, bar } from ‘./utils’ // 导入多个导出
import * as utils from ‘utils’ // 作为命名空间导入整个模块
import utils from ‘utils’ // 导入默认值
import utils , { foo , bar } from ‘./utils’ // 导入多个导出与默认导出
import { foo , bar } , * as utils from ‘utils’ // 导入命名空间整个模块与多个导出
import(’./utils’).then (res) => { // do something} // import动态导入函数，当使用它的时候，会返回一个promise。
let module = await import(’./utils’) // 支持await关键字

三、相关文档
CommonJS规范，http://javascript.ruanyifeng.com/nodejs/module.html
ES6 Module 的语法，http://es6.ruanyifeng.com/#docs/module
Import用法介绍，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

本月开始学习小程序，会总结小程序专栏文章