前端模块化，AMD和CMD的区别总结

AMD和CMD都是浏览器端的js模块规范，2者的区别总结以下：

一、AMD推崇依赖前置，CMD推崇就近依赖

//AMD： mod.js
define(['dependency1', 'dependency2'], function(require, exports, module){
    //TODO

    module.exports = {};
});

//CMD: mod.js
define(function(require, exports, module) {
    var $ = require('jquery.js')
    
    if(true) {
        let a = require('./a.js');
        //TODO
    }
    
    module.exports = {}
});

这种区别各有优劣，只是语法上的差距，并且requireJS和SeaJS都支持对方的写法

二、执行时机不一样：AMD是加载完当即执行，CMD是延迟执行（两者的最大区别）

当即执行比较好理解，咱们来看CMD的延迟执行。 仍是以上面代码为例

//CMD: mod.js
define(function(require, exports, module) {
    var $ = require('jquery.js')
    
    if(true) {
        let a = require('./a.js');
        //TODO
    } else{
        let b = require('./b.js');
        //TODO
    }
    
    module.exports = {}
});

在执行mod.js前，模块被解析为了字符串，而后经过正则表达式找出了模块中全部的依赖并去一一加载，如例子中的jquery.js、a.js和b.js。可是加载后的依赖并不当即执行，而是当js执行到require语句的时候才被执行。如例子中的juery.js和a.js会按执行顺序依次执行，而b.js由于是在条件控制的else里，因此它永远不会被执行。 须要说明一点的是，CMD这种用正则匹配字符串中依赖的行为会影响性能，这也是被你们诟病的。

三、实现按需加载的方法不一样

两种规范均可以实现按需加载，可是实现的API不一样：

//AMD：
define(function(require, exports, module){
    document.getelementById('app').onclick = function() {
        require(['myModule'], function (my){
            my.printName();
        });
    }
    //TODO
    module.exports = {};
});

//CMD：
define(function(require, exports, module){
    document.getelementById('app').onclick = function() {
        require.async('myModule', function (my){
            my.printName();
        });
    }
    //TODO
    module.exports = {};
});

更多专业前端知识，请上 【猿2048】www.mk2048.com