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

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

技术杂谈小彩虹2021-08-21 20:19:02180A+A-

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 = {};
});

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们