前端模块化
发展过程
NodeJS之前,前端不存在模块化,后端有模块化。
NodeJS诞生之后,它开始使用CommonJS模块化规范。
特点
一个文件就是一个模块,有自己的作用域,只向外暴漏特定的变量和函数。
目前流行的模块化规范有CommonJs、AMD、CMD、UMD、ESmodule
一览表
webpack支持性
总结
AMD/CMD/CommonJs 是js模块化开发的规范,对应的实现是require.js/sea.js/Node.jsCommonJs 主要针对服务端,AMD/CMD/ES Module主要针对浏览器端,容易混淆的是AMD/CMD。AMD与CMD区别:*AMD是预加载,在并行加载js文件同时,还会解析执行该模块(因为还需要执行,所以在加载某个模块前,这个模块的依赖模块需要先加载完成);而CMD是懒加载,虽然会一开始就并行加载js文件,但是不会执行,而是在需要的时候才执行。优缺点:AMD优点:加载快速,尤其遇到多个大文件,因为并行解析,所以同一时间可以解析多个文件。AMD缺点:并行加载,异步处理,加载顺序不一定,可能会造成一些困扰,甚至为程序埋下大坑。CMD优点:因为只有在使用的时候才会解析执行js文件,因此,每个JS文件的执行顺序在代码中是有体现的,是可控的。执行等待时间会叠加。因为每个文件执行时是同步执行(串行执行),因此时间是所有文件解析执行时间之和,尤其在文件较多较大时,这种缺点尤为明显。
CommonJS 和 ES Module 区别:CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用
如何使用?CommonJs 的话,因为 NodeJS 就是它的实现,所以使用 node 就行,也不用引入其他包。AMD则是通过
附本人GitHub学习demo front-end-module内含有详细demo帮助理解各个模块的区别
如果觉得《前端模块化 CommonJs AMD CMD UMD ESmodule 发展历程与关系》对你有帮助,请点赞、收藏,并留下你的观点哦!