1. 程式人生 > >前端模組化,AMD和CMD的區別總結

前端模組化,AMD和CMD的區別總結

AMD和CMD都是瀏覽器端的js模組規範,2者的區別總結如下:

1、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都支援對方的寫法

2、執行時機不同: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這種用正則匹配字串中依賴的行為會影響效能,這也是被大家詬病的。

3、實現按需載入的方法不同

兩種規範都可以實現按需載入,但是實現的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 = {};
});

更多專業前端知識,請上 【猿204