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

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

http://www.cnblogs.com/chyingp/p/3677425.html

http://www.cnblogs.com/chyingp/p/requirejs-path-resolve.html

首先以其例子为例：

复制代码

requirejs.config({

baseUrl: 'js'

});

// 依赖lib.js，实际加载的路径是 js/common/lib.js，而lib模块又依赖于util模块('./util')，解析后的实际路径为 js/common/util.js

require(['common/lib'], function(Lib){

Lib.say('hello');

});

复制代码

// 依赖util模块

define(['./util'], function(Util){

return {

say: function(msg){

Util.say(msg);

}

};

});

复制代码

若是变个写法，util的目录结构就变了

复制代码

requirejs.config({

baseUrl: 'js',

paths: {

lib: 'common/lib'

}

});

// 实际加载的路径是 js/common/lib.js

require(['lib'], function(Lib){

Lib.say('hello');

});

复制代码

// util模块解析后的路径为 js/util.js

define(['./util'], function(Lib){

return {

say: function(msg){

Lib.say(msg);

}

};

});

复制代码

我们今天便一起来学习下这个问题

requireJS的basePath

对于baseUrl的解析需要注意，当满足以下条件，将不会相对baseUrl

① 以"/"开头

② 以".js"结尾

③ 包含各种协议

不出现以上条件，设置的path，是相对于baseUrl的

简单requireJS流程

然后我们这里再简单的整理下requireJS这部分的流程：

① 通过require加载主干流程，这里就是我们所谓的入口，以上述代码为例，入口是：

require(['common/lib'], function(Lib){

Lib.say('hello');

});

该代码会在require内部执行过程中，具有第一个依赖项，这个依赖项是'common/lib'，他的键值便是这个了

这里会首先加载器依赖项，common/lib，而此时便会做第一步的解析并且形成一个模块

在模块加载时，会创建一个script标签，并且为其绑定load事件，这里会有第二个事件的触发

② 在加载common/lib模块时，有一个关键点需要注意：

文件加载结束便会马上执行，所以其define方法执行了，并且往globalDefQueue写入了数据

load事件触发，会创建一个requireJS module，这个时候其依赖项会加载

上述虽然与本次讨论的东西无关，却是理解整个require的关键，各位可以去看看

③ context.completeLoad(data.id) =>但是这个时候却发现其有一个依赖项，于是便会先加载器依赖项，这里又会进入，main.js中require的逻辑，即这段代码：

1 //Enable each dependency

2 each(this.depMaps, bind(this, function (depMap, i) {

3 var id, mod, handler;

4 if (typeof depMap === 'string') {

5 //Dependency needs to be converted to a depMap

6 //and wired up to this module.

7 depMap = makeModuleMap(depMap,

8 (this.map.isDefine ? this.map : this.map.parentMap),

9 false,

10 !this.skipMap);

11 this.depMaps[i] = depMap;

12 handler = getOwn(handlers, depMap.id);

13 if (handler) {

14 this.depExports[i] = handler(this);

15 return;

16 }

17 this.depCount += 1;

18 on(depMap, 'defined', bind(this, function (depExports) {

19 this.defineDep(i, depExports);

20 this.check();

21 }));

22 if (this.errback) {

23 on(depMap, 'error', bind(this, this.errback));

24 }

25 }

26 id = depMap.id;

27 mod = registry[id];

28 //Skip special modules like 'require', 'exports', 'module'

29 //Also, don't call enable if it is already enabled,

30 //important in circular dependency cases.

31 if (!hasProp(handlers, id) && mod && !mod.enabled) {

32 context.enable(depMap, this);

33 }

34 }));

这是非常关键的一段代码，无论里面的depcount还是其中的on defined事件点注册皆十分关键

从这里开始会加载util相关资源，于是util进入了相关加载流程了，这也是小卡关注的地方

但是这里有一个不一样的地方是，util模块时具有parentModuleMap的，而common/lib不具有

这里util与lib有一个映射关系lib->util，所以util的parentName就是common/lib

这个时候就到了解析URL这个步骤了

//name=>./util; parentName=>common/lib

normalizedName = normalize(name, parentName, applyMap);

我们要做的事情就是解析这个地址

核心代码

PS：我看requireJS版本，又老了，他的代码又有更新啊！！！

上面这段代码是一个关键

首先他会将common/lib的目录解析出来，这里是common（'one/two/three.js', but we want the directory, 'one/two' ）

我们这里首次就直接返回了，这里返回的是common/util

若是我们换一个写法，会同样执行上面逻辑，最后却有所不同，因为这个时候parent的common不见了！

这个时候便会执行返回util字符串，所以这里两个地址便会有所不同：

main.js=>require(['common/lib'], function (Lib)=>common/util

main.js=>require(['lib'], function (Lib)=>util

main.js=>require(['a/b/c/lib'], function (Lib)=>a/b/c/util

这里util是相对于父级的目录，这个是其地址变化的主要原因

所以，现在关于小卡的问题应该得到了解决，至于其map映射关系是如何形成的，这个话题就更加深了

小钗requireJS也是初学，很多不懂，不知是不是解决了小卡的问题，这里提出来各位高手一起看看，有误请提出。

本文转自叶小钗博客园博客，原文链接http://www.cnblogs.com/yexiaochai/p/3768570.html，如需转载请自行联系原作者

【requireJS路径加载】与程序员小卡的交流相关推荐

程序员小sister的烦恼_快速上手大数据ETL神器Kettle(xls导入mysql)
我正在参加年度博客之星评选,请大家帮我投票打分,您的每一分都是对我的支持与鼓励. 2021年「博客之星」参赛博主:Maynor大数据 https://bbs.csdn.net/topics/60395 ...
requirejs加载顺序_【requireJS源码学习03】细究requireJS的加载流程
前言这个星期折腾了一周,中间没有什么时间学习,周末又干了些其它事情,这个时候正好有时间,我们一起来继续学习requireJS吧还是那句话,小钗觉得requireJS本身还是有点难度的,估计完全吸收 ...
【Android 插件化】基于插件化的恶意软件的加载策略分析 ( 自定义路径加载插件 | 系统路径加载插件 | 用户同意后加载插件 | 隐藏恶意插件 )
文章目录一.自定义路径加载插件二.系统路径加载插件三.用户同意后加载插件四.隐藏恶意插件一.自定义路径加载插件插件化应用中 , 宿主应用加载插件 APK , 需要获取该插件 APK 文 ...
总结过去10年的程序员生涯，给程序员小弟弟小妹妹们的一些总结性忠告
展望未来,总结过去10年的程序员生涯,给程序员小弟弟小妹妹们的一些总结性忠告走过的路,回忆起来是那么曲折,把自己的一些心得体会分享给程序员兄弟姐妹们,虽然时代在变化,但是很可能你也会走我已经做过的 ...
java 根据类名示例化类_如何使用示例从Java中的类路径加载资源
java 根据类名示例化类 Java中的类路径不仅用于加载.class文件,而且还可以用于加载资源,例如属性文件,图像,图标,缩略图或任何二进制内容. Java提供了API来将这些资源读取为Input ...
如何使用示例从Java中的类路径加载资源
Java中的类路径不仅用于加载.class文件,而且还可以用于加载资源,例如属性文件,图像,图标,缩略图或任何二进制内容. Java提供了API来将这些资源读取为InputStream或URL. 假设 ...
【OS学习笔记】十实模式:实现一个程序加载器-程序加载器如何将用户程序加载到内存并执行
上一篇文章学习了以下内容: 用一种不同的分段方法,从另一个不同的的角度理解处理器的分段内存访问机制使用循环和条件转移指令来优化主引导扇区代码点击链接查看上一篇文章:点击链接查看对于主引导扇区部分 ...
RequireJS的加载、初始化等等 - 代码格式篇
文章目录 RequireJS的加载.初始化,设置的方式有好几种. 一.格式二.加载.初始化 RequireJS的加载.初始化,设置的方式有好几种. 一.格式要求格式如下 // 1. 要求格式如下 ...
展望未来，总结过去10年的程序员生涯，给程序员小弟弟小妹妹们的一些总结性忠告
展望未来,总结过去10年的程序员生涯,给程序员小弟弟小妹妹们的一些总结性忠告走过的路,回忆起来是那么曲折,把自己的一些心得体会分享给程序员兄弟姐妹们,虽然时代在变化,但是很可能你也会走我已经做过的1 ...
ZYNQ7020--动态加载CPU1程序＜1＞
配合食用"ZYNQ7020--AMP下裸机程序开发 <2>" 1.实验目标 CPU0运行petalinux,CPU1运行裸机程序.CPU0启动后,可动态加载CPU1程序 ...

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

【requireJS路径加载】与程序员小卡的交流相关推荐

最新文章

热门文章