# 模块化

AMD,CMD,CommonJS,ES6 Module 他们都是用于在模块化定义中使用的, AMD、CMD、CommonJS是ES5中提供的模块化编程的方案,import/export是ES6中定义新增的。

# 一、AMD

AMD是RequireJS在推广过程中对模块定义的规范化产出,RequireJS是一个AMD框架,可以异步加载JS文件,按照模块加载方法,通过define()函数定义,第一个参数是一个数组,里面定义一些需要依赖的包,第二个参数是一个回调函数,通过变量来引用模块里面的方法,最后通过return来输出。

特点:依赖前置、预执行

define(['./a', './b'], function(a, b) {
    //运行至此,a.js和b.js已经下载完成
    //a模块和b模块已经执行完
    a.doing();
    b.doing();
});
1
2
3
4
5
6

# 二、CMD

CMD是SeaJS在推广过程中对模块定义的规范化产出,通过define()定义,没有依赖前置,通过require加载插件,CMD是依赖就近,在什么地方使用到插件就在什么地方require该插件,即用即返,这是一个同步的概念。

特点:依赖就近、懒执行

define(function(require, exports, module) {
    var a = require("./a");
    //等待a.js下载、执行完
    a.doing();
    var b = require("./b");
    //等待b.js下载、执行完
    b.doing();
});
1
2
3
4
5
6
7
8

# 三、CommonJS规范

Nodejs端是使用CommonJS规范的,通过module.exports定义。CommonJS定义的模块分为:模块引用(require)、模块定义(exports)、模块标识(module)。

module.exports和exports都是什么呢?

module中其实带有的exports属性,就是我们对外的接口。也就是说,module.exports属性表示当前模块对外输出的接口,其他文件加载该模块,实际上就是读取module.exports变量。

而exports变量,实际上是nodeJS为了方便,为每个模块提供一个exports变量,指向module.exports。这等同在每个模块头部,有一行这样的命令。

var exports = module.exports;
1

因此,我们可以直接向exports对象添加方法

exports.area = function (r) {
  return Math.PI * r * r;
};

exports.circumference = function (r) {
  return 2 * Math.PI * r;
};
1
2
3
4
5
6
7
Last Updated: 4/12/2020, 3:36:17 PM