解答并整理一下自己对于模块化一直以来不够清楚的地方
梳理一下概念
- 模块化是一种将复杂程序拆分为可按需导入的单独模块的机制,它广泛存在于各种程序设计语言中
- 我们所使用的JS的模块化方案,就是对模块化机制的实现。早期的JS程序只负责处理简单的页面交互,并不庞大,因此没有设计好的模块化方案。但随着JS程序越发庞大,需求推动之下,一些JS库或个人设计了自己的模块化方案,就有了现在的CommonJS,AMD,CMD
- ES-Module是后来者,它的目标是为JS提供一个官方标准的Module实现
- 上面提到的都是解决方案,是一种设计,具体谁(某个框架或库)使用哪个解决方案,还是看框架设计者的选择。如经常提到CommonJS,总是和NodeJS联系在一起,好像两者密不可分,但实际上,CommonJS并不是NodeJS设计的,而且如今的NodeJS也提供了对于ES-Module的支持
区分module.exports 与 exports
NodeJS文档里做了详细的说明
简单来说:exports是一个独立的变量,只是引用了module.exports,用以简化写法。
- 了解两者本质之后,就能理解两者的差异了。在不重新赋值的情况下,module.exports 与 exports 指向的是同一个对象,因此表现一致。如
module.exports.a = 1
可以简写为exports.a = 1
- 当赋值时,两者便有了差异:
// a.js
exports = 1;
//b.js
module.exports = 1;
// c.js
const a = require('./a');
const b = require('./b');
console.log(a); // => {}
console.log(b); // => 1
这样的结果是因为require()
只会返回module.exports
的值,而对于a.js来说它只是改变了exports
这个变量的指向,并不能影响到module.exports
,因此返回的仍然是空对象