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 ...
随机推荐
- GitBook 使用
介绍 GitBook是一个基于Node.js的命令行工具,可使用 Github/Git和Markdown来制作精美的电子书,GitBook 并非关 Git的教程. 导出格式有PDF.HTML等,需要添 ...
- 一天搞定CSS： 标签样式初始化（CSS reset）及淘宝样式初始化代码--09
样式初始化:是指对HTML中某些标签的默认样式进行清除 样式初始化目的: 不同浏览器的默认样式不一样,若不清理,会导致相同的代码在浏览器中解析结果不一样,为了避免这种情况,所以需要进行样式初始化. 代 ...
- javaSE_07Java中类和对象-封装特性--练习
1.编写封装一个学生类,有姓名,有年龄,有性别,有英语成绩,数学成绩,语文成绩,一个学生类,我们关注姓名,年龄,学历等信息,要求年龄必须在19-40岁之间,默认为19,学历必须是大专,本科,研究生这几 ...
- struts2+hibernate+spring注解版框架搭建以及简单测试（方便脑补）
为了之后学习的日子里加深对框架的理解和使用,这里将搭建步奏简单写一下,目的主要是方便以后自己回来脑补: 1:File--->New--->Other--->Maven--->M ...
- springMVC实现REST开发详解（补充Json解析问题以及静态文件404错误解决办法）
一.什么是REST? 符合REST约束风格和原则的应用程序或者设计就是REST 例如: /blog/1 HTTP GET =>查询id=1的blog /blog/1 HTTP DE ...
- es6之各种数据类型的扩展
一. 字符串的扩展 为字符串添加了Iterator,可以被for...of遍历 includes.startsWith.endsWith都会返回布尔值,且支持第二个参数(开始搜索的位置),endsWi ...
- log4j 在项目中的详细配置
1.添加log4j 包 2.首先在src目录下添加log4j.properties文件 log4j.rootLogger=debug, stdout, R log4j.appender.stdout= ...
- SQL VIEW（视图）
视图是可视化的表. SQL CREATE VIEW 语句 什么是视图? 在 SQL 中,视图是基于 SQL 语句的结果集的可视化的表. 视图包含行和列,就像一个真实的表.视图中的字段就是来自一个或多个 ...
- post和get方式区别
Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别.1. get是把参数数据队列加到提交表单的ACTI ...
- arcgis api for js入门开发系列九热力图效果
上一篇实现了demo的聚合效果,本篇新增热力图效果,截图如下: 热力图效果实现的思路如下: 1.map.js初始化函数调用聚合效果的js接口,map.heatmap.js实现聚合核心效果的js文件 / ...