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 ...
随机推荐
- 【Ubuntu安装,ATX基于uiautomator2】之安装步骤
Ubuntu系统下安装uiautomator2步骤: 1.安装命令: pip install --upgrade --pre uiautomator2 但是报错: Command "pyth ...
- 大端BigEndian、小端LittleEndian与字符集编码
BigEndian(大端):低字节在高内存地址 LittleEndian(小端):低字节在低内存地址 也就是看低字节在高内存地址还是低内存地址,也就是看低字节在前还是高字节在前,低字节在前自然是小端, ...
- 用关键字interface定义接口,通过关键字implements来实现接口
[定义]Java中,能够完成特定功能的,由若干属性和方法组织成的,相对独立的属性和方法的集合. [用途]实现类的多继承,以解决Java只能单继承,不支持多继承的问题. [特点] 用关键字interfa ...
- python3 - 闭包
# 定义一个函数def test(number): # 在函数内部再定义一个函数,并且这个函数用到外边函数的变量, # 那么将这个函数以及用到的一些变量称之为 闭包. def text_in(numb ...
- &&和&(||和|)区别
上代码,引出问题 public class Test { private static int j = 0; private static Boolean methodB(int k) { j += ...
- 【转】开发者应该了解的API技术清单
[转载贴] 作为一名开发者,诚然编写代码如同作家提笔挥毫,非常有成就感与乐趣,但同时我也觉得删除代码是件不相伯仲的美事.为什么呢?因为在进行删除工作 时,意味着自己找出了造成干扰的位置,意味着找到了冗 ...
- jetty;tomcat;热部署
[说明]今天上午进行了jetty的插件部署,下午进行了tomcat的插件部署,晚上有其它事情需要回校 一:今日完成 1)搞定插件直接部署到jetty 2)搞定插件直接部署到tomcat 3)了解了一下 ...
- java学习笔记——数据类型及类型转换
数据类型分为: 1.引用类型(字符型); 2.基本数据类型(数值型); 以下为基本数据类型介绍(括号内的数字表示该类型所占据的字节数) a.整型 byte(8) short(16) int(3 ...
- 关于webpack打包js和css
废话不多说,直接贴出代码,大家瞅瞅:其中要引用css的话是要用css-loader.用了之后再webpack.config.js里面配置相应的代码,并且在相应的js文件里面引用即可啦,不知道有哪位大神 ...
- 学习华为云SWR(CCE)服务的使用方法
1.购买CCE服务-完成 SWR:https://www.huaweicloud.com/product/swr.html 2.购买ubuntu机器 https://console.huaweiclo ...