More than code
Welcome to the website

关于AMD/CMD/CommonJs的理解

一、前言

时间过的太快,这个月大部分时间都在看书、看文档(感谢公司没有工作),工作上用不到的东西忘得太快,最近重温了模块化开发、nodejs的一些东西,其中涉及了AMD、CMD、CommonJs,现将内容整理如下。

二、那些模块规范

这三个规范(AMD、CMD、CommonJs)都是为javascript模块化加载而生的,都是在用到或者预计要用到某些模块时候加载该模块,使得大量的系统巨大的庞杂的代码得以很好的组织和管理。模块化使得我们在使用和管理代码的时候不那么混乱,而且也方便了多人的合作。

1)  CommonJS

CommonJS是服务器端模块的规范,由Node推广使用。由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用。

根据CommonJS规范:

  • 一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性。
  • 输出模块变量的最好方法是使用module.exports对象。
  • 加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象

例:

//example.js
var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

上面代码通过module.exports输出变量x和函数addX

require方法用于加载模块。

var example = require('./example.js');

console.log(example.x); // 5
console.log(example.addX(1)); // 6

CommonJS模块的特点如下:

  • 所有代码都运行在模块作用域,不会污染全局作用域。
  • 模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。
  • 模块加载的顺序,按照其在代码中出现的顺序。模块加载的顺序是同步进行

2) AMD规范

AMD是”Asynchronous Module Definition”的缩写,意思就是”异步模块定义“。由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数,也就是大名鼎鼎RequireJS,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

 

require.js的诞生,就是为了解决这两个问题:

  • 实现js文件的异步加载,避免网页失去响应;
  • 管理模块之间的依赖性,便于代码的编写和维护。

关于require.js的使用,请看官网

3)CMD规范

CMD 即Common Module Definition的缩写,意思就是“通用模块定义”。CMD规范是国内发展出来的,就像AMD有个requireJS,CMD有个浏览器的实现SeaJSSeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同。

关于require.js的使用,请看官网

三、总结

  • CommonJs主要针对服务端,AMD/CMD主要针对浏览器端,所以最容易混淆的是AMD/CMD。
  • AMD、CMD都是并行加载js文件
  • AMD是预加载,在并行加载js文件同时,还会解析执行该模块。而CMD是懒加载,虽然会一开始就并行加载js文件,但是不会执行,而是在需要的时候才执行。
  • AMD优点:加载快速,尤其遇到多个大文件,因为并行解析,所以同一时间可以解析多个文件。AMD缺点:并行加载,异步处理,加载顺序不一定,可能会造成一些困扰,甚至为程序埋下大坑。
  • CMD优点:因为只有在使用的时候才会解析执行js文件,因此,每个JS文件的执行顺序在代码中是有体现的,是可控的。 CMD缺点:执行等待时间会叠加。因为每个文件执行时是同步执行(串行执行),因此时间是所有文件解析执行时间之和,尤其在文件较多较大时,这种缺点尤为明显。
赞(0) 打赏
未经允许不得转载:李帅帅空间 » 关于AMD/CMD/CommonJs的理解

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

React CLI - 快速创建react项目脚手架工具

官 网GitHub

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏