js的模块化规范-AMD、CMD、CommonJS模块、ES6模块

js的模块化规范-CMD、AMD、CommonJS模块、ES6模块

提纲
0、模块化的简介
1、前端开发中的模块化
2、AMD
3、CMD
4、CommonJS模块
5、ES6模块

0、模块化的简介

模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一定的分类方式，把问题进行系统性的分解，以便分块处理。

模块化是一种分解代码的方式，可以将一个复杂系统分解为代码结构更合理、可维护性更高的可管理的多个模块。

可以想象一个包含很多代码的巨大系统，被分割成若干个模块，然后，根据模块之间的内在逻辑有机整合成一个整体。这样做对于软件是一种何等意义的存在。

对于软件行业来说，解耦软件系统的复杂性，使得不管多么大的系统，也可以有序管理，使得研发和运行维护变得有章可循，是具有革命性的意义的。

1、前端开发中的模块化

具体到前端开发这个领域中，起初只要在script标签中嵌入几十上百行代码就能实现一个页面所需的交互效果了。

后来js得到重视，应用也广泛起来了。jQuery，Ajax，Node，MVC，MVVM等相继出现，使得前端开发得到更大的重视，也使得前端项目越来越复杂。

然而，JavaScript中却没有有效组织代码的机制，甚至没有类的概念，更不用说模块（module）了。那么，在代码复杂度变大的背景下，各种js的模块化方案也就产生了。

模块是什么呢？
一个模块就是一个实现特定功能的文件。

有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。

但是，模块开发需要遵循一定的规范，否则就都乱套了。

AMD，CMD，CommonJS模块，ES6模块，这四个都是模块化的实现方案。下面按照 ADM -> CMD -> CommonJS模块 -> ES6模块的顺序逐个介绍。

2、AMD

AMD：Asynchronous Module Definition, 异步模块定义。

它是一个在浏览器端JS的模块化开发的规范，实现这个规范的JS库是RequireJS。

它的作者James Burke。实际上，AMD 是 RequireJS 在推广过程中对它自己的模块规范进行提炼得来的。

3、CMD

阿里巴巴公司的一个前端程序员玉伯写了一个js库——seajs，在这个js库中使用一个新的模块化规范，那就是CMD规范。

AMD和CMD的区别：

区别1：
对于依赖的模块，AMD 是提前执行，CMD 是延迟执行，不过 RequireJS 从 2.0 开始，AMD也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible。
区别2：
AMD 推崇依赖前置
CMD 推崇依赖就近
概括区别
AMD 依赖于 requirejs，是异步加载的，是提前加载，立即加载

CMD 依赖于 seajs，是异步加载，延后加载，就近加载，用时加载

4、CommonJS模块

CommonJS是JavaScript语言的一部分规范。
JS的标准规范是ECMAScript，但是它只指定了CoreJavaScript，就是只有js的语法和语言特性的标准，却没有对JS应该有的API进行标准化规定。
所以，CommonJS规范诞生了，它试图定义一套普通应用程序使用的API，从而填补 JavaScript 标准库过于简单的不足。

CommonJS是一种规范，NodeJS是这种规范的实现。说白了，commonJS规范是node这个软件中使用的规范。

CommonJS 规范包括的内容很多，具体有：

模块（modules）
包（packages）
系统（system）、
二进制（binary）
控制台（console）
编码（encodings）
文件系统（filesystems）
套接字（sockets）
单元测试（unit testing）
等部分，CommonsJS对以上的几个部分都做出标准的规定。

这里要讨论的是 CommonJS中的一个标准规范，也就是CommonJS的模块标准。

CommonJS模块标准在Node中被使用，Node使用的模块标准就是CommonJS。这是我们应该关注的重点，以上的AMD、CMD了解即可。

上面是对CommonJS模块的说明，通过这个说明，就可以清楚地知道CommonJS模块的基本情况。下面，介绍一下node中如何制作一个符合CommonJS模块规范的模块，也就是看看CommonJS如何规定一个模块的。

定义模块
根据CommonJS规范，一个单独的文件就是一个模块。
每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。
模块输出
模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象。
加载模块
想要使用一个模块的时候，如何使用呢？使用之前，首先要加载模块，加载使用require方法。
该方法读取一个文件并执行，返回文件内部的module.exports对象。

5、ES6模块

ES6标准中引入了自己的模块化规范。前三者都是民间定义的，说白了，就是requireJS、sea.js和node这三个软件分别使用的模块化规范。而ES6模块规范是国际标准组织ECMA定义的ECMAScript规范中的模块化部分。

ES6是ES2015的简称，一般通过export来暴露模块，import来导入模块。

ES6中的模块系统，会统一整个前端开发的模块加载规则。但是对于Node中惯用的commonjs规范全部转ES6模块规范，可能还需要一段时间。虽然有这样的库可以支持，但是对于之前写的流行库，与框架还没修改过来。

浏览器是支持es6模块化规范，但是目前前端一般用node做开发，模块使用commonjs，这样要让cjs的代码能够在浏览器里执行，必须先将cjs转成es6，那么这个任务就是用grunt/gulp/webpack/rollup/vite/snowpack等打包工具来实现。webpack可以将源代码中的cjs转成es6的代码来给浏览器执行。

现在的前端离不开vue,react等现代框架，还用到ES6等模块化语法，这些模块化的语法是不能在浏览器环境中运行的，所以我们需要这些将这些互相依赖的文件进行编译打包（其实就是转换、统一到浏览器能够执行的格式），编译成浏览器能够运行的代码。这个编译转换过程被称为打包，一般的打包工具有很多，常用的是webpack。

参考资料：

1、[requireJS]学习笔记：了解CMD、AMD、CommonJS，https://www.jianshu.com/p/7fcaa4a75ac1

2、ECMAScript6面试考点之CommonJS模块和ES6模块的区别，https://www.jianshu.com/p/d69676cacec6

3、Javascript模块规范，https://www.cnblogs.com/gaoxue/p/4329623.html

4、详解JavaScript模块化开发，https://mp.weixin.qq.com/s?src=3&timestamp=1632382447&ver=1&signature=AK52qFjJE6YewqJhsrRFs-1ThkJoDRsOS2jMECys9hPb66nLMIFoxmw3rMcwRdEKZYNIYfqprHKIfXNQL85c6200Qno6ukAdsgfRTFFiO2NYtFDQ071k-g8ge91wlYme73leQIRfs0OsZKCXk0ZBRNgQ5-p8ytmaQ-ZXg4gBf*U=