什么是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为准