AMD-CMD-CommonJS 水深无声 2022-03-02 10:52 376阅读 0赞 **AMD**和**CMD**都是为了解决**浏览器端模块化**问题而产生的 > 1、**AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块** > 2、**CMD推崇就近依赖，只有在用到某个模块的时候再去require** **AMD和CMD最大的区别是对依赖模块的执行时机处理不同** ## CommonJS： ## nodejs正是一个commonJs规范的实现，在node里正是采用require的方式进行包的引入。至于定义以及原理，这里不继续说明了。只需要满足commonJs规范，就能使用通用的方式进行包的引入。这里主要涉及到的几个变量是module,export,global,require，简单理解就是，将变量绑定到module.exports上，就能实现不同文件之间的引用。 ## AMD： ## AMD规范对应的库函数有 **Require.js。**但是commonJs的加载规则是同步加载，这也就意味着，如果在页面上有很多包加载，则必须等待所有包加载完毕以后才能开始渲染页面，此时会导致页面卡死的现象。为了解决这个问题，人们提出了Asynchronous Module Definition，这个规范则是规定了异步加载的包引入和定义方法。 ## CMD： ## CMD规范是在国内发展起来的，对应的库函数有**Sea.js。**虽然AMD是异步加载依赖包的，但是AMD会在一开始就把所有的依赖包加载进来，然后在执行后续的代码。如果依赖包过大，则刚开始的时候页面就可能出现卡死现象。为了改善这一现象，CMD出现了。CMD对包的加载过程是按需加载，会在用到相应的包的时候进行加载，这样就保证了页面能够更快地进入可用状态。但是这样也会带来一些负面作用，比如使用过程中出错回滚，包之间的依赖处理等问题。 ## UMD ## UMD是AMD和CommonJS的糅合 AMD模块以浏览器第一的原则发展，异步加载模块。 CommonJS模块以服务器第一原则发展，选择同步加载，它的模块无需包装(unwrapped modules)。 这迫使人们又想出另一个更通用的模式UMD （Universal Module Definition）。希望解决跨平台的解决方案。 UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。 在判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。 (function (window, factory) { if (typeof exports === 'object') { module.exports = factory(); } else if (typeof define === 'function' && define.amd) { define(factory); } else { window.eventUtil = factory(); } })(this, function () { // module ... }); ## 区别： ## AMD和CMD对依赖模块的执行时机不同！对依赖模块的执行时机取决于他们的模块定义方式，AMD推崇依赖前置，因此，JS可以及其轻巧地知道某个模块依赖的模块是哪一个，因此可以立即加载那个模块；而CMD是就近依赖，它要等到所有的模块变为字符串，解析一遍之后才知道他们之间的依赖关系 > AMD加载完模块后，就立马执行该模块；CMD加载完某个模块后没有立即执行而是等到遇到require语句的时再执行。 -------------------- > **每个模块的都需要发出一次http请求，浪费资源，这也是为什么开发时分模块写代码，上线时要把所有模块合并在一起的原因。目的就是为了减少http请求数量，提高页面性能。** -------------------- 相关文章：[esModule与CommonJS(Node)][esModule_CommonJS_Node] 参考文章：[https://www.jianshu.com/p/bd4585b737d7][https_www.jianshu.com_p_bd4585b737d7] [esModule_CommonJS_Node]: https://blog.csdn.net/qq_36157085/article/details/100035966 [https_www.jianshu.com_p_bd4585b737d7]: https://www.jianshu.com/p/bd4585b737d7
还没有评论，来说两句吧...