CommonJS模块化规范基础知识随笔
作者:互联网
JavaScript并没有与生俱来的模块化概念和功能。
就和人一样,诞生之初我们并不能事先决定好自己可以“自带”哪些天赋,但生长过程中,当我们发现自己需要或者期待某种能力时,我们可以后天习得。
上面的描述恰好适合【JavaScript与“模块化”】
首先,我们先来聊一聊CommonJS。
CommonJS起始于Node.js的模块化实现,对前端领域也产生了深刻的影响。
在CommonJS中,每个文件就是一个独立的模块,文件里面的内容(变量、函数等)都是私有的、拥有独立作用域、对外不可见的。
对于每个模块,我们都有两个变量可以使用,分别是:require 和 module
1. require(函数)
用于加载某个模块,加载到的具体值就是module.exports返回的对象、函数、变量(如果没有合理的返回值将会报错)。
另外,需要注意的是:
- 在CommonJS中require的是相关模块返回值的拷贝,即原有被导入模块与该require进来的拷贝是互相独立、互不干扰的;
- require函数的执行是同步的(ESM中的import是异步的);
- 已被加载过的模块会被缓存;
2. module(module.exports/exports)
module代表了当前模块,module上有一个exports属性,它会向外导出需要对外暴露的结果。
同时在相应的独立模块中,会有一个私有的exports变量,默认指向module.exports属性,我们可以将exports理解为一个向外导出的对象。
示例:
// test1.js var a = 1; module.exports = { a, };
// run1.js const obj = require('.test1'); console.log(obj); // { a: 1 }
// test2.js let a = 1; exports.a = a;
// run2.js const obj = require('.test2'); console.log(obj); // { a: 1 }
// test3.js let a = 1; module.exports = () => { exports.a = a; return { ...exports, b: 0, }; };
// run3.js const fn = require('./test'); console.log(fn()); // { a: 1, b: 0 }
// 20220311
标签:CommonJS,模块化,require,exports,module,基础知识,模块,js 来源: https://www.cnblogs.com/fanqshun/p/15992975.html