JavaScript模块化思想之CommonJS、AMD、CMD、UMD

前一篇文章了解了什么是模块，这一篇就简单介绍一下如何定义并加载一个模块。

我所了解的三种模块加载方式分别是CommonJS、AMD和CMD

网上关于这三种模块加载方式讲解的文章不少，我就简单的作个介绍，若是想深刻了解一下能够去网上查阅一下相关的资料。

---

（1）CommonJS

在CommonJS中，一个单独的文件就是一个模块。被调用模块内使用exports暴露接口，调用模块使用require调用暴露出来的接口。

示例以下：

1 // student.js
2 // 私有变量
3 var a = 123;
4 function add(student) {
5     console.log('Add student：' + student);
6 }
7 // exports对象上的方法和变量是外部可访问的
8 exports.add = add;

1 // 使用require加载student.js模块
2 var student = require('./student.js');

CommonJS加载模块是“同步”的，也就是说，若是咱们要调用被调用模块中的公共方法和变量，必定要等被调用模块加载完毕后才能够。用于服务端的NodeJS就采用的CommonJS来管理模块。可是在浏览器端，同步加载会由于收到网络环境的影响存在很大的不肯定性，因此CommonJS不适合于浏览器端。

---

 

若是在浏览器环境下想要从服务器加载模块，就必须使用“异步”的方式。因此就出现了AMD和CMD解决方案。

---

（2）AMD（Asynchromous Module Definition）

requireJS就是一种使用AMD异步加载模块的管理插件。AMD模块支持对象，函数，构造器，字符串，JSON等各类类型的模块。

 

AMD规范使用define方法定义模块：

 1 //define(param1,param2) 经过define方法定义模块
 2 //@param1: 数组，元素为引入的依赖模块
 3 //@param2: 回调函数，经过形参传入依赖
 4 define(['firstModule','secondModule'],function(firstModule,secondModule){
 5      function foo(){
 6            firstModule.test();
 7      }
 8      // 暴露foo()
 9      return {foo:foo};
10 });

同时，AMD容许使用define方法定义模块是兼容CommonJS规范，可使用require和exports。

1 define(function(require,exports,module){
2      var reqModule = require("./firstModule");
3      reqModule.test();
4 
5      exports.pubPort = function(){
6             // 函数体
7      }
8 });

---

 

（3）CMD

CMD和AMD的区别主要体如今对依赖模块的执行时机上，AMD是“依赖前置”。主张提早加载所需模块，CMD是“依赖就近”。也就是能够用到的时候再加载。有点相似于Java中的“饿汉模式”和“懒汉模式”。

从requireJS 2.0开始，也能够延迟加载了。

举个栗子：

 1 // AMD——依赖前置
 2 define(['./a','./b'],function(a,b){
 3     //提早声明要依赖的模块
 4 });
 5 
 6 // CMD
 7 define(function(require,exports,module){
 8     //依赖能够就近写
 9     var a = require('./a');
10     a.test();
11 
12     //软依赖
13     if(status){
14         var b = require('./b');
15         b.test();
16     }
17 });

这里有个名词叫软依赖，我我的理解软依赖就是不必定依赖，硬依赖就是必定会依赖的模块，软依赖就是须要才依赖，不须要就不依赖，根据status判断。

 

---

 

（4）UMD

UMD——Universal Module Definition，通用的模块定义

UMD等于CommonJS加上AMD。UMD的工做其实就是作了一个判断：

    - 先判断当前环境对NodeJs支持的模块是否存在，存在就用Node.js模块模式（exports）。

    - 若是不支持，就判断是否支持AMD（define），存在就使用AMD方式加载。

感受本身对UMD还不是很理解，不知道具体应该怎么去用。仍是继续去了解了解。加油！