文章目录
诞生
在commonJS的模块规范没出来之前,js文件的引入只能通过<script>
标签进行引入,会有什么问题呢?
- 项目变大,意味脚本变多,需要手动管理
<script>
标签的引入加载顺序来保证项目正常运行。 - 不同脚本之间的调用,需要通过全局变量的方式,容易出现全局变量相互覆盖的问题。
- 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课。