前端模組化,AMD和CMD的區別總結
阿新 • • 發佈:2019-09-27
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