【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,如需转载请自行联系原作者
相关文章
|
4月前
|
JavaScript 前端开发 Java
面试官:你的项目有什么亮点?我:解决了JS脚本加载失败的问题!
面试官:你的项目有什么亮点?我:解决了JS脚本加载失败的问题!
|
11月前
|
程序员
程序员的自我修养—链接、装载与库--书签目录PDF
程序员的自我修养—链接、装载与库--书签目录PDF
680 0
|
2月前
|
存储 JSON JavaScript
vue整合kitymind百度脑图-引用打包文件方案
vue整合kitymind百度脑图-引用打包文件方案
27 0
|
4月前
|
文字识别 NoSQL 物联网
分享55个C源码源代码总有一个是你想要的
分享55个C源码源代码总有一个是你想要的
31 1
|
4月前
|
开发框架 前端开发 搜索推荐
分享97个框架模板PHP源码,总有一款适合你
分享97个框架模板PHP源码,总有一款适合你
35 2
|
9月前
|
前端开发
前端学习笔记202305学习笔记第二十三天-main.js重构和报错处理1
前端学习笔记202305学习笔记第二十三天-main.js重构和报错处理1
37 0
|
9月前
|
前端开发
前端学习笔记202305学习笔记第二十三天-main.js重构和报错处理2
前端学习笔记202305学习笔记第二十三天-main.js重构和报错处理2
25 0
|
11月前
|
JavaScript 前端开发
全解析 ESM 模块语法,出去还是进来都由你说了算
模块语法是ES6的一个重要特性,它的出现让JavaScript的模块化编程成为了可能。在JavaScript中可以直接使用import和export关键字来导入和导出模块。
128 0
|
JavaScript 知识图谱
修改第三方插件或库的源码经验技巧总结
修改第三方插件或库的源码经验技巧总结
修改第三方插件或库的源码经验技巧总结
|
XML 缓存 Android开发
求知 | Android资源加载的那些事 - 小试牛刀
引言 聊到到 Android 的 资源加载 ,每一个开发同学都会非常熟悉,毕竟 getText() 等, 我们实在用了太多。 那如果此时问你,你知道 它们到底是怎么被加载的,内部会有什么处理吗? 为什么同一个drawable界面更改了透明度,其他界面也会生效?
101 0
求知 | Android资源加载的那些事 - 小试牛刀