前端模块化AMD、CMD、CommonJS

知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs.

知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏览器端,所以最容易混淆的是AMD/CMD。(顺便提一下,针对服务器端和针对浏览器端有什么本质的区别呢?服务器端一般采用同步加载文件,也就是说需要某个模块,服务器端便停下来,等待它加载再执行。而浏览器端要保证效率,需要采用异步加载,这就需要一个预处理,提前将所需要的模块文件并行加载好。)

知识点3 : AMD/CMD区别,虽然都是并行加载js文件,但还是有所区别,AMD是预加载,在并行加载js文件同时,还会解析执行该模块(因为还需要执行,所以在加载某个模块前,这个模块的依赖模块需要先加载完成);而CMD是懒加载,虽然会一开始就并行加载js文件,但是不会执行,而是在需要的时候才执行。

知识点4:AMD/CMD的优缺点.一个的优点就是另一个的缺点, 可以对照浏览。
AMD优点:加载快速,尤其遇到多个大文件,因为并行解析,所以同一时间可以解析多个文件。
AMD缺点:并行加载,异步处理,加载顺序不一定,可能会造成一些困扰,甚至为程序埋下大坑。
CMD优点:因为只有在使用的时候才会解析执行js文件,因此,每个JS文件的执行顺序在代码中是有体现的,是可控的。
CMD缺点:执行等待时间会叠加。因为每个文件执行时是同步执行(串行执行),因此时间是所有文件解析执行时间之和,尤其在文件较多较大时,这种缺点尤为明显。

知识点5:如何使用?CommonJs的话,因为nodeJs就是它的实现,所以使用node就行,也不用引入其他包。AMD则是通过<script>标签引入RequireJs。CMD则是引入SeaJs。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript模块指的是将代码分割成可重用的、独立的模块,以便提高代码的可维护性、可重用性和可扩展性。模块前端开发中扮演着非常重要的角色。 CMDAMD是两种常用的JavaScript模块规范,它们都允许模块编程,但它们的实现方式略有不同。 1. CMD(Common Module Definition) CMD是一种JavaScript模块规范,它是由阿里前端开发玉伯提出的。CMD规范的实现工具有Sea.js、RequireJS等。CMD规范的特点是延迟执行,即模块在require时才会执行,不会立即执行。其语法如下: ```javascript define(function(require, exports, module) { // 模块代码 }); ``` 2. AMD(Asynchronous Module Definition) AMD也是一种JavaScript模块规范,它是由Dojo的前端开发者提出的。AMD规范的实现工具有RequireJS等。AMD规范的特点是提前执行,即模块在define时就会执行,而不是等到require时才执行。其语法如下: ```javascript define(['module1', 'module2'], function(module1, module2) { // 模块代码 }); ``` 3. UMD(Universal Module Definition) UMD是一种通用模块定义规范,它可以在AMDCommonJS规范之间进行切换,适用于多种JavaScript环境。其语法如下: ```javascript (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof exports === 'object' && typeof module === 'object') { // CommonJS module.exports = factory(require('jquery')); } else { // Browser globals root.returnExports = factory(root.jQuery); } }(this, function ($) { // 模块代码 })); ``` 以上三种模块规范都有其各自的优缺点,选择适合自己的规范进行开发即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值