【源码学习】之requirejs
对于现在的前端生态来说,requirejs是有点过时了,webpack帮我们包干了一切。但是对于学习源码这件事情来说,永远是不过时的!
最近稍微闲下来了一点,就着以前做过的项目,我也来看看requirejs的源码。希望能涨点姿势!
1.html中的data-main是个什么鬼?
//address.html
<script type="text/javascript" data-main="${base}/static/js/app/userCenter/address" src="${base}/static/js/plugins/require.js"></script>
使用requirejs,在我们的页面需要引入一个有data-main的主入口js文件。
既然这样,我们就去require源码中去找找data-main在哪里出现了。
//Look for a data-main script attribute, which could also adjust the baseUrl.去寻找一个data-main的script属性,并且能够匹配baseUrl
if (isBrowser && !cfg.skipDataMain) {
//Figure out baseUrl. Get it from the script tag with require.js in it.计算出baseUrl.从含有require.js的script标签中获取它.
eachReverse(scripts(), function (script) {
//Set the 'head' where we can append children by
//using the script's parent.
if (!head) {
head = script.parentNode;
} //Look for a data-main attribute to set main script for the page
//to load. If it is there, the path to data main becomes the
//baseUrl, if it is not already set.
dataMain = script.getAttribute('data-main');
if (dataMain) {
//Preserve dataMain in case it is a path (i.e. contains '?')
mainScript = dataMain; //Set final baseUrl if there is not already an explicit one,
//but only do so if the data-main value is not a loader plugin
//module ID.
if (!cfg.baseUrl && mainScript.indexOf('!') === -1) {
//Pull off the directory of data-main for use as the
//baseUrl.
src = mainScript.split('/');
mainScript = src.pop();
subPath = src.length ? src.join('/') + '/' : './'; cfg.baseUrl = subPath;
} //Strip off any trailing .js since mainScript is now
//like a module name.
mainScript = mainScript.replace(jsSuffixRegExp, ''); //If mainScript is still a path, fall back to dataMain
if (req.jsExtRegExp.test(mainScript)) {
mainScript = dataMain;
} //Put the data-main script in the files to load.
cfg.deps = cfg.deps ? cfg.deps.concat(mainScript) : [mainScript]; return true;
}
});
}
我们在源码中找到了6处匹配的地方,全部在上面这段代码中.
这里用到了一个公有方法eachReverse,包含两个参数,ary和func,func是回调函数,回调函数接受三个参数(数组的每一项,数组的索引,完整的数组元素).
/**
* Helper function for iterating over an array backwards. If the func 帮助函数为了倒序遍历数组,如果func返回true,则跳出循环
* returns a true value, it will break out of the loop.
*/
function eachReverse(ary, func) {
if (ary) {
var i;
for (i = ary.length - 1; i > -1; i -= 1) {
if (ary[i] && func(ary[i], i, ary)) {
break;
}
}
}
}
eachReverse的ary是一个scripts()方法返回的数组。所以接下来去看看scripts方法。scripts方法取到html上所有的script标签.
function scripts() {
return document.getElementsByTagName('script');
}
通过script取到data-main属性的值。我们可以看到dataMain变量的值就是address.html中data-main属性的值。
接下来的操作都是对url地址的一些处理.通过src.pop()取得mainScript的值为address.
再将地址拼接起来取得子目录。可以看到subPath少了前面的/address目录,subPath被赋值给了cfg.baseUrl属性。
jsSuffixRegExp = /\.js$/, //Strip off any trailing .js since mainScript is now
//like a module name.
//剥去任何.js结尾的mainScript,使得它看起来像一个模块的名称
mainScript = mainScript.replace(jsSuffixRegExp, '');
通过正则匹配任何已.js结尾的文件。例如上面的address.html的data-main如果变成:xxxxx/address.js ,这里就会把.js给替换掉,如同注释中字面意义的“模块化”。
到这里的话,对data-main的处理算完结了。正如data-main是我们的主模块,address.html的主模块就是deps里的address。
但是要说一点的就是这里的cfg对象是要在req({});初始化执行上下文以后才会需要用到。这里只是按照我们正常思维打断点先想到的。
2.js里面怎么跑
注释上写到这里是程序的主入口,相当于构造函数,那我们就来看一下。
/**
* Main entry point.主入口
*
* If the only argument to require is a string, then the module that
* is represented by that string is fetched for the appropriate context.
*
* If the first argument is an array, then it will be treated as an array
* of dependency string names to fetch. An optional function callback can
* be specified to execute when all of those dependencies are available.
*
* Make a local req variable to help Caja compliance (it assumes things 创建一个局部req变量去帮助caja compliance,这个caja貌似说的是一个google的caja库,类似创建了一个虚拟的iframe,并且给一个短名称的局部作用域去使用。
* on a require that are not standardized), and to give a short
* name for minification/local scope use.
*/
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 deps是一个配置对象
config = deps;
if (isArray(callback)) {
// Adjust args if there are dependencies
deps = callback;
callback = errback;
errback = optional;
} else {
deps = [];
}
} if (config && config.context) {
contextName = config.context;
} context = getOwn(contexts, contextName);
if (!context) {
context = contexts[contextName] = req.s.newContext(contextName);
} if (config) {
context.configure(config);
} return context.require(deps, callback, errback);
};
在随后的代码中,执行了req并且传入一个空对象,这里就创建了req这个函数执行的上下文。
//Create default context.
req({});
这里用到了getOwn函数,getOwn要配合hasProp使用。先检查是否包含实例属性,如果包含的话就将属性赋值到目标对象。
function hasProp(obj, prop) {
return hasOwn.call(obj, prop);
} function getOwn(obj, prop) {
return hasProp(obj, prop) && obj[prop];
}
因为context为false,所以newContext进行了初始化。
s = req.s = {
contexts: contexts,
newContext: newContext
};
newContext的代码非常的多,差不多1500行左右。
newContext大致结构如下:
1.一些工具方法:例如trimDots。
2.处理模块的方法:例如normalize等
3.创建并保存了require的运行环境:context对象中的方法
4.创建了require的模块:Module构造函数
这里context对象调用了makeRequire方法。
context.require = context.makeRequire();
return context;
//简化后的代码,可以很明显的看出,为了形成闭包
makeRequire:function(){
function localRequire(){
//TODO
return localRequire;
}
return localRequire;
}
通过一个mixin方法实现了属性拷贝。
/**
* Simple function to mix in properties from source into target, 简单的方法把源对象的属性混合进目标对象中,仅在目标对象并没有相同属性名称的情况下
* but only if target does not already have a property of the same name.
*/
function mixin(target, source, force, deepStringMixin) {
if (source) {
eachProp(source, function (value, prop) {
if (force || !hasProp(target, prop)) {
if (deepStringMixin && typeof value === 'object' && value &&
!isArray(value) && !isFunction(value) &&
!(value instanceof RegExp)) { if (!target[prop]) {
target[prop] = {};
}
mixin(target[prop], value, force, deepStringMixin);
} else {
target[prop] = value;
}
}
});
}
return target;
}
最后返回的target,也就是我们localRequire,添加了4个属性,这里我们可以看出来,它是返回了函数localRequire的闭包。
又给localRequire这个闭包再添加了一个属性,undef
并将闭包赋值给context.require。随后返回context这个对象。
然后我们会进入configure这个方法,因为第一次初始化是传入的一个空对象,所以这里对配置的处理并没有什么实际意义,我们暂且略过。在第二次有具体参数传入了再具体说明。
最后将在context对象中维护的localRequire闭包执行并返回。
return context.require(deps, callback, errback);
我们会碰到nextTick这样一个方法,req.nextTick将匿名函数添加到事件队列中去,异步的去执行它,而这里的匿名函数的功能就是去异步的加载require的模块。但是为何这里与前一次异步延时设置为4,我觉得1,2,3应该都是可以的,这里不是很清楚!如果有朋友了解,可以解释一下
不过这里的注释还是很好笑的:如果有比setTimeout更好的方法,那么就去重写它。然后用的名称叫nextTick,就是在Node中为了解决setTimeout存在问题的方法。大家有兴趣的话可以去看看《异步编程》。
/**
* Execute something after the current tick
* of the event loop. Override for other envs
* that have a better solution than setTimeout.
* @param {Function} fn function to execute later.
*/
req.nextTick = typeof setTimeout !== 'undefined' ? function (fn) {
setTimeout(fn, 4);
} : function (fn) { fn(); };
继续往下走,我们看到了通过mixin方法添加到闭包的4个属性,这里把这4个属性给暴露给了外层的req对象。
//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);
};
});
随后会执行我前面提到的处理data-main这块的代码。当所有的准备工作做好了以后,
在这里就将我们前面通过data-main拿到的cfg对象传进去。
//Set up with config info.
req(cfg);
3.小结一下
req({}) => req(cfg);
这一段流程走过以后,我们发现最大的改变就是contexts这个对象。
=>
而这些改变最重要的目的就是创建一个适合require运行的上下文环境。当然通过makeRequire创建的闭包函数ocalRequire,它也是不同的,因为后面的逻辑不同,传入的参数不同,形成了不同的闭包。
这几天require读下来,感觉没那么好懂,果然还是水平不够,先好好消化一下。下次再来继续啃.
【源码学习】之requirejs的更多相关文章
- 【iScroll源码学习04】分离IScroll核心
前言 最近几天我们前前后后基本将iScroll源码学的七七八八了,文章中未涉及的各位就要自己去看了 1. [iScroll源码学习03]iScroll事件机制与滚动条的实现 2. [iScroll源码 ...
- Java集合专题总结(1):HashMap 和 HashTable 源码学习和面试总结
2017年的秋招彻底结束了,感觉Java上面的最常见的集合相关的问题就是hash--系列和一些常用并发集合和队列,堆等结合算法一起考察,不完全统计,本人经历:先后百度.唯品会.58同城.新浪微博.趣分 ...
- jQuery源码学习感想
还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码, ...
- MVC系列——MVC源码学习:打造自己的MVC框架(四:了解神奇的视图引擎)
前言:通过之前的三篇介绍,我们基本上完成了从请求发出到路由匹配.再到控制器的激活,再到Action的执行这些个过程.今天还是趁热打铁,将我们的View也来完善下,也让整个系列相对完整,博主不希望烂尾. ...
- MVC系列——MVC源码学习:打造自己的MVC框架(三:自定义路由规则)
前言:上篇介绍了下自己的MVC框架前两个版本,经过两天的整理,版本三基本已经完成,今天还是发出来供大家参考和学习.虽然微软的Routing功能已经非常强大,完全没有必要再“重复造轮子”了,但博主还是觉 ...
- MVC系列——MVC源码学习:打造自己的MVC框架(二:附源码)
前言:上篇介绍了下 MVC5 的核心原理,整篇文章比较偏理论,所以相对比较枯燥.今天就来根据上篇的理论一步一步进行实践,通过自己写的一个简易MVC框架逐步理解,相信通过这一篇的实践,你会对MVC有一个 ...
- MVC系列——MVC源码学习:打造自己的MVC框架(一:核心原理)
前言:最近一段时间在学习MVC源码,说实话,研读源码真是一个痛苦的过程,好多晦涩的语法搞得人晕晕乎乎.这两天算是理解了一小部分,这里先记录下来,也给需要的园友一个参考,奈何博主技术有限,如有理解不妥之 ...
- 我的angularjs源码学习之旅2——依赖注入
依赖注入起源于实现控制反转的典型框架Spring框架,用来削减计算机程序的耦合问题.简单来说,在定义方法的时候,方法所依赖的对象就被隐性的注入到该方法中,在方法中可以直接使用,而不需要在执行该函数的时 ...
- ddms(基于 Express 的表单管理系统)源码学习
ddms是基于express的一个表单管理系统,今天抽时间看了下它的代码,其实算不上源码学习,只是对它其中一些小的开发技巧做一些记录,希望以后在项目开发中能够实践下. 数据层封装 模块只对外暴露mod ...
- leveldb源码学习系列
楼主从2014年7月份开始学习<>,由于书籍比较抽象,为了加深思考,同时开始了Google leveldb的源码学习,主要是想学习leveldb的设计思想和Google的C++编程规范.目 ...
随机推荐
- 张高兴的 UWP 开发笔记:定制 ContentDialog 样式
我需要一个背景透明的 ContentDialog,像下图一样.如何定制?写了一个简单的示例(https://github.com/ZhangGaoxing/uwp-demo/tree/master/C ...
- 一次安装rpcbind失败引发的思考
问题: yum install rpcbind -y 出现如下错误: Error -.el6.x86_64 error: %pre(rpcbind--.el6.x86_64) scriptlet fa ...
- [.net 面向对象程序设计深入](8)认识.NET Core
[.net 面向对象程序设计深入](8)认识.NET Core 1,概述 .NET 经历14年,在Windows平台上的表现已经相当优秀,但是“跨平台.开源”却是其痛点,从16年开 ...
- require include php5中最新区别,百度上好多错的。
二者报错机制不同,include是warning 继续执行程序,require会报致命错误,中断程序运行. 前者有返回值,后者则没有. 注意了,php5里有一个区别没了,之前说的是require是无条 ...
- Hibernate原理、配置及单表操作
一.Hibernate的配置文档 其中:hbm2ddl.auto中的create表示每次修改数据的时候都会删除原有的表,生成新的表结构,原有的数据不再存在:update表示在原有数据的基础上进行更新, ...
- QTP自动化测试框架课程的目标
QTP自动化测试框架课程的目标 随着技术发展演变,qtp自动化测试工具有逐渐被其他工具和技术替换的趋势,所以我们三个POPTEST合伙人决定把qtp自动化测试的一套课程开放免费,这套qtp自动化测试课 ...
- 手机交互应用服务(状态栏提示信息Notifications)
官方的一个简单的例子: NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(this) .setSmallIcon ...
- JavaScript基础学习(五)—其他引用类型
JavaScript定义了两个内置对象: Global和Math. 一.Global对象 1.URI编码方法 Global对象的encodeURI()和encodeURICompo ...
- 关于generator异步编程的理解以及如何动手写一个co模块
generator出现之前,想要实现对异步队列中任务的流程控制,大概有这么一下几种方式: 回调函数 事件监听 发布/订阅 promise对象 第一种方式想必大家是最常见的,其代码组织方式如下: fun ...
- Tensorflow学习笔记---0--TensorBoard
运行mnist_with_summaries学习TensorBoard时,由于需要GPU支持,运行窗口报错:Couldn't open CUDA library cupti64_80.dll 解决办法 ...