AMD、CMD、CommonJs 与 ES6

108 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

1、前言:

AMD、CMD、ES6等的出现时为了便于协作开发、后续维护、性能调优,它们的出现将大文件拆分成小文件,保持小颗粒度的模块化开发,同时也不用考虑过多的依赖关系。

2、AMD:

AMD是RequireJS在推广过程中对模块定义的规范化产出;

RequireJS: 是一个AMD框架,可以一步加载JS文件,按照模块加载,通过require([module], callback) 函数定义,[module]数组里面加载的是模块,callback是回调函数,

image.png

image.png

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

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

ADM模块加载写法:

image.png

image.png  

 

3、CMD:

CMD---是SeaJS在推广过程中对模块定义的规范化产出,SeaJS是淘宝团队提供的一个模块开发的js框架.

CMD规范和AMD相似,尽量保持简单。

image.png

优点:

1.  依赖就近,延迟执行;
2.  很容易在node中运行。

缺点:

依赖SPM打包,模块的加载逻辑偏重。

4.AMD 与 CMD区别:

对于依赖的模块,AMD默认是提前执行,CMD是延迟执行;

AMD推崇依赖前置,CMD推崇依赖就近;

image.png

AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一

比如 AMD 里,require 分全局 require 和局部 require,都叫 require。
CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。
CMD 里,每个 API 都**简单纯粹**。

 

5.CommonJS:

CommonJS规范-- 是通过module.exports定义的,在前端浏览器并不支持module.exports,是通过node.js后端使用的;

前端浏览器一般使用AMD、CMD、ES6 等定义模块化开发的;

image.png

 

6.ES6:

ES6特性,模块化-- export / import 对模块进行导出导入的;

模块功能主要由两个命令构成:exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

export:

image.png

image.png  

import:

image.png

export default:

image.png