js模块化 --- commonjs规范 原理详解

什么是commonjs规范

        commonjs是一种模块化规范（nodejs的默认模块化规范，新版的nodejs已经支持es6的模块化，但它默认任然使用的是commonjs），通俗的说它将代码分割成了一个一个的模块，让不同的模块拥有自己独立的作用域（类似命名空间的隔断），在不同的模块中实现了重复命名的效果，同时支持模块的导入导出，让模块与模块之间可以相互调用，实现代码的复用。

tips：模块化可以让代码分离开和减少命名冲突问题，便于维护和开发，

模块化的核心：导入导出，作用域隔离

commonjs的导入导出

作为模块，最明显的特征就是支持导入导出，在commonjs中，使用require，module.exports，exports，来导入和导出。

const obj = {name: 'a',desc:'这是a模块'
}module.exports = obj

const obj = {name: 'b',desc: '这是b模块'
}module.exports = obj;

// 导入模块
const a = require('./a')
const b = require('./b')console.log(a)
console.log(b)

以上是a，b，index模块,一个js文件就是一个模块，在a，b模块中各自有一个obj对象导出，这里就实现了模块的命名分割，在不同的模块使用声明同名的变量名。然后在index中导入并使用

可以看到成功的拿到了各自模块中的obj对象。

这就是commonjs的基本使用，接下来分析一下它的模块化原理

commonjs的模块化原理

为什么可以在模块（js文件）中直接使用require，和module.exports,exports进行导入导出？

从用法上看很明显，require是一个函数，它接受一个模块（js文件）路径，返回这个模块的导出的值，而module.export,export是一个对象或者变量，它用来接受值作为模块的导出；也就是说，commonjs使用一个函数进行导入，一个对象或者变量进行导出；

tips：这里分析一下导入和导出的细节，

导入：获取一个模块导出的值

导出：将模块中的值暴露出去（丢给导入） 

        

分析一下， 这个过程和函数的返回调用非常相似，在函数中，

1.你可以返回一个值作为函数的返回值（导出），

2.同时可以调用函数获取到它的返回值（导入），

3.同时在不去调用函数的情况下，外部是没有办法拿到函数内部的东西（隔离），

4.函数可以重复调用（模块也可以重复导入）

在commonjs中，一个模块就是一个js文件，同时，一个模块也是一个函数，到这里可能会有点疑惑，这里我们直接在任意一个模块中打印argument

console.log( arguments)

在js函数中，出来箭头函数外都有一个argument参数，它包含了这个函数调用时传入的参数

可以看到一共有5个参数，这样可以还是不够清晰，在打印一下argument的callee属性

const obj = {name: 'a',desc:'这是a模块'
}module.exports = obj// arguments.callee 函数本身
console.log( arguments.callee.toString())

这下可以明显的看到在a模块的代码全都被放到了一个函数中，这个函数有5个参数exports, require, module, __filename, __dirname，这就是可以直接才模块中直接使用exports, require, module导入导出的原因。

所以在commonjs规范中，所以的js文件都作为模块，而对每一个js文件套上一层函数，是实现模块的原理，在不同的模块（函数）中，由于没有互相调用这个顶层函数，所以互相不能够访问到内部的数据。

到这里可以总结一下commonjs的原理了：

commonjs是通过给每个js文件‘外套’一层函数实现的模块化，即通过参数来导入导出，函数间作用域的隔断，函数的重复调用；但是这种模块化是基于运行时的，也就是说，虽然编译时外套了一层函数，但代码运行的时候才会进行导入导出（这很好理解，每个模块都是函数，调用模块也是在模块内调用的，函数运行了在能执行到导读导出的位置，将导出的值封装再对象中）；

 

以上就是commonjs规范的模块化的原理，下面介绍一下有关commonjs的细节问题

和es6的module模块化规范的区别

这主要从以下几个方面区分：

1.ESmodule，是通过import，export，export default 进行导入导出的

2.ESmodule，是官方的规范，浏览器和node环境下都实现了对它的支持，

3.ESmodule，的模块化是基于编译时，在代码还没有执行时就已经进行了模块的导入导出，输出对应的接口，这是基于底层实现的

上面的第2点中，commonjs只支持在node环境下直接使用，浏览器种需要通过Babel进行转译才能使用，而ESmodule要在浏览器‘type = module’ 的script标签，node环境下，在package.json文件中配置，'type'：'module'字段就可以使用ESmodule的规范（默认是'type':'commonjs'）

 

	ESM	CJS
导入导出	import，export default，export	require，module.export，exports
实现	基于编译时	基于运行时

 

 

 

 

 

 

 有关ESmodule的使用可以参考：js模块(module)和导入，导出（import，export）_js import module-CSDN博客

导出的优先级

使用commonjs规范的导入导出时，明显注意到，导入只有require，而导出可以使用exports，和module.exports;如果同时存在这两个导出，最终会是什么结果呢？

const obj = {name: 'a',desc:'这是a模块'
}// module.exports = obj
exports.desc = obj.desc;
exports.name = obj.name;// arguments.callee 函数本身
// console.log( arguments.callee.toString())

const obj = {name: 'b',desc: '这是b模块'
}module.exports = obj;const a = require('./a')console.log(a); // { name: 'a', desc: '这是a模块' }

a模块使用exports导出，然后在b模块导入a并运行b.js可以看到结果和module.exports的导出方法是一样的，都是将值赋给对象导出；

如果同时存在module.export和exports导出，最终会以module.exports为准，因为在commonjs实现的require函数中，最终返回的是module.exports ,在一个模块中this和export， module.exports的优先级关系（module.exports--->exports，this）

console.log(this,exports,module.exports)this.val = 'this';
exports.val = 'exports';
module.exports = {val:'module.exports'} ;console.log(this,exports,module.exports)

可以看到最开始module.exports，exports， this都是一个空对象（可以去改属性，但是不能去修改这个对象，否则导入会产生问题），因为this和exports是指向的同一个对象，所以，exports的赋值覆盖了this

console.log(this,exports,module.exports)exports.val = 'exports';
this.val = 'this';
module.exports = {val:'module.exports'} ;console.log(this,exports,module.exports)

颠倒一下顺序很容易就能看出来，而module.exports不一样，如果有单独导出值，那么它会以导出的值为准，若没有，则会以this和exports的值为准

大致就是：如果module.exports有值，则返回module.exports，否则，会将this，export的值赋值给module.exports，再返回module.exports；

下面测试一下导入的结果

index.js

exports.val = 'exports';
this.val = 'this';
module.exports = {val:'module.exports'} ;

b.js 

const index = require('./index')console.log(index);

 

 index.js

exports.val = 'exports';
this.val = 'this';
// module.exports = {val:'module.exports'} ;

b.js  

const index = require('./index')console.log(index);

 

可以看到，最终就是区分有没有给module.exports赋值，有的话以module.exports为准，没有的话，吧this，exports（this和exports是同一个对象,this === export）的值赋给module.exports，再以module.exports为准