seajs原理解析
一:
1.本文是基于seajs2.2.1编写的,之后版本应该大同小异
2.本文仅代表个人观点,如有理解错误,敬请指出,大家一起学习
二:
1.首先放一张我画的流程图
这是我理解的seajs的基本的所有流程,接下来通过代码结合该流程图讲解下我的理解
2.1.首先从seajs.use开始,如以下图的代码所示



首先执行preload方法,看preload方法,其实就是执行module.use方法,所以我们直接从module.use讲起,先获取module,如果没有就新建,并且缓存在cachedMods中,定义callback方法(之后会讲),然后执行module.load方法(注意module.get方法,是把所有的ids当做deps传入的)
2.2.module.load方法


看代码,第一次进来,该模块的status还是0,第一个if判断主要是为了require同一个模块多次时只需加载一次(已经loading的只需等他自己的回调),然后resolve方法是用来解析路径的,emit该方法是用来触发seajs自己定义的事件的,seajs.on可以定义事件,这里会触发load事件(如果有自定义),之后的for循环是若主模块的依赖模块还没被加载,就在被依赖的模块的waiting数组中放入主模块的key值以及被依赖次数。当主模块的remain为0时,就加载自身代码,否则往下进入Module.prototype.fetch方法
2.3.Module.prototype.fetch


首先改变状态为fetch,fetchinglist和callbackList分别用来判断和缓存模块,把sendrequest方法存入requestCache返回回去(在sendrequest中有吧onrequest方法传了进去(待会会调用到)),然后module.load方法继续执行,看2.2的图最后一个for循环遍历所有依赖模块执行sendrequest.
module.status更新为FETCHING.
2.4.sendRequest(seajs.request) 以及addonload


执行request方法,创建一个节点,在该节点上加上一个onload方法,然后插入该节点,插入后会执行插入的代码,一般我们是这么写seajs的,如下
sea.use('a',function(){}); define(function(require,exports,module){var b require('b'); ...;})
所以插入会执行define的方法,define方法主要作用是更新deps和factory,他会根据正则匹配把所有require里面的内容提出来,找到绝对路径,再把factory缓存下来,便于之后执行。
(这里举个例子,如上面的代码,主模块a一开始的deps为他自身a,当a模块load进来,执行define函数,a的deps就更新为b了)
然后就执行addonload中的callback方法

2.5.onRequest--> module.load
见2.3的图,主要的作用是让他的子模块执行module.load方法,如果子模块也有依赖,则重复上述步骤,如果没有,则会进入Module.prototype.onload方法
module.status更新为SAVED-->module.status更新为LOADING
2.6.Module.prototype.onload

mod.callback是当只有使用seajs.use时定义的,可以认为只有主模块会执行,for循环写的是当被依赖的模块加载一次,主模块的remain就减去相应的数量,直至为0,主模块进入onload方法,由于主模块youcallback,执行mod.callback()
module.status更新为LOADED
2.7mod.callback()-->module.prototype.exec(部分见图2.1)

图2.1的图中可以看出,模块会先执行module.prototype.exec后会执行自定义的callback方法。
module.prototype.exec就是执行factory方法,也就是define时定义的方法,这里有几个方法,require方法主要作用是执行引进来的方法(已经在前面把他加载进来了,但是还未执行,执行factory时顺序执行require方法,被返回exports)
require.async异步加载,其本质就是module.use就是在执行时新建了一个模块(重走了上述步骤)
exports就是暴露出来的方法,到这里mod.status就变成status.executed了,到这里所有的就都结束了。
module.status更新为EXECUTING-->module.status更新为EXECUTED.
3.结语
有一些里面的方法及细节没有讲到,主要讲了大致流程,如果有错误,请帮忙指出及修改,谢谢!
seajs原理解析的更多相关文章
- [原][Docker]特性与原理解析
Docker特性与原理解析 文章假设你已经熟悉了Docker的基本命令和基本知识 首先看看Docker提供了哪些特性: 交互式Shell:Docker可以分配一个虚拟终端并关联到任何容器的标准输入上, ...
- 【算法】(查找你附近的人) GeoHash核心原理解析及代码实现
本文地址 原文地址 分享提纲: 0. 引子 1. 感性认识GeoHash 2. GeoHash算法的步骤 3. GeoHash Base32编码长度与精度 4. GeoHash算法 5. 使用注意点( ...
- Web APi之过滤器执行过程原理解析【二】(十一)
前言 上一节我们详细讲解了过滤器的创建过程以及粗略的介绍了五种过滤器,用此五种过滤器对实现对执行Action方法各个时期的拦截非常重要.这一节我们简单将讲述在Action方法上.控制器上.全局上以及授 ...
- Web APi之过滤器创建过程原理解析【一】(十)
前言 Web API的简单流程就是从请求到执行到Action并最终作出响应,但是在这个过程有一把[筛子],那就是过滤器Filter,在从请求到Action这整个流程中使用Filter来进行相应的处理从 ...
- GeoHash原理解析
GeoHash 核心原理解析 引子 一提到索引,大家脑子里马上浮现出B树索引,因为大量的数据库(如MySQL.oracle.PostgreSQL等)都在使用B树.B树索引本质上是对索引字段 ...
- alibaba-dexposed 原理解析
alibaba-dexposed 原理解析 使用参考地址: http://blog.csdn.net/qxs965266509/article/details/49821413 原理参考地址: htt ...
- 支付宝Andfix 原理解析
支付宝Andfix 原理解析 使用参考地址: http://blog.csdn.net/qxs965266509/article/details/49802429 原理参考地址: http://blo ...
- JavaScript 模板引擎实现原理解析
1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> < ...
- Request 接收参数乱码原理解析三:实例分析
通过前面两篇<Request 接收参数乱码原理解析一:服务器端解码原理>和<Request 接收参数乱码原理解析二:浏览器端编码原理>,了解了服务器和浏览器编码解码的原理,接下 ...
随机推荐
- 破解tumblr背景音乐
http://sex.tumblr.com/api/read/json?callback=streampadPlayerBlogV2.getAudioResponse&type=audio&a ...
- jdbc接口api
java.sql.* 和 javax.sql.* |- Driver接口: 表示java驱动程序接口.所有的具体的数据库厂商要来实现此接口. |- connect(url, properties): ...
- Android 自定义回调
刚开始接触的时候,觉得 回调 是一个很难理解的概念,之后就不停的上网查找回调的定义:(当你想要把具体的操作,让具体的人来完成,自己定义一个接口就好.使用的时候用接口,具体的人来实现你的接口,也就是实现 ...
- Sicily 1021. Couples
题目地址:1021. Couples 思路: 想清楚了这道题其实很简单.利用夫妻出现的位置作为下标,并设为同一值,第一对夫妻值为1,第二对为2,以此类推,存储完毕即可进入下一步. 利用栈这个数据结构: ...
- Android的理解
从组件的角度来考虑 Activity------------------Service-----------------Broadcast Receiver---------------------- ...
- BZOJ3391: [Usaco2004 Dec]Tree Cutting网络破坏
3391: [Usaco2004 Dec]Tree Cutting网络破坏 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 47 Solved: 37[ ...
- 【转】编写Chrome扩展程序
Chrome的扩展程序很多,也很容易入门,可以来简单实现一下 看看,慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件 其他文件等 可以看 ...
- Java程序员在用的大数据工具,MongoDB稳居第一!
据日前的一则大数据工具使用情况调查,我们知道了Java程序猿最喜欢用的大数据工具. 问题:他们最近一年最喜欢用什么工具或者是框架? 受访者可以选择列表中的选项或者列出自己的,本文主要关心的是大数据工具 ...
- Hadoop-2.x的源码编译
由于在Hadoop-2.x中,Apache官网上提供的都是32位版本,如果是生产环境中则需要自行编译64位,编译Hadoop-2.x版本方法如下: 安装编译源码所依赖的底层库 yum install ...
- 迭代导出word 文档
Map迭代的使用: Map map = new HashMap() ; Iterator it = map.entrySet().iterator() ; while (it.hasNext()) { ...