首先，我们先来简单说一下，require.js的原理：
1、载入模块
2、通过模块名解析出模块信息，以及计算出URL
3、通过创建SCRIPT的形式把模块加载到页面中。
4、判断被加载的脚本，如果发现它有依赖就去加载依赖模块。如果不依赖其它模块，就直接执行factory方法
5、等所有脚本都被加载完毕就执行加载完成之后的回调函数。
从今天起，我们跟着我们简单的例子，通过跟踪代码，来了解require.js的源码。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入require.js -->
<script data-main="./test.js" src="./require.js"></script>
</script>
<script>
require(['a', 'b'], function(a, b) {
a.printA();
b.printB();
});
</script>
</head> <body>
</body> </html>
执行网页时，如果需要使用require.js作为模块加载器时，我们首先需要引入require.js。
<!-- 引入require.js -->
<script data-main="./test.js" src="./require.js"></script>
// a.js
define(function() {
return {
printA: console.log("I am A")
}
}); // b.js
define(function() {
return {
printB: console.log("I am B")
}
});
打开require.js文件我们可以发现，文件中首先定义了三个全局变量，之后便是一个自执行函数。因此在加载require.js文件时，自动执行自执行函数中的内容。
var requirejs, require, define;
(function(global, setTimeout) {
// 此处省略...
}(this, (typeof setTimeout === 'undefined' ? undefined : setTimeout)));
首先我们，可以将require.js分为三个部分，
1）定义全局变量和帮助函数
2）模块加载核心部分
3）定义require和define两个方法，以及项目入口。
如果我们使用跟踪代码的话，会发现文件一直都在定义变量和方法，一直执行到req({});这个语句调用req方法，传入一个空对象作为参数，用于创建一个默认上下文。现在我们跟踪代码，简单了解如何创建一个默认上下文。执行下面这段代码
req = requirejs = function(deps, callback, errback, optional) {
// 此时传入的参数时空对象
//Find the right context, use default
var context, config,
contextName = defContextName; // 默认上下文名为_
// Determine if have config object in the call.
// 此时传入一个空对象作为配置对象
if (!isArray(deps) && typeof deps !== 'string') {
// deps is a config object
config = deps;
if (isArray(callback)) {
// Adjust args if there are dependencies
deps = callback;
callback = errback;
errback = optional;
} else {
deps = [];
}
}
// config为空对象，没有设置context属性，因此不设置上下文名
if (config && config.context) {
contextName = config.context;
}
// getOwn函数：帮助函数，用于获取对象中对应属性的值，此时返回值为undefined
context = getOwn(contexts, contextName);
if (!context) {
/*
s = req.s = {
contexts: contexts,
newContext: newContext
};
*/
// 初始化时，执行下面这段代码，调用req.s中的newContext方法创建默认上下文
// newContext方法时require.js的核心，此时我们只需要了解，它创建了一个默认上下文
// 并且这个函数，只执行一次，之后的上下文，都是通过闭包，在闭包中，修改默认上下文的信息
// 保存自己的上下文信息
context = contexts[contextName] = req.s.newContext(contextName);
}
// 此时config为空对象，执行configure方法几乎没什么作用
if (config) {
context.configure(config);
}
// 跟踪代码可以发现调用context.require=>context.makeRequire()=>localRequire
// context.require = context.makeRequire();
// function localRequire(deps, callback, errback)
// 返回一个localRequire
return context.require(deps, callback, errback);
};
到这里，以及完成了context初始化。
然后继续执行require({});下面的语句
// 重置列出的函数
//Exports some context-sensitive methods on global require.
each([
'toUrl',
'undef',
'defined',
'specified'
], function(prop) {
//Reference from contexts instead of early binding to default context,
//so that during builds, the latest instance of the default context
//with its config gets used.
req[prop] = function() {
var ctx = contexts[defContextName];
return ctx.require[prop].apply(ctx, arguments);
};
}); // 获取添加脚本的父亲节点
if (isBrowser) {
head = s.head = document.getElementsByTagName('head')[0];
//If BASE tag is in play, using appendChild is a problem for IE6.
//When that browser dies, this can be removed. Details in this jQuery bug:
//http://dev.jquery.com/ticket/2709
baseElement = document.getElementsByTagName('base')[0];
if (baseElement) {
head = s.head = baseElement.parentNode;
}
}
以上仅仅是创建了默认上下文，并进行简单的处理。
require.js 源码解读——配置默认上下文的更多相关文章
-
js便签笔记（10） - 分享：json2.js源码解读笔记
1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...
-
js便签笔记（10） - 分享：json.js源码解读笔记
1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...
-
fastclick.js源码解读分析
阅读优秀的js插件和库源码,可以加深我们对web开发的理解和提高js能力,本人能力有限,只能粗略读懂一些小型插件,这里带来对fastclick源码的解读,望各位大神不吝指教~! fastclick诞生 ...
-
require.js源码分析
写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...
-
prototype.js 源码解读（02）
如果你想研究一些比较大型的js框架的源码的话,本人建议你从其最初的版本开始研读,因为最初的版本东西少,易于研究,而后的版本基本都是在其基础上不断扩充罢了,所以,接下来我不准备完全解读prototype ...
-
prototype.js 源码解读（01）
prototype.js是一个设计的非常优雅且很有实用价值的js基础类库,其源码非常值得研究.研究它的源码不仅能提升个人水平,而且对你打下坚实的js基础也很有帮助.因本人技术水平有限,该解读仅供参考. ...
-
Require.js 源码分析
本文将简单介绍下个人对require.js的源码分析,简单分析实现原理 一.require加载资源的流程 require中,根据AMD(Asynchronous Module Definition)的 ...
-
json2.js源码解读记录
相关内容:json详细用法.js语法.unicode.正则 json特点--最简单.最小巧的经典js库. json作者:道克拉斯.克劳福德(Douglas Crockford)--js大牛 出 ...
-
亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读
关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...
随机推荐
-
sublime text常用快捷键
个人觉得很好用的我会紫色标出!这里只是windows快捷键 搜索类 Ctrl+P 输入想要找的文件名,可以找出相应的文件: 输入@可以查找相应文件的名字(等同于Ctrl+r),例如在css文件 ...
-
Python开发【第八章】：Socket
一.Socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. so ...
-
Eclipse内置Tomcat的配置
1.首先肯定是得下载J2EE版本的eclipse了,再去Apache Tomcat的官网去下一个Tomcat.都解压到自己想放的目录 2.Eclipse -> Preferences -> ...
-
ASP.NET-FineUI开发实践-14
以前写过一个表格自动补全,改下,就出现了部分级联修改.测试版本4.1.1 共享下JS,ext-part2.js 后台再来个得到数据的方法就可以了. 1.方法还是删除+插入,主要在 i ...
-
手机APP测试思路及测试要点
一 手机APP测试基本思路: 测试计划--测试方案--测试用例--执行: 很多小公司都没有具体的需求,项目时间也比较紧,而且流程也不是很严谨,在这样的情况之下,作为测试的我们,该怎样去对项目进行用例 ...
-
Kafka官方文档翻译——设计
下面是博主的公众号,后续会发布和讨论一系列分布式消息队列相关的内容,欢迎关注. ------------------------------------------------------------ ...
-
ajax跨域问题Access-Control-Allow-Origin
Access control allow origin直译过来就是"访问控制允许同源",这是由于ajax跨域访问引起的.所谓跨域就是,在a.com域下,访问b.com域下的资源:出 ...
-
maven配置及使用
配置maven工程.从官网下载maven工具,然后解压到磁盘某个目录下即可. 计算机->属性->高级系统设置->环境变量. 新建如下变量: 变量名:MAVEN_HOME 变量值:C: ...
-
006-Redis 发布订阅
Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图展示了频道 channel1 , 以及订 ...
-
What?
What? 本文主要讲解一下kubernetes周边的概念,可以说是一小部分的生态圈,逐渐了解一下,走进kubernetes的世界.请读者在读的时候,带着批判的态度去读. 一张概览图: 云计算: 原文 ...