白话 AMD原理 异步加载模块

AMD是什么，require.js又是什么？

AMD: 在前端，它是一种当前开发者能使用的模块化Javascript方案。
require.js: 基于AMD的设计规范，并将AMD的功能发挥到最大的一个插件。

AMD大致分为三个功能

• handle：对开发者输入的参数进行区分，运行对应的功能；
• setModule：建立开发者想要的模块，如果存在便调用；
• loadModule： 加载需要的模块，加载模块的依赖；

A过程(引入单依赖)

A.js
define(['B'], function (B){
   B();
});

1、我在A.JS中，希望加载一个B模块，并执行回调（ B()）;

2、AMD拿到信息，在内部注册了一个B模块，并保存了加载完后要执行的（B()）

3、AMD发现B模块没有加载过，那么loadJs（B.js），B模块的load状态为 ‘loading’；

4 、loadJs 开始往appendChild（B.js）;

5.、B.js 被加载进来，js引擎开始执行代码，AMD发现B.js中存在B.js模块的定义代码；

6、因为AMD中B模块已经存在并且是 loading 状态，这个时候B.js中的模块定义更新了
AMD中的B模块状态为 loaded，并执行一直托管的回调（B（））；

当然，实际代码还有依赖注入回调等等复杂的问题

B过程(引入多依赖)

AA.js
define(['B','C','D'], function (B,C,D){
   B(); C(); D();
});

与 A过程 最大的区别就是，在handle过程中，就是对开发者信息输入的处理中，会对多个依赖分配一个

共同该多依赖的长度length，然后给每个依赖一个内部的回调，当某个依赖加载完全（这个依赖页面中定义的该依赖代码执行）后，length -- ；当length === 0 时，执行AA.js中定义的回调, （
B(); C(); D();）

注意

白话这个AMD原理，更多的是基于个人的理解，也有可能与实际标准有出入。
实际去实现一个AMD肯定没有上文讲的这么简单，希望能够结合实际代码深入理解，共勉！