requirejs源码分析: 路径
1. 没有设置baseUrl(一般我们都会设置baseurl)
在没有设置baseUrl时, 默认 baseurl: “./”
当指定data-main时。 <script src="require.js" data-main="js/main.js"></script>. 将从data-main提取目录路径作为 baseurl,这里就是js/. 所有这里需要注意这里不能分成两个<script(一个加载require.js,一个加载main.js)来加载。这样baseurl将会是./加载依赖会可能会变找不到文件了。。。
源码以下:
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.
if (!cfg.baseUrl) {
//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;
}
2. paths设置
源码:
//A module that needs to be converted to a path.
paths = config.paths;syms = moduleName.split('/');
//For each module name segment, see if there is a path
//registered for it. Start with most specific name
//and work up from it.
for (i = syms.length; i > 0; i -= 1) {
parentModule = syms.slice(0, i).join('/');parentPath = getOwn(paths, parentModule);
if (parentPath) {
//If an array, it means there are a few choices,
//Choose the one that is desired
if (isArray(parentPath)) {
parentPath = parentPath[0];
}
syms.splice(0, i, parentPath);
break;
}
}//url 添加baseurl, .js 等
//Join the path parts together, then figure out if baseUrl is needed.
url = syms.join('/');
url += (ext || (/^data\:|\?/.test(url) || skipExt ? '' : '.js'));
url = (url.charAt(0) === '/' || url.match(/^[\w\+\.\-]+:/) ? '' : config.baseUrl) + url;
将依赖字符串作为键, 从config的paths查找对应的键值。 从这里可以看出paths中的键是可以是数组,但也只能取数组第一个元素。 如下这个就是根据lib去paths查找lib,这里lib实际的路径为 js/common/lib.js
requirejs.config({
baseUrl: 'js',
paths: {
lib: 'common/lib'
}
});
require(['lib'], function(){
// do sth
});
path设置为数组
会一个一个加载, 直到成功为至. 这里的失败是服务端报错,不能是服务端自定义404页面那是不行.
当报错时时,会将路径从path中删除, undef(重新初始化一些属性) ,然后重新require当前的ID.
源码:
onScriptError: function (evt) {
var data = getScriptData(evt);
if (!hasPathFallback(data.id)) {
return onError(makeError('scripterror', 'Script error for: ' + data.id, evt, [data.id]));
}
}
function hasPathFallback(id) {
var pathConfig = getOwn(config.paths, id);
if (pathConfig && isArray(pathConfig) && pathConfig.length > 1) {
//Pop off the first array value, since it failed, and
//retry
pathConfig.shift();
context.require.undef(id);
context.require([id]);
return true;
}
}
3. 插件加载
插件名!资源名方法. 示例如下:
require(['text!txt.txt'], function(){
// do sth
});
源码解析: 暂无
requirejs源码分析: 路径的更多相关文章
- requirejs源码分析: requirejs 方法–2. context.require(deps, callback, errback);
上一篇 requirejs源码分析: requirejs 方法–1. 主入口 中的return context.require(deps, callback, errback); 调用的是make ...
- requirejs源码分析: requirejs 方法–1. 主入口
该方法是 主要的入口点 也是最常用的方法. req = requirejs = function (deps, callback, errback, optional) { //Find the ri ...
- requirejs源码分析: config中shim
shim处理的源码: //Merge shim if (cfg.shim) { eachProp(cfg.shim, funct ...
- requirejs源码分析,使用注意要点
本文将深度剖析require.js代码,为了是大家更高效.正确的去使用它,本文不会介绍require的基本使用! 概要 先来一个流程图来概要一下大概流程 在require中,根据AMD(Asynchr ...
- requirejs源码分析: define 方法
define = function (name, deps, callback) { var node, context; //Allow for anonymous modules ...
- requirejs源码分析
- Spring Developer Tools 源码分析:二、类路径监控
在 Spring Developer Tools 源码分析一中介绍了 devtools 提供的文件监控实现,在第二部分中,我们将会使用第一部分提供的目录监控功能,实现对开发环境中 classpath ...
- Require.js 源码分析
本文将简单介绍下个人对require.js的源码分析,简单分析实现原理 一.require加载资源的流程 require中,根据AMD(Asynchronous Module Definition)的 ...
- zookeeper源码分析之五服务端(集群leader)处理请求流程
leader的实现类为LeaderZooKeeperServer,它间接继承自标准ZookeeperServer.它规定了请求到达leader时需要经历的路径: PrepRequestProcesso ...
随机推荐
- java代码格式化
Java source formatting You are probably familiar with the Eclipse hotkeys to automatically format yo ...
- 设计模式中类的关系之组合关系(Composition)
组合也是关联关系的一种特例,它体现的是一种contains-a的关系,这种关系比聚合更强,也称为强聚合:它同样体现整体与部分间的关系,但此时整体与部分是不可分的,它们具有统一的生存期,整体的生命周期结 ...
- UVA11082 Matrix Decompressing 最大流建模解矩阵,经典
/** 题目:UVA11082 Matrix Decompressing 链接:https://vjudge.net/problem/UVA-11082 题意:lrj入门经典P374 已知一个矩阵的行 ...
- OpenCV中Kinect的使用(3)
接OpenCV中Kinect的使用(2),下面内容主要讲述使用OpenNI 控制Kinect 的马达,实现摄像头的上下摆动. 下面是透过OpenNI比较低阶的USB控制介面(XnUSB.h),来做到马 ...
- modelform 对象和model之间的关系
一.modelform的每一个标签对象 for bound_field in form: print('form.model',form.Meta.model) ...
- laravel Lumen邮箱发送配置
Lumen 中配置邮件 https://blog.csdn.net/glovenone/article/details/54344013 Lareval 比 Lumen 多了一个步骤 https:// ...
- yii rule
https://blog.csdn.net/ljfrocky/article/details/46373691 http://www.yiichina.com/tutorial/997 http:// ...
- JS原生追加子节点
var fragment = document.createDocumentFragment(); li = document.createElement('li'); li.className = ...
- "围观"设计模式(7)--创建型之单例模式(Singleton Pattern)
单例模式,也叫单子模式,是一种经常使用的软件设计模式.在应用这个模式时,单例对象的类必须保证仅仅有一个实例存在. 很多时候整个系统仅仅须要拥有一个的全局对象.这样有利于我们协调系统总体的行为.比方在某 ...
- [HTML5&CSS3]Transform具体解释
Transform字面上就是变形,改变的意思. 在CSS3中transform主要包含以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.以下我们 ...