requireJS目录
前言
对于像我这种requireJS初学者而言,requireJS最难理解的部分应该是它的路径问题。晚上随便折腾了一下,算是稍微理清了这个目录问题吧。
requireJS学习网址:requireJS中文网 requireJS英文网
requireJS简介
随着前端代码量的日益庞大和复杂的结构,以及越来越多框架的出现,如何有效的管理你的代码,已经成为一个团队亟待解决的问题。而RequireJS的目标是鼓励代码的模块化,它使用了不同于传统script标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。RequireJS以一个相对于baseUrl的地址来加载所有的代码。下图是随便写的一个小的DEMO文件目录:
baseUrl模块查找的根路径
首先在index.html页面中引入requireJS文件
<script src="js/lib/require.js" data-main="js/entry"></script>
或者
<script src="js/lib/require.js"></script>
引入requireJS文件,可以需要接下来文件的主入口属性data-main,也可以不需要。
无data-main属性
如果没有data-main属性,则baseUrl默认为引入requireJS文件的HTML所处的位置,上述代码中为“wechart/”。
有data-main
如果有data-main属性,则baseUrl默认为data-main属性值中的文件目录,上述中即为“js”。
config中设置
可以在require.config({})中明确设置。
DEMO中把相关的配置写进了主入口文件即entry.js中
require.config({
baseUrl: "js/",
paths: {
jquery: "lib/jquery/jquery-1.7.1"
}
});
baseUrl的目录不是以“/”或者相关协议(如http或https)开头,则默认为相对路径。例如我们把上面baseUrl改成“/js/”,则就变成相对于磁盘的根目录啦。
这里可以看到jquery和a两个文件没有正确加载。原因是目录相对于c盘了。其余模块正常加载原因继续向下看。
上面所说的baseUrl目录,都是只在定义模块时用到的路径。如a.js文件:
define(['jquery'], function($) {
return function() {
$("#test").html("<p>aaa</p>");
}
});
模块a中的文件依赖jquery,需要先加载jquery之后才能执行模块里面的回调函数,而jquery的模块查找完整路径即为entry.js里面的baseUrl+paths配置目录(paths具体配置可参考官网相关介绍),即为**”wechart/js/lib/jquery/jquery-1.7.1.js”。
ps:requireJS内部默认为需要加载的js文件添加后缀名“.js”,所以可以省略相应的后缀名,如果配置中给jquery添加后缀名,则会出现两个”.js”。
对于一个模块加载另一个模块的目录问题
DEMO中我的模块b依赖于模块a:
define(['jquery','my/a'], function($, a) {
a();
console.log("bbb");
});
则模块b加载前加载模块的目录为baseUrl+依赖中定义的目录,上述加载模块a的目录为js/my/a.js。由于模块a的路径也需要根据baseUrl来查找,所以上面baseUrl更改成“/js/”时,模块a也加载出错。
HTML中require相关模块的路径问题
require中相关模块路径查找为baseUrl+require依赖中所给目录
但是,
由于require内部模块加载机制为异步加载,所以相应的baseUrl需区分以下情况
有主入口文件且为配置文件
由于上面叙述过,如果有data-main,且文件里有baseUrl配置,则baseUrl应为配置中的“js/”,但因为requireJS异步加载机制,主入口文件需要在HTML的所有script文件加载后才开始加载,即在require执行加载模块时,相应的主入口文件entry.js尚未被加载。则此时的baseUrl仍为主入口的文件目录。所以HTML中加载模块b时需要使用“../”进入“js/”目录。
DEMO中index.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test">111</div>
<script src="js/lib/require.js" data-main="js/entry/entry"></script>
<script>
require(['../my/b'], function(b) {
console.log("b has been called");
});
</script>
</body>
</html>
无主入口文件
把相应的配置文件代码放在加载模块代码前,则此时的baseUrl即为配置中的目录。相应的HTML代码更改为
<script>
require.config({
baseUrl: "js/",
paths: {
jquery: "lib/jquery/jquery-1.7.1"
}
});
require(['my/b'], function(b) {
console.log("b has been called");
});
</script>
对于无配置文件的情况不利于代码的后期维护,果断省略。。。
requireJS目录的更多相关文章
- RequireJS使用及JS目录规划
1.RequireJS学习文档: http://www.requirejs.cn/ 2.目录规划(参考:ColUdf.vm) 1)一个完整的html,对应一个js文件,模块js在主页面对应的js文件中 ...
- requirejs 使用实例r.js打包
在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...
- hdjs---后盾网requireJS课程
hdjs---后盾网requireJS课程 一.总结 一句话总结: requireJS是js端模块化开发,主要是实现js的异步加载,和管理模块之间的依赖关系,便于代码的编写和维 1.requireJS ...
- AngularJS+requireJS项目的目录结构设想
AngularJS+requireJS项目的目录结构设想 准备用AngularJS + require.js 作为新项目的底层框架,以下目录结果只是一个初步设想: /default 放页面,不过 ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 使用RequireJS并实现一个自己的模块加载器 (一)
RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...
- 使用gulp解决RequireJS项目前端缓存问题(二)
1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...
- 使用gulp解决RequireJS项目前端缓存问题(一)
1.前言 前端缓存一直是个令人头疼的问题,你有可能见过下面博客园首页的资源文件链接: 有没有发现文件名后面有一串不规则的东东,没错,这就是运用缓存机制,我们今天研究的就是这种东西. 先堵为快,猛戳链接 ...
- 【requireJS源码学习01】了解整个requireJS的结构
前言 现在工作中基本离不开requireJS这种模块管理工具了,之前一直在用,但是对其原理不甚熟悉,整两天我们来试着学习其源码,而后在探寻其背后的AMD思想吧 于是今天的目标是熟悉requireJS整 ...
随机推荐
- error: 'Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)'
http://stackoverflow.com/questions/11990708/error-cant-connect-to-local-mysql-server-through-socket- ...
- strcmp()函数-比较字符串的大小、字符串排序
1.比较字符串的大小: 用法:strcmp(字符串1,字符串2),若字符串1>字符串2 则返回1,字符串1<字符串2 则返回 -1,相等返回0. 比较两个字符串的算法是:逐个比较两个串中对 ...
- 解决windows下文件拷贝到ubuntu下文件名乱码的问题
sudo apt-get install convmv 解压zip文件: convmv -f gbk -t utf8 -r --notest *
- Oracle like 里面的通配符 以及regexp_like
关于like后面的条件,Oracle提供了四种匹配模式: 1,% :表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FR ...
- bzoj DZY Loves Math V
Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 509 Solved: 284[Submit][Status][Discuss] Descriptio ...
- 使用DFS求任意两点的所有路径
先上代码: public static void findAllPaths(Integer nodeId,Integer targetNodeId, Map<Integer,ArrayList& ...
- [转]从此爱上iOS Autolayout
原文地址 这篇不是autolayout教程,只是autolayout动员文章和经验之谈,在本文第五节友情链接和推荐中,我将附上足够大家熟练使用autolayout的教程.这篇文章两个月前就想写下来,但 ...
- JAVA EE 学习笔记
http://www.cnblogs.com/kuangdaoyizhimei/category/701794.html http://www.cnblogs.com/liunanjava/p/445 ...
- Debian、Ubuntu 源列表说明
转载:http://forum.ubuntu.org.cn/viewtopic.php?t=366506 概貌: 源列表主文件为 /etc/apt/sources.list,另兼取 /etc/apt/ ...
- SpringBoot拦截器中service或者redis注入为空的问题
原文:https://my.oschina.net/u/1790105/blog/1490098 这两天遇到SpringBoot拦截器中Bean无法注入问题.下面介绍我的思考过程和解决过程: 1.由于 ...