(一)入口

  通过 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 的加载实现的更多相关文章

  1. 【requireJS源码学习02】data-main加载的实现

    前言 经过昨天的学习,我们大概了解到了requireJS的主要结构,这里先大概的回顾一下 首先从总体结构来说,require这里分为三块: ① newContext之前变量声明或者一些工具函数 ② n ...

  2. 【Spring源码分析】非懒加载的单例Bean初始化过程(下篇)

    doCreateBean方法 上文[Spring源码分析]非懒加载的单例Bean初始化过程(上篇),分析了单例的Bean初始化流程,并跟踪代码进入了主流程,看到了Bean是如何被实例化出来的.先贴一下 ...

  3. 【Spring源码分析】非懒加载的单例Bean初始化前后的一些操作

    前言 之前两篇文章[Spring源码分析]非懒加载的单例Bean初始化过程(上篇)和[Spring源码分析]非懒加载的单例Bean初始化过程(下篇)比较详细地分析了非懒加载的单例Bean的初始化过程, ...

  4. Spring源码分析:非懒加载的单例Bean初始化前后的一些操作

    之前两篇文章Spring源码分析:非懒加载的单例Bean初始化过程(上)和Spring源码分析:非懒加载的单例Bean初始化过程(下)比较详细地分析了非懒加载的单例Bean的初始化过程,整个流程始于A ...

  5. Spring源码分析:非懒加载的单例Bean初始化过程(下)

    上文Spring源码分析:非懒加载的单例Bean初始化过程(上),分析了单例的Bean初始化流程,并跟踪代码进入了主流程,看到了Bean是如何被实例化出来的.先贴一下AbstractAutowireC ...

  6. wemall app商城源码Android之ListView异步加载网络图片(优化缓存机制)

    wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享wemall app商城源码Android之L ...

  7. spring源码学习之bean的加载(三)

    接着二中的继续写,那个都超过1000行了,哈,需要重新写一个,要不太长了,我都看不下去了 7.4 初始化bean doCreateBean函数中有这样一行代码:这行代码中initializeBean函 ...

  8. 1. spring5源码 -- Spring整体脉络 IOC加载过程 Bean的生命周期

    可以学习到什么? 0. spring整体脉络 1. 描述BeanFactory 2. BeanFactory和ApplicationContext的区别 3. 简述SpringIoC的加载过程 4. ...

  9. 【Spring源码分析】非懒加载的单例Bean初始化过程(上篇)

    代码入口 上文[Spring源码分析]Bean加载流程概览,比较详细地分析了Spring上下文加载的代码入口,并且在AbstractApplicationContext的refresh方法中,点出了f ...

  10. Spring源码分析:非懒加载的单例Bean初始化过程(上)

    上文[Spring源码分析]Bean加载流程概览,比较详细地分析了Spring上下文加载的代码入口,并且在AbstractApplicationContext的refresh方法中,点出了finish ...

随机推荐

  1. 2017CUIT校赛-线上赛

    2017Pwnhub杯-CUIT校赛 这是CUIT第十三届校赛啦,也是我参加的第一次校赛. 在被虐到崩溃的过程中也学到了一些东西. 这次比赛是从5.27早上十点打到5.28晚上十点,共36小时,中间睡 ...

  2. #414 Div2 C

    #414 Div2 C 题意 两个人每个人都有一串字母序列,他们要替换一个长度为 n 包含问号的新序列,他们每次可以使用自己序列中的字母代替新序列的问号(使用自己序列中的字母后那个字母就会消失),第一 ...

  3. Python3网络爬虫

    # 最近在实验楼学习了爬取妹子图,发现在运行的时候不是很流畅,有些图片下 1 # coding: utf-8 # coding: utf-8 import re import threading fr ...

  4. 【转】Delphi多线程编程

    文章来源: http://liukun966123.my.gsdn.net/2004/10/22/4797/ Delphi中有一个线程类TThread是用来实现多线程编程的,这个绝大多数Delphi书 ...

  5. 抓包工具 - HttpWatch

    HttpWatch是功能强大的网页数据分析工具,集成在IE工具栏,主要功能有网页摘要.cookies管理.缓存管理.消息头发送/接收,字符查询.POST数据.目录管理功能和报告输出.HttpWatch ...

  6. influxdb + Grafana可视化监控平台

    在centos6.5上influxdb + Grafana监控平台配置: 1.RedHat and CentOS users can install the latest stable version ...

  7. 从OneNote走出,技术博客养成记

    2010年9月北上求学,在一所普通本科院校学习计算机专业,年少轻狂未能领悟计算机技术的本质渐生弃学之意. 2013年9月南下参军,在一个电抗部队从事通信指控专业,填补了扛枪演练的男儿情怀却又无法抵制对 ...

  8. JS键盘事件对象之keyCode、charCode、which属性对比

    先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这 ...

  9. Jquery页面滚动动态加载数据,页面下拉自动加载内容

    <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...

  10. Rest模式get,put,post,delete含义与区别(转)

    POST   /uri     创建 DELETE /uri/xxx 删除 PUT    /uri/xxx 更新或创建 GET    /uri/xxx 查看 GET操作是安全的.所谓安全是指不管进行多 ...