前端模块化规范(AMD / CMD / CommonJs)

82 阅读2分钟

没有模块化的项目,通常需要在一个页面里使用多个<script>标签引用文件。

进行了模块化处理的项目,模块之间可以相互引用,当有多个第三方 Javascript 在一起混合使用时,按照定好的规则来进行引入和使用

image.png

进行前端模块化的目的是减少维护成本,提高代码的可复用性

模块化开发的规范分为以下几类:

  • AMD
  • CMD
  • CommonJs

它们都是框架在推广的过程中的产出,对应的实现分别是 RequireJs,SeaJs,nodeJs.

1683366022171.png

AMD、CMD 与 CommonJs

  • AMD,异步模块定义(Asynchronous Module Definition),它是预加载,会提前执行,在加载之前导入,主要针对浏览器端。

注:由于它是异步的,所以模块的加载不会影响后面语句的运行。

  • CMD,通用模块定义(Common Module Definition),它是懒加载,延迟执行,在使用的时候导入,主要针对浏览器端
  • CommonJs 是 JavaScript 语言的模块化规范,主要针对服务端,同步加载模块(加载完成之后才能执行后面的操作)

CommonJs 的模块可以多次加载,但只有第一次会运行(原因是执行后会缓存,下一次调用时直接从缓存中读取,清除缓存可再次运行)

注:AMD 和 CMD 经常容易混淆,二者皆为异步加载模块,它们最大的的区别是执行依赖模块的时机不同。

使用方法

AMD 动态引入: 格式:require([module], callback);

require(['math'], function (math) {
  math.abs(-1);
});

多个同时引入:

require(['模块1', '模块2', '模块3'], function (moduleA, moduleB, moduleC){
   // ...
});

CMD 动态引入:

使用 define 来实现模块的声明:

define(['jquery'], function ($) {
    function test(){};
    return test;
});

CommonJs 动态引入:

CommonJs 模块引入方式使用require(),导出的方式是module.exports=value

moudle.exports = {

}

var m = require('./util')