我们学习一个新的技术,熟练的使用之后,就应该去探索它的原理。这篇文章我们来探索下requirejs的原理。

从4个场景来探索requirejs的原理

场景1. 定义一个require依赖b模块

场景2. 定义一个require依赖模块b,模块b依赖模块c

场景3. 定义一个依赖来自外部的js模块

场景3. 当出现循环依赖时

本篇博客讲场景1

步骤一,断点代码到define方法,我们传入的name,deps和callback被push到golbalDefQueue数据中

步骤二,断点到requirejs方法,在这个方法内部调用了intakeDefines这个方法是对步骤1中golbalDefQueue数组内容转换成module,并且调用module的init方法对模块进行了初始化,这时候module的状态为inited

步骤三:当所有的module都初始化后,进入了requirejs的settimeout函数。这里因为require(["b"], function(){})首先要生成一个自定义名字的模块,它的依赖为b,然后执行这个自定义模块的init并且设置这个module的状态为enabled。

步骤四,init方法内部会调用enable方法,这个方法是一个递归的方法,对它的依赖module递归执行enable方法。父模块会绑定一个子模块的defined事件,当子模块触发defined事件时,会将已经defined的模块加入到父模块的依赖数组中,当所有的依赖都defined后,执行父模块的的callback方法(也就是定义在require中的function)

好了,这里介绍了requirejs的加载过程,总结:

a. 首先执行define方法,将所有的定义的模块都放到golbalDefQueue中

b. 执行requirejs方法,将所有的golbalDefQueue中的模块取出,并转换成module,这时候module的状态为inited

c. 执行setimeout方法,根据require方法生产一个主module,然后eabled主module,并且依次enabled所有的依赖module。每次调用enable时,module的状态为enabled

d. 当module的所有依赖都defined时,执行require的回调方法,将module的状态更新为defined。

下篇文章继续介绍下一个场景:当依赖模块来自外部的js文件时,requirejs的执行过程。

requirejs的加载原理 - 场景1. 定义一个require依赖a模块的更多相关文章

  1. 【requireJS源码学习03】细究requireJS的加载流程

    前言 这个星期折腾了一周,中间没有什么时间学习,周末又干了些其它事情,这个时候正好有时间,我们一起来继续学习requireJS吧 还是那句话,小钗觉得requireJS本身还是有点难度的,估计完全吸收 ...

  2. 老调重弹:JDBC系列之<驱动加载原理全面解析) ----转

      最近在研究Mybatis框架,由于该框架基于JDBC,想要很好地理解和学习Mybatis,必须要对JDBC有较深入的了解.所以便把JDBC 这个东东翻出来,好好总结一番,作为自己的笔记,也是给读者 ...

  3. Grunt-cli的执行过程以及Grunt加载原理

    通过本篇你可以了解到: 1 grunt-cli的执行原理 2 nodeJS中模块的加载过程 Grunt-cli原理 grunt-cli其实也是Node模块,它可以帮助我们在控制台中直接运行grunt命 ...

  4. 深入解析 composer 的自动加载原理 (转)

    深入解析 composer 的自动加载原理 转自:https://segmentfault.com/a/1190000014948542 前言 PHP 自5.3的版本之后,已经重焕新生,命名空间.性状 ...

  5. Spring Boot源码分析-配置文件加载原理

    在Spring Boot源码分析-启动过程中我们进行了启动源码的分析,大致了解了整个Spring Boot的启动过程,具体细节这里不再赘述,感兴趣的同学可以自行阅读.今天让我们继续阅读源码,了解配置文 ...

  6. iOS 下拉刷新-上拉加载原理

    前言 讲下拉刷新及上拉加载之前先给大家解释UIScrollView的几个属性 contentSize是UIScrollView可以滚动的区域. contentOfinset 苹果官方文档的解释是&qu ...

  7. 【requireJS路径加载】与程序员小卡的交流

    这两天正好看到了程序员小卡同学的一篇博客,里面对requireJS路径的解析做了一些说明,里面有点问题待解决,我这里正好知道一点,所以整理成文,不知对小卡同学是否有帮助. http://www.cnb ...

  8. 第三课:sea.js模块加载原理

    模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...

  9. (转)Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条(三十一)

      异步任务相信大家应该不会陌生,那么本章内容MOMO将带领大家学习Unity中的一些异步任务.在同步加载游戏场景的时候通常会使用方法 Application.LoadLevel(“yourScene ...

随机推荐

  1. 未解决的html页面banner对不齐

    莫名其妙的问题,记录等待解决: 怎么讲呢?就是可能真的没有理解这句话,浏览器是否是需要这句话的,思考! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  2. Zookeeper 序列化机制

    一.到底在哪些地方需要使用序列化技术呢? 二.Zookeeper(分布式协调服务组件+存储系统) Java 序列化机制 Hadoop序列化机制 Zookeeper序列化机制 一.到底在哪些地方需要使用 ...

  3. T-SQL - query01_创建数据库|创建表|添加数据|简单查询

    时间:2017-09-29  整理:byzqy 本篇以"梁山好汉花名册"为例,记录MS SQLServer T-SQL语句的使用,包含命令: 创建数据库 | 删除数据库 创建表 | ...

  4. 1,Spark参数调优

    Spark调优 目录 Spark调优 一.代码规范 1.1 避免创建重复RDD 1.2 尽量复用同一个RDD 1.3 多次使用的RDD要持久化 1.4 使用高性能算子 1.5 好习惯 二.参数调优 资 ...

  5. mybatis动态sql以及分页

    1.mybatis动态sql 2.模糊查询 3.查询返回结果集的处理 4.分页查询 5.特殊字符处理 1.mybatis动态sql If.trim.foreach If 标签判断某一字段是否为空 &l ...

  6. Git 系列教程(2)- Git 安装

    前言 直接复制官网的教程了,不对自己百度吧,不然就参考下我的几篇文章 Linux安装Git(源码安装) https://www.cnblogs.com/poloyy/p/12186802.html 在 ...

  7. 测试开发【提测平台】分享9-DBUntils优化数据连接&实现应用搜索和分页功能

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 从本期开始知识点讲以思维导图的形式给出,内容点会按照讲解-应用-展示的形式体现,这样会更清晰些. DBUntils连接池 在项目中链接数据 ...

  8. ubuntu安装glusterFS

    以2台服务器为例: node1: 172.18.1.10 node2: 172.18.1.20 1) 修改主机名,修改hosts文件添加IP地址映射 hostname node1/node2vim / ...

  9. 解决FTPClient下载网络文件线程挂起问题

    今天在windows上调试FTP下载文件时,出险线程假死,代码如下: if (inputStream != null) { byte[] data = null; ByteArrayOutputStr ...

  10. CSS003. 盒子水平垂直居中简写属性(place-items)

    place-items  CSS 中的 place-items 是一个简写属性 ,它允许你在相关的布局(如 Grid 或 Flexbox)中可以同时沿着块级和内联方向对齐元素 (例如:align-it ...