requireJS 源码(三) data-main 的加载实现
(一)入口
通过 data-main 去加载 JS 模块,是通过 req(cfg) 入口去进行处理的。
为了跟踪,你可以在此 加断点 进行调试跟踪。
(二)

req({ })执行时,function newContext() 已经创建了上下文环境 context。我们可以看看 context 拥有哪些属性与方法。

通过执行 context.confgiure(config)即可加载 data-main所对应的js文件(main.js)。
当req(cfg)执行,config值 如右图所示---------
在context.confgiure()函数最后一行代码中,开始执行 context.require() .

context.require(...),其中 context.require = context.makeRequire();
其中,makeRequire() 以及 localRequire() 这里已经形成了闭包。

因为在 req( { } )调用makeRequire()时 ,已经直接返回 localRequire(),因此 context.require(..),直接进入 localRequire()函数。
localRequire()函数里,做很很多事,但是,由于此时 全局队列,局部队列( defQueue、globalDefQueue,) 都为空,暂时不考虑 intakeDefines(),
重点看看 context.nextTick()这里到底做了些什么处理。

如果Module 不存在,则创建一个新的Module;存在,则直接返回。我们可以看看创建的 requireMod 拥有哪些属性值呢?

. Module对象采用 混合构造方式,将方法都写在了 原型链上。
Module = function (map){
};
Module.prototype = {
init: function() { }, //用于初始化属性
load: function () { }
};
整个 data-main 中的 js 文件 主 加载顺序如下
requireMod.init()
===>
Module..enable() //init()方法内部调用
===>
Module.check() ===>
Module.fetch() ===>
Module.load() ===>
context.load() ===>
req.load() ===>
context.onScriptLoad()
Module.init() Module.check() 都是 对 main Module进行信息处理,最后获得了 data-mian 中js文件的路径,控制器又回到了 req.load() 手里

请看下面核心代码。

req.load() 先创建了一个<script src="main.js"></script> 标签,给其注入了一自定义属性,
绑定了一个事件然后,将这个标签<head></head>标签中,这样,浏览器自动会去加载这个js文件。
从页面上,我们可以清晰的看到,会多了一行代码。

至此,data-main 文件的加载 过程,已经梳理完成。
requireJS 源码(三) data-main 的加载实现的更多相关文章
- 【requireJS源码学习02】data-main加载的实现
前言 经过昨天的学习,我们大概了解到了requireJS的主要结构,这里先大概的回顾一下 首先从总体结构来说,require这里分为三块: ① newContext之前变量声明或者一些工具函数 ② n ...
- 【Spring源码分析】非懒加载的单例Bean初始化过程(下篇)
doCreateBean方法 上文[Spring源码分析]非懒加载的单例Bean初始化过程(上篇),分析了单例的Bean初始化流程,并跟踪代码进入了主流程,看到了Bean是如何被实例化出来的.先贴一下 ...
- 【Spring源码分析】非懒加载的单例Bean初始化前后的一些操作
前言 之前两篇文章[Spring源码分析]非懒加载的单例Bean初始化过程(上篇)和[Spring源码分析]非懒加载的单例Bean初始化过程(下篇)比较详细地分析了非懒加载的单例Bean的初始化过程, ...
- Spring源码分析:非懒加载的单例Bean初始化前后的一些操作
之前两篇文章Spring源码分析:非懒加载的单例Bean初始化过程(上)和Spring源码分析:非懒加载的单例Bean初始化过程(下)比较详细地分析了非懒加载的单例Bean的初始化过程,整个流程始于A ...
- Spring源码分析:非懒加载的单例Bean初始化过程(下)
上文Spring源码分析:非懒加载的单例Bean初始化过程(上),分析了单例的Bean初始化流程,并跟踪代码进入了主流程,看到了Bean是如何被实例化出来的.先贴一下AbstractAutowireC ...
- wemall app商城源码Android之ListView异步加载网络图片(优化缓存机制)
wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享wemall app商城源码Android之L ...
- spring源码学习之bean的加载(三)
接着二中的继续写,那个都超过1000行了,哈,需要重新写一个,要不太长了,我都看不下去了 7.4 初始化bean doCreateBean函数中有这样一行代码:这行代码中initializeBean函 ...
- 1. spring5源码 -- Spring整体脉络 IOC加载过程 Bean的生命周期
可以学习到什么? 0. spring整体脉络 1. 描述BeanFactory 2. BeanFactory和ApplicationContext的区别 3. 简述SpringIoC的加载过程 4. ...
- 【Spring源码分析】非懒加载的单例Bean初始化过程(上篇)
代码入口 上文[Spring源码分析]Bean加载流程概览,比较详细地分析了Spring上下文加载的代码入口,并且在AbstractApplicationContext的refresh方法中,点出了f ...
- Spring源码分析:非懒加载的单例Bean初始化过程(上)
上文[Spring源码分析]Bean加载流程概览,比较详细地分析了Spring上下文加载的代码入口,并且在AbstractApplicationContext的refresh方法中,点出了finish ...
随机推荐
- VR全景智慧城市:VR全景技术分析与研究
全景智慧城市,多年从事三维全景技术应用的互联网公司,我们利用计算机图形学.多媒体.人工智能和计算机网络技术,深入研发和推广虚拟现实9VR0技术的行业应用.如官方网站升级+720度全景.微网站建设+72 ...
- [HDU1001] Sum Problem
Problem Description Hey, welcome to HDOJ(Hangzhou Dianzi University Online Judge). In this problem, ...
- 【web前端开发】浏览器兼容性处理
1.居中问题div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div里的 ...
- java模拟报文
为了以后节约时间,记录下模拟报文的实现 模拟报文思路:就是后台把接口数据先写在文档里面写死,接口地址不变,在每个接口里面控制是访问的模拟报文还是数据库里面的数据, 对于前端来说所有都是不变的,就是说我 ...
- Java之JSON数据
特别注意:使用JSON前需要导包 操作步骤地址:http://blog.csdn.net/baidu_37107022/article/details/70876993 1.定义 JSON(JavaS ...
- vue-cli项目中怎么mock数据
在vue项目中, mock数据可以使用 node 的 express模块搭建服务 1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data ...
- SQL 和 .NET Framework 数据类型对应表
SQL Server data type CLR data type (SQL Server) CLR data type (.NET Framework) varbinary SqlBytes, S ...
- 转 使用HAProxy,PHPRedis,和MySQL支撑10亿请求每周架构细节
[编者按]在公司的发展中,保证服务器的可扩展性对于扩大企业的市场需要具有重要作用,因此,这对架构师提出了一定的要求.Octivi联合创始人兼软件架构师Antoni Orfin将向你介绍一个非常简单的架 ...
- 解决laydate时间日期插件定位溢出
laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap 1. 默认情况 laydate弹出层默认对齐input左边框 2 ...
- PHP获取当前的毫秒值
php本身没有提供返回毫秒数的函数,但提供了一个microtime()函数,借助此函数,可以很容易定义一个返回毫秒数的函数 1. 函数 mixed microtime ([ bool $get_as_ ...