之前公司开发的某个大数据产品，所有的功能都集中在了一个页面里面，久而久之就造成了页面加载卡顿大大影响了体验效果；后来引用了RequireJS来进行模块化的开发来解决这个问题；不管从前后端未分离的RequireJS还是使用Node开发的CommonJS,模块化开发无处不在，模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露它的接口。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。那么在众多模块化开发方案当中我们应该使用哪种方案？
原始方法
<script>标签
这是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在window对象中，不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口。
这种原始的加载方式暴露了一些显而易见的弊端：
全局作用域下容易造成变量冲突
文件只能按照<script>的书写顺序进行加载
开发人员必须主观解决模块和代码库的依赖关系
在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪
一、CommonJS
我们在使用Node开发程序的时候，这个程序由很多个模块组成，每一个模块都是一个文件（一个单独的作用域）。Node模块采用的就是CommonJS规范，该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块，然后通过 module.exports 来导出需要暴露的接口。
CommonJS是服务端的JS规范，上面提到了每个文件都是一个作用域，在该模块内部定义的变量其他模块没有办法读取的到，除非定义为global对象的属性，
输出模块： 每个模块只有一个出口， module.export对象，我们把想要输出的模块放入里面；
加载模块： 加载一个模块的时候我们采用require方法，这个方法会读取一个文件并返回文件内部的module.export对象；
CommonJS模块的特点如下。
1、所有代码都运行在模块作用域，不会污染全局作用域。
2、模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
3、NMP中已经有将近20万个可以使用模块包
缺点：
1、同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，
2、浏览器资源是异步加载的不能非阻塞的并行加载多个模块
CommonJs所加载的模块一般都已经存在本地的硬盘里面，当我们执行某个文件的时候会一同加载文件里面require所引入的文件，加载起来非常快，不要考虑异步加载的方式。 但是这个只是在于服务器端，如果是浏览器端，要从服务器加载模块就必须采用异步的方式，于是乎就有了AMD CMD的解决方案；
二、AMD
Asynchronous Module Definition( 异步模块定义)。它是一个在浏览器端模块化开发的规范。它不是javascript原生支持，所以使用AMD规范进行页面开发需要用到对应的库，也就是RequireJS，AMD其实是RequireJS在推广的过程中对模块定义的范围化的产出。
它的实现方案是：先定义所有依赖，然后在加载完成后的回调函数中执行。
AMD是预加载, 只有一个接口：define(id?,dependencies?,factory); 它要在声明模块的时候制定所有的依赖(dep)，并且还要当做形参传到factory中，注意的是这些依赖文件并没有书写顺序的区别；
但是开始就把所有依赖写出来是不符合书写的逻辑顺序的，能不能像commonJS那样用的时候再require，而且还支持异步加载后再执行呢？
优点：
适合在浏览器环境中异步加载模块
可以并行加载多个模块
缺点：
提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不顺畅
不符合通用的模块化思维方式，是一种妥协的实现
三、CMD
CMD是另一种js模块化方案，它与AMD很类似，不同点在于：AMD 推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行。
Common Module Definition(CMD), 是seajs推崇的规范，CMD则是依赖就近，用的时候再require。CMD 推崇 as lazy as possible（尽可能的懒加载，也称为延迟加载，即在需要的时候才加载）。
AMD 和 CMD 的书写区别：
AMD依赖前置，在定义模块时就声明其所要依赖的模块
CMD是按需加载依赖，在用到那个模块再去require
AMD在使用前就准备好，CMD是用到了再去准备模块
优点：
1、依赖就近，延迟执行
2、可以很容易在 Node.js 中运行
缺点：依赖 SPM 打包，模块的加载逻辑偏重
现在我们再来说说ES6标准的模块化：
ES6静态加载的设计思想，使得在编译时就可以确定模块的依赖关系，以及输入、输出的变量。ES6则在语言层面上实现了模块化，取代CommonJS、AMD、CMD成为服务端和浏览器端通用的模块解决方案。（CommonJS、AMD、CMD运行时确定依赖关系）
ES6模块和CommonJS的区别
CommonJS模块输出是值的拷贝，ES6模块输出是值的引用（引用时可能修改到模块的值）
CommonJS是运行时加载，ES6模块是编译时加载
ES6 Module是ES6中规定的模块体系，相比上面提到的规范， ES6 Module有更多的优势，ES6模块化的特点：
静态加载，编译时确定依赖关系
1、自动运行于严格模式之下
2、export关键字导出
3、import关键字导入
4、同步、异步加载均可
CommonJS与ES6 Module的区别：
1、CommonJS模块是运行时加载，ES6 Module是编译时输出接口
2、CommonJS加载的是整个模块，将所有的接口全部加载进来，ES6 Module可以单独加载其中的某个接口；
3、CommonJS输出是值的拷贝，ES6 Module输出的是值的引用，被输出模块的内部的改变会影响引用的改变；
4、CommonJS this指向当前模块，ES6 Module this指向undefined;
优点：
容易进行静态分析
面向未来的 EcmaScript 标准
缺点：
原生浏览器端还没有实现该标准
全新的命令字，新版的 Node.js才支持
目前浏览器对ES6 Module兼容还不太好，我们平时在webpack中使用的export/import，会经过babel转换为CommonJS规范。
具体可以参考：潜入理解ES６－模块化
时光机-《说说require 和 import 的区别》
