谈谈JS的那些文件模块系统

学习ES6和Webpack过程中，研究了一下CommonJS，AMD， CMD， ES6这些模块系统到底有什么区别。

先提结论：

• 相同点是，所有的文件模块系统，都采用单例模式。
• 模块加载方面：CJS采用同步阻塞机制，而AMD采用异步回调机制，CMD可通过调用不同的require方法，采用不同的机制。
• 模块执行方面：CJS，AMD都采用预先执行，在引用模块的同时执行模块代码；CMD则采用延迟执行，只有当模块中的变量或方法真正被执行时， 模块代码才被执行。
• 个人觉得服务器端使用CJS和CMD都可以，但比较偏爱CJS简洁的语法。浏览器端从性能方面考虑还是比较推荐使用AMD，尽量避免在代码运行过程中去做资源请求。
• 特别推荐使用webpack模块打包工具配上ES6的模块文件系统语法，在本地进行模块编译后上线。

正文：

JS本来是没有模块的语言，随着页面交互越来越复杂，为了避免全局变量泛滥以及方便多人合作开发等，我们开始运用对象，模拟类，闭包等来实现模块的效果，例如：

• 用对象将方法和变量封装起来。

var module1 = {
　　_count : 0,
　　m1 : function (){
　　　　//...
　　},
　　m2 : function (){
　　　　//...
　　}
};

• 用闭包封装方法，可得到外部无法读取的私有变量

var module1 = (function(){
　　var _count = 0;
　　var m1 = function(){
　　　　//...
　　};
　　var m2 = function(){
　　　　//...
　　};
　　return {
　　　　m1 : m1,
　　　　m2 : m2
　　};
})();

• 沙箱模式，声明模块依赖

Sandbox.modules = {};
Sandbox.modules.dom = function(box) {
    box.getElement = function() {};
    box.getStyle = function() {console.log('getStyle')};
    box.foo = 'bar';
};
new Sandbox(['dom', 'ajax'], function(box) {     //声明依赖
    box.getElement();
})

思路：1. 将全局属性方法的初始化函数放在Sandbox构造函数的属性modules中；2. 在构造函数内部获取所需的属性，赋值给this； 3. 运行callback(this)。具体实现代码可在这篇文章里搜‘沙箱模式’查看。

虽然模块化编程能较好的帮助我们处理单个文件内的代码结构。但随着单页面应用的出现，单个js文件已经无法满足复杂交互的要求了。
而单纯依赖html