首页 > 代码库 > requireJS源码分析
requireJS源码分析
目录
1. requireJS概念
2. AMD与CMD区别
3. 模块加载器的来历
4. 模块加载器的利弊
5. 模块加载器的使用场景
6. requireJS源码解读
7.心得总结
一、requireJS概述
概述
RequireJS是一款遵循AMD规范协议的JavaScript模拟加载器。
业界常见模块加载器（labjs、requirejs、seajs）
LABjs的核心是LAB(Loading and Blocking)：核心价值是性能优化
至于requirejs和seajs区别，知乎上有专门篇幅讲这个
作者玉伯-支付宝淘宝前端类库KISSY、seajs、arale创始人
地址呈上：http://www.zhihu.com/question/20342350
二、AMD与CMD区别
1.名词解释
AMD：Asynchronous Modules Definition异步模块定义，提供定义模块及异步加载该模块依赖的机制。
CMD：Common Module Definition 通用模块定义，提供模块定义及按需执行模块
2. 提前执行：提前异步并行加载
优点：尽早执行依赖可以尽早发现错误；缺点：容易产生浪费
3. 延迟执行：延迟按需加载
优点：减少资源浪费 缺点：等待时间长、出错时间延后
2.1 AMD与CMD代码模式
AMD代码模式-运行策略
define([‘./a‘, ‘./b‘], function(a, b) { //运行至此，a.js和b.js已经下载完成 a模块和b模块已经执行完，直接可用；
a.doing();
// 此处省略500行代码
b.doing();
});
CMD代码模式-运行策略
define(function(require, exports, module) {
var a = require("./a"); //等待a.js下载、执行完
a.doing();
// 此处省略500行代码
var b = require("./b"); //依赖就近书写
b.doing();
});
三、模块加载器来历
web2.0的到来，页面的交互越来越强烈，逐渐变成“互联网应用程序”，js代码越来越庞大，越来越复杂，诞生很多库和框架，相互间存在依赖关系和加载顺序要求。面对错综复杂代码，攻城师不堪重负，迫切渴望解放代码各种关系。
3.1模块代码的演变过程
四、模块加载器的利与弊
五、模块加载器的适用场景
个人观点
requireJS比较适合独立APP型项目，能够做到统一构建的那种
seajs比较适合多个项目团队协议的工程，不能做到统一构建的那种
六、requireJS源码剖析
源码结构体：三部分
1、requireJS基本介绍
2、requireJS加载原理
3、requireJS整体框架流程图
4、requireJS源码解读（举一个define方法）
5、requireJS使用后几个思考
6.0.1 源码第一个部分组织结构
6.0.2 第二部分代码
6.0.3 第三部分代码结构
6.1：基本介绍
中文API参考地址：http://requirejs.cn/
特点：异步加载、模块化、依赖管理
a) 程序入口-脚本引入：<script data-main="script/test" src=http://www.mamicode.com/"script/require.js"></script>
调试器显示
6.1.1：入口代码执行链路
源码执行链路：
if (isBrowser && !cfg.skipDataMain) { ... } // 这段代码的主要功能是找到绑定的data-main，然后往全局的cfg对象添加base路径和main。
=> eachReverse();
=> define = function(...) { ... };
=> define.amd = { ... };
=> req.exec = function(text) {... }
=>req(cfg);
代码几个细节点：
isBrowser：两个感叹号可以做类型转换->转换为布尔类型
!!(typeof window !== ‘undefined‘ && typeof navigator !== ‘undefine‘ && window.document)
cfg.skipDataMain：控制是否引用data-main属性数据
6.1.2：定义模块和引用模块
6.1.3：config配置
6.2 requireJS加载原理
1、载入模块
2、通过模块名解析出模块信息，以及计算出URL
3、通过创建SCRIPT的形式把模块加载到页面中。
4、判断被加载的脚本，如果发现它有依赖就去加载依赖模块。如果不依赖其它模块，就直接执行factory方法
5、等所有脚本都被加载完毕就执行加载完成之后的回调函数。
6.3 requireJS整体框架流程图
6.4 requireJS源码解读（举一个define方法）
define函数的作用
1、globalDefQueue只会有可能在define函数处被压入数据；
注：requireJS有两个队列 a)globalDefQueue 全局队列 b) defQueue: newContext闭包
2、调用依赖时候会根据define进行设置将加载好的标签引入键值对应关系；
3、每一个define模块都会维护一个闭包，而且多数时候这个闭包是无法释放的，面对这个问题，一般采用将大项目拆分，避免首次加载过多资源，防止内存占用过渡问题
4、define方法会根据键值改变对应模块的标识值
6.4.1 requireJS源码解读 define函数主结构体
6.4.2 requireJS源码解读 define函数源码
6.5 requireJS使用后的几个问题
1、使用require后页面引入的js两个data-*属性，有什么用
2、data-main是项目的唯一入口，但是怎么进入这个入口，之后又做了什么？
3、require和define里面怎么执行的，如何管理依赖关系？
4、require和define区别是什么？
5、如何异步加载js文件的？
6.5.1 问题1
第一个问题解答：使用require后页面引入的js两个data-*属性，有什么用
data-*：在浏览器中对脚本进行打tag，创建、移除脚本标签用到
6.5.2：data-main入口的具体实现
6.5.3：require和define怎么执行，如何管理依赖关系？
require方法：
1、检查依赖的模块，根据配置文件，获取js文件的实际路径
2、根据js文件实际路径，在dom中插入script节点，并绑定onload事件来获取该模块加载完成的通知。
3、依赖script全部加载完成后，调用回调函数
define方法：
1、每个define模块都会维护一个闭包
2、define几个关键判断点：
a) checkLoadedTimeoutId b) inCheckLoaded c) stillLoading
依赖关系管理：script标签执行onload事件将全局队列的东西载入context.defQueue，根据相关的映射id（由event参数获取），实例化相关模块
6.5.4：require和define的区别
功能区别：
define: 用来定义模块（注册为requirejs中模块）
require：用来加载和使用模块的
实现代码区别：
如果使用require定义模块，不能执行结果返回任何值，这意味着不能使用这个模块到其他模块
6.5.4：如何异步加载js
看一下req.createNode方法
req.createNode = function(config, moduleName, url) {
var node = config.xhtml ?
document.createElementNS(‘http://www.w3.org/1999/xhtml‘, ‘html:script‘) :
document.createElement(‘script‘);
node.type = config.scriptType || ‘text/javascript‘;
node.charset = ‘utf-8‘;
node.async = true; // 异步
return node;
};
当node加载完毕后会调用context.onScriptLoad，做了实例化context.Module对象，并暴露给registry供调用
onScriptLoad: function(evt) {
if (evt.type === ‘load‘ ||
(readyRegExp.test(evt.currentTarget || evt.srcElement).readyState)) {
interactiveScript = null;
// getScriptData()找evt对应的script，提取data-requiremodule的mod名称
var data = http://www.mamicode.com/getScriptData(evt);
context.completeLoad(data.id);
}
};
七、总结
1、学习一个工具，先用熟练，之后开始思考是怎么实现
2、框架学习有助于学习大牛的代码组织、编码风格、设计思想，对提升帮助很大（就是内功修炼）
3、看源码大概流程 源码如何组织->debug理清调用链->参考别人分析->demo校验->总结
requireJS源码分析