前端模塊化，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