common这个英文单词的意思，相信大家都认识，我记得有一个词组common knowledge是常识的意思，那么commonjs是不是也是类似于常识性的，大家都理解的意思呢？很明显不是，这个常识一点都不常识。我最初认为commonjs是一个开源的js库，就是那种非常方便用的库，里面都是一些常用的前端方法，然而我错得离谱，commonjs不仅不是一个库，还是一个看不见摸不着的东西，他只是一个规范！就像校纪校规一样，用来规范js编程，束缚住前端们。就和promise一样是一个规范，虽然有许多实现这些规范的开源库，但是这个规范也是可以依靠我们的js能力实现的。
那么commonjs规范了些什么呢？要解释这个规范，就要从js的特性说起了。js是一种直译式脚本语言，也就是一边编译一边运行，所以没有模块的概念。因此commonjs是为了完善js在这方面的缺失而存在的一种规范。
commonjs定义了两个主要概念：
我要评论require函数，用于导入模块module.exports变量，用于导出模块然而这两个关键字，浏览器都不支持，所以我认为这是为什么浏览器不支持commonjs的原因。如果一定腰在浏览器上使用commonjs，那么就需要一些编译库，比如来帮助哦我们将commonjs编译成浏览器支持的语法，其实就是实现require和exports。
那么commonjs可以用于那些方面呢？虽然commonjs不能再浏览器中直接使用，但是nodejs可以基于commonjs规范而实现的，亲儿子的感觉。在nodejs中我们就可以直接使用require和exports这两个关键词来实现模块的导入和导出。
require导入，代码很简单，let {count,addcount}=require("./utils")就可以了。那么在导入的时候发生了些什么呢？？首先肯定是解析路径，系统给我们解析出一个绝对路径，我们写的相对对路径是给我们看的，绝对路径是给系统看的，毕竟绝对路径辣么长，看着很费力，尤其是当我们的的项目在n个文件夹之下的时候。所以require第一件事就是解析路径。我们可以写的很简洁，只需要写出相对路径和文件名即可，连后缀都可以省略，让require帮我们去匹配去寻找。也就是说require的第一步是解析路径获取到模块内容：
fs，就直接返回模块/,./等等，则拼接出一个绝对路径，然后先读取缓存require.cache再读取文件。如果没有加后缀，则自动加后缀然后一一识别。
.js 解析为javascript 文本文件.json解析json对象.node解析为二进制插件模块require.cache之中，所以多次加载require，得到的对象是同一个。(function(exports, require, module, __filename, __dirname) {
// 模块的代码实际上在这里
});
module说完了require做了些什么事，那么require触发的module做了些什么呢？我们看看用法，先写一个简单的导出模块，写好了模块之后，只需要把需要导出的参数，加入module.exports就可以了。
let count=0
function addcount(){
count++
}
module.exports={count,addcount}
然后根据require执行代码时需要加上的，那么实际上我们的代码长成这样：
(function(exports, require, module, __filename, __dirname) {
let count=0
function addcount(){
count++
}
module.exports={count,addcount}
});
require的时候究竟module发生了什么，我们可以在vscode打断点：
根据这个断点，我们可以整理出：
黄色圈出来的时require，也就是我们调用的方法
红色圈出来的时module的工作内容
module._compile module.extesions..js module.load trymouduleload module._load module.runmain
蓝色圈出来的是nodejs干的事，也就是nativemodule，用于执行module对象的。
我们都知道在js中，函数的调用时栈stack的方式，也就是先近后出，也就是说require这个函数触发之后，图中的运行时从下到上运行的。也就是蓝色框最先运行。我把他的部分代码扒出来，研究研究。
nativemodule原生代码关键代码，这一块用于封装模块的。
nativemodule.wrap = function(script) {
return nativemodule.wrapper[0] + script + nativemodule.wrapper[1];
};
nativemodule.wrapper = [
'(function (exports, require, module, __filename, __dirname) { ',
'\n});'
];
等nativemodule触发module.runmain之后，我们的模块加载开始了，我们按照从下至上的顺序来解读吧。
module._load，就是新建一个module对象，然后将这个新对象放入module缓存之中。var module = new module(filename, parent); module._cache[filename] = module;trymouduleload，然后就是新建的module对象开始解析导入的模块内容module.load(filename);module对象继承了module.load，这个方法就是解析文件的类型，然后分门别类地执行module.extesions..js这就干了两件事，读取文件，然后准备编译module._compile终于到了编译的环节，那么js怎么运行文本？将文本变成可执行对象,js有3种方法：
eval("console.log('aaa')")let str="console.log(a)" new function("aaa",str)node执行字符串，我们用高级的
let vm=require("vm") let a='console.log("a")' vm.runinthiscontext(a)
这里module用vm的方式编译，首先是封装一下，然后再执行，最后返回给require，我们就可以获得执行的结果了。
var wrapper = module.wrap(content);
var compiledwrapper = vm.runinthiscontext(wrapper, {
filename: filename,
lineoffset: 0,
displayerrors: true
});因为所有的模块都是封装之后再执行的，也就说导入的这个模块，我们只能根据module.exports这一个对外接口来访问内容。
这些代码看的人真的很晕，其实主要流程就是require之后解析路径，然后触发module这一个类，然后module的_load的方法就是在当前模块中创建一个新module的缓存，以保证下一次再require的时候可以直接返回而不用再次执行。然后就是这个新module的load方法载入并通过vm执行代码返回对象给require。
正因为是这样编译运行之后赋值给的缓存，所以如果export的值是一个参数，而不是函数，那么如果当前参数的数值改变并不会引起export的改变，因为这个赋予export的参数是静态的，并不会引起二次运行。
commonjs因为关键字的局限性，因此大多用于服务器端。而es6的模块加载，已经有浏览器支持了这个特性，因此es6可以用于浏览器，如果遇到不支持es6语法的浏览器，可以选择转译成es5。
es6也是一种javascript的规范，它和commonjs模块的区别，显而易见，首先代码就不一样，es6的导入导出很直观import和export。
| commonjs | es6 | |
|---|---|---|
| 支持的关键字 | arguments,require,module,exports,__filename,__dirname |
import,export |
| 导入 | const path=require("path") |
import path from "path" |
| 导出 | module.exports = app; |
export default app |
| 导入的对象 | 随意修改 | 不能随意修改 |
| 导入次数 | 可以随意require，但是除了第一次，之后都是从模块缓存中取得 |
在头部导入 |
** 大家注意了！划重点！nodejs是commonjs的亲儿子，所以有些es6的特性并不支持，比如es6对于模块的关键字import和export，如果大家在nodejs环境下运行，就等着大红的报错吧~**
除了语法上的差异，他们引用的模块性质是不一样的。虽然都是模块，但是这模块的结构差异很大。
在es6中，如果大家想要在浏览器中测试，可以用以下代码：
//utils.js const x = 1; export default x
<script type="module">
import x from './utils.js';
console.log(x);
export default x
</script>
首先要给script一个type="module"表明这里面是es6的模块，而且这个标签默认是异步加载，也就是页面全部加载完成之后再执行，没有这个标签的话代码不然无法运行哦。然后就可以直接写import和export了。
es6模块导入的几个问题：
x已经导入了，就不能再从utils中导入ximport中执行。count我就不能修改他的值，因为这个是导入进来的，想要修改只能在count所在的模块修改。但是如果count是一个对象，那么可以改变对象的属性，比如count.one=1，但是不可以count={one:1}。大家可以看这个例子，我写了一个改变object值的小测试，大家会发现utils.js中的count初始值应该是0，但是运行了addcount所以count的值动态变化了，因此count的值变成了2。
let count=0
function addcount(){
count=count+2
}
export {count,addcount}
<script type="module">
import {count,addcount} from './utils.js';
//count=4//不可修改，会报错
addcount()
console.log(count);
</script>
与之对比的是commonjs的模块引用，他的特性是：
如果想要深入研究，大家可以参考下阮老师的。
commonjs模块只能运行再支持此规范的环境之中，nodejs是基于commonjs规范开发的，因此可以很完美地运行commonjs模块，然后nodejs不支持es6的模块规范，所以nodejs的服务器开发大家一般使用commonjs规范来写。
commonjs模块导入用require，导出用module.exports。导出的对象需注意，如果是静态值，而且非常量，后期可能会有所改动的，请使用函数动态获取，否则无法获取修改值。导入的参数，是可以随意改动的，所以大家使用时要小心。
如对本文有疑问， 点击进行留言回复！！
微信小程序wx.scanCode扫描条形码，偶尔出现条形码不正确导致查询失败
Android 入门第七讲01-数据存储（数据存储概述，文件存储（raw和asserts目录读写，data/data/包名目录读写，sdcard目录读写），SharedPreferences读写）
vue-axios系列:axios拦截器，配置请求头，配置请求参数
网友评论