模块化是前端工程化进程中迈不过的坎儿,而js这门语言本身没有提供模块化的方法,所有后来就出现了各种规范来实现。如果对js有所了解,那么一定对CommonJS或AMD ,甚至是CMD这些并不陌生,下面就来整理一下。

CommonJS

CommonJS就是为JS的表现来制定规范,因为js没有模块的功能所以CommonJS应运而生,它希望js可以在任何地方运行,不只是在浏览器。

CommonJS的影响力绝对离不开Node的火爆。它们究竟有什么关系,与浏览器和web标准什么关系,下面是一张网上的示意图:

commonjs与node关系

CommonJS定义的模块分为:模块引用(require),模块定义(export)和模块标识(module)

require()用来引入定义的模块;exports对象用于导出当前模块的方法或者变量,唯一的导出出口;module对象代表模块本身。

下面是一段CommonJS规范实例:

    //sum.js
    exports.sum = function () {
        //做加操作;
    };
    //calculate.js
    var math = require('sum');
    exports.add = function (n) {
        return math.sum(val, n);
    };

Node在遵循CommonJS的规范上也做出了一些取舍

AMD

CommonJS主要为了JS后端的表现定制的,他不适合前端的。

以下是浏览器端js和服务器端js所做的事情:

enter image description here

这时,AMD(异步模块)出现了,它主要为前端js的表现制定规范。

AMD就只有一个接口define();

它在声明模块的时候制定所有的依赖,还要当做形参传到factory中。如果没有依赖就可以直接定义模块。

 define(['dep1','dep2'],function(dep1,dep2){...});
define(function(){
    var exports = {};
     exports.method = function(){...};
     return exports;
 });
Node实现中并没有出现define关键字,是因为Node隐式包装了。

RequireJS就是实现了AMD规范。

CMD

与AMD相似,玉伯写了sea.js就是基于CMD规范的。