第6题- module.exports、exports、expo

面试题目：

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.js

let 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.js

module.exports = {
    a: 100
}
exports = {
    a: 200
}

// app.js
let 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代码

---

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

【前端名狮】