一步一步带你分析 requirejs
Posted 暗影侠客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一步一步带你分析 requirejs相关的知识，希望对你有一定的参考价值。
详细源代码一共就2000多行，来看我这篇分析的同学应该都下载下来了，好了，话不多说，开始：
代码的开头就出现3个全局变量： requirejs, require, define
var requirejs, require, define;
(function(global, setTimeout){
balababla......
})(this, (typeof setTimeout === ‘undefined‘ ? undefined : setTimeout)))
require 和 define 大家应该都知道上干什么的，说实话，我是不知道的，在分析代码的时候，我从来也没用过这个框架，就听过AMD，就来直接看源码了。
如果你也不是很清楚，这2个变量是干什么的，我就来简单介绍一下，懂得的同学要是发现我说错了，希望指点我也一下。
主页面 index.html:
注意src是引入我们的requirejs库， data-main：就是我们第一次用requrie的地方：
<html>
<head>
<title></title>
</head>
<body>
<script src="require.js" type="text/javascript" data-main="main.js"></script>
</body>
</html>
main.js:
这里2个代码块都是依赖require的：
（1）require.config：配置
（2）requrie(); 加载需要的函数，注意里面的 [‘name‘, ‘say‘]，其实都是文件名，它们都在./js/ 目录下，具体看conifg
require.config({
baseUrl: ‘‘,
paths: {
‘nameDep‘: ‘js/nameDep‘,
‘say‘: ‘js/say‘,
‘name‘: ‘js/name‘
},
shim: {
‘name‘: {
deps: [‘nameDep‘]
}
}
});
require([‘name‘, ‘say‘], function (name, say) {
say(name);
});
./js/name.js 和 ./js/say.js
//name
define([‘‘], function () {
return ‘测试‘;
});
//say
define([], function () {
return function (name) {
console.log(name);
};
});
最后注意在config中有个skim，这里面也是定义js文件的，只是由于他可能不符合AMD加载的规范
./js/nameDep.js
console.log("nameDep.js")
--------------------------------------分割线-------------------------------------------------------------------------
以上是关于一步一步带你分析 requirejs的主要内容，如果未能解决你的问题，请参考以下文章
面试必备透过源码角度一步一步带你分析 ArrayList 扩容机制