文章目录

• 诞生
• 使用

诞生

在commonJS的模块规范没出来之前，js文件的引入只能通过<script>标签进行引入，会有什么问题呢？

1. 项目变大，意味脚本变多，需要手动管理<script>标签的引入加载顺序来保证项目正常运行。
2. 不同脚本之间的调用，需要通过全局变量的方式，容易出现全局变量相互覆盖的问题。
3. node端没有html。

commonJS的模块规范的出现解决了上述的问题，而且后续影响到了浏览器端的js，还有其他技术栈，例如webpack，都加入了commonJS的模块规。

使用

function a(n) {
  console.dir("a" + n);
}
function b(n) {
  console.dir("b" + n);
}
function c(n) {
  console.dir("c" + n);
}
module.exports = {
	a,
	b,
	c
}

// 在其他文件内这样引入
var utils = require('./a.js')
utils.a()

exports默认是个导出对象，被导入后是个引用对象，所以在引用文件中修改，被引用文件也能同步更新。

a.js:

exports.a = { 'a': 'a' }

exports.b = function () {
    console.log('b')
}

b.js：

var obj = require('./learnNode.js') // 引入
console.log(obj.a) // 使用

当然exports也可以改为其他类型：

a.js:

exports.a = { 'a': 'a' }

exports.b = function () {
    console.log('b')
}

module.exports = function () {
  console.log('我叛变了');
}

b.js：

var obj = require('./learnNode.js') // 引入
console.log(obj) 

此时打印出的exports为一个函数，也就是被改变了。但会出现一个怪异现象，如果后获取exports，拿到的并不是改写后的exports，然是之前定义的。可以用定时器实验一下。

a.js:

exports.a = { 'a': 'a' }

exports.b = function () {
    console.log('b')
}

module.exports = function () {
  console.log('我叛变了');
}

setTimeout(() => {
  console.log(exports) // 打出{ a: { a: 'a' }, b: [Function] }
}, 1000)

原理可以通过webpack打包编译后的js文件查看，具体可以看对应极客时间教程09课。