JS | CommonJS、AMD、CMD、ES6-Module、UMD五种JS模块化规范

目录

前言

一、CommonJS 模块化规范

二、ES6 模块化规范

三、AMD 模块化规范

四、CMD 模块化规范

五、UMD模块化规范

---

前言

这三个规范都是为Js模块化加载而生的，使模块能够按需加载，使系统同庞杂的代码得到组织和管理。模块化的管理代码使多人开发得到了更好的合作。

一、CommonJS 模块化规范

是一种为JS的表现指定的规范，它希望js可以运行在任何地方，更多的说的是服务端模块规范，Node.js采用了这个规范。

CommonJS主要用于服务器端，‌Node.js是其主要实践者。

核心思想

一个单独文件就是一个模块，通过require方法来同步加载要依赖的模块，然后通过extports或者module.exports来导出需要暴露的接口。

require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;

(1) 每一个文件都是一个模块，每一个模块都有一个独立的作用域，文件内的变量,函数都是私有的，其他文件不可使用（除非赋值到 global上）

(2)每个模块内部，module变量代表当前模块

(3)每个文件对外的接口是 module.exports 属性

(4) require用于引用其他模块，实际获得的是其他模块的module.exports这个属性 

优点：服务器端模块重用，NPM中模块包多，有将近20万个。

缺点：加载模块是同步的，只有加载完成后才能执行后面的操作，也就是当要用到该模块了，现加载现用，不仅加载速度慢，而且还会导致性能、可用性、调试和跨域访问等问题。Node.js主要用于服务器编程，加载的模块文件一般都存在本地硬盘，加载起来比较快，不用考虑异步加载的方式，因此，CommonJS规范比较适用。然而，这并不适合在浏览器环境，同步意味着阻塞加载，浏览器资源是异步加载的，因此，有了AMD CMD解决方案。

实现：服务器端的 Node.js；Browserify，浏览器端的 CommonJS 实现，可以使用 NPM 的模块，但是编译打包后的 文件体积可能很大；modules-webmake，类似Browserify，还不如 Browserify 灵活；wreq，Browserify 的前身；

小结：commonjs模块化规范

CommonJS规范是同步加载模块，也就是说，在执行到require调用的时候，会立即加载并执行模块。这种同步的方式对服务器端不存在问题，因为所有的模块都在本地，可以直接加载。但是对于浏览器端，模块可能需要通过网络加载，这就需要异步加载，因此，在浏览器端，AMD和CMD规范得到了广泛的应用。

以下是CommonJS规范的一个简单示例：

假设我们有两个文件，一个是math.js