第6题- module.exports、exports、export三者的区别

面试题目：

module.exports、exports、export 三者的区别是什么？

答案解析：

模块化进程

想要理解三者的区别，需要理解下他们产生的背景。

以前JS本身没有模块化的概念和相关API，开发者一般都是在html中引入多个script标签，业务逻辑复杂时，就会带来很多问题，比方：

1. 全局作用域下容易造成变量冲突
2. 文件只能按照 <script>的书写顺序进行加载
3. 开发人员必需主观处理模块和代码库的依赖关系
4. 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

2009年 Node.js出现，node里面的模块系统遵循的是CommonJS规范

CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)

CommonJS是主要为了JS在后台的体现制定的，是不适合前台的
，所以出现了AMD、CMD、UMD等等一系列可以在浏览器等终端实现的异步加载的模块化方案，我们最熟习的require.js就是AMD的产物，seajs是CMD的产物。

exports和module.exports

1. node中一个文件被认为是一个模块，执行时会给文件内生成exports和module两个对象，module对象内部会创立一个exports属性。
2. 两者间的关系可以认为是 exports = module.exports = {};

内存结构示用意

一个node模块，我们可以认为首行定义了exports和module.exports两个对象：

// module1.jslet a = 2;let add = function () {    a++;}console.log(module.exports); //能打印出结果为：{}console.log(exports); //能打印出结果为：{}// module1.js 可改写为如下代码var exports = module.exports = {};let a = 2;let add = function () {    a++;}console.log(module.exports); //能打印出结果为：{}console.log(exports); //能打印出结果为：{}

既然exports和module.exports两个对象指向同一个对象，require导入的是谁呢？一起看下下面代码

// test.jsmodule.exports = {    a: 100}exports = {    a: 200}// app.jslet test = require('./test');console.log(test); // 打印为 {a : 100}

从上面可知，require导出的内容是module.exports的指向的内存块内容，并不是exports的。

ES6中的模块导出 export

export 是ES6中的导出，与它对应的导入是 import，常见的还有一个export default
下面我们讲讲二者的区别

1. export与export default均可用于导出常量、函数、文件、模块等
2. 在一个文件或者模块中，export、import可以有多个，export default仅有一个
3. 通过export方式导出，在导入时要加{ }，export default则不需要
4. export能直接导出变量表达式，export default不行。

总结

综上可知：

1. export / import： 是ES6中的导入导出。
2. module.exports / exports: 只有 node 支持的导出，二者指向同一个对象。与他们对应的导入是require，模块最终导入的是module.exports对象。

目前的浏览器几乎都不支持 ES6 的模块机制，所以我们要用 Babel 把 ES6 的模块机制转换成 CommonJS 的形式，而后使用 Browserify 或者者 Webpack 这样的打包工具把他们打包起来。达到模块化加载效果相似于 seajs代码

扫一扫 关注我的公众号【前台名狮】，更多精彩内容陪伴你！

【前台名狮】