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 开始往<body></body>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肯定没有上文讲的这么简单,希望能够结合实际代码深入理解,共勉!