requireJS的配置心得
1、html页面中如果同时存在data-main和require()和配置(config中的baseUrl)
,那么定义根路径 baseUrl > data-main > index.html 但是data-main和index中的require也都会执行
2、data-main的入口问题:
a. 首先的问题是你在main.js中所设置的脚本是异步加载的。所以如果你在data-main所指的js页面中配置了其它JS加载,则html主页面则不能保证它们所依赖的JS已经加载成功。
3、配置路径paths所导致的问题
当你paths:{
"h":"modules/header",
"f":"modules/footer"
} 的时候,如果这个配置被加载后,如果你在访问配置后的文件(指的是js文件),第一次访问的路径非常关键
为什么说关键?
因为此时的这个js文件已经被路径“锁定”
例如访问 modules/header/header.js文件
a: 如果第一次用h/header.js访问的话,那么此时的header.js文件的路径被h/header.js锁定,再想访问的话就只能通过这条路径访问,
modules/header/header.js访问会报错。
b: 如果第一次用modules/header/header.js访问该js文件的话,那么即使这个文件被配置了,那么h/header.js也将访问不到这个js文件(但是可以通过h访问modules/header文件夹下面的js文件,如module/header/skin.js文件)
4、paths和map联合使用导致的问题
eg:如本文件夹中的main.js
paths: {
'h': 'modules/header',
'f': 'modules/footer'
}
map: {
'h': {
// 引入jquery10版本
'lib/jquery': 'lib/jquery10'
},
'f': {
'lib/jquery': 'lib/jquery200'
}
,
'modules/header/skin': {
'lib/jquery': 'lib/jquery-1.12.2'
}
}
在以上的两条配置中,虽然将modules/header赋值给了h,但是在后面的代码中想要正确的引入jq10版本必须用h/...的形式,用modules/header的方式不可以(因为我们定义的时候是用h定义的)
5、require([],fn)中[]内文件是异步加载的
require(["mvc","bg/bg","header/header","home/home","foot/foot","bottom/bottom","css!../lib/reset.css"],function(MVC){
MVC.install();
})
//注意:这个中括号里面的文件都是异步加载的,我没有在main.js引入jq,在bg加载时如果也没有传入jquery的话,按理来说它的回调函数是不能用$的,但是试验证明回调函数可以用$,这就是引文它后面的header.js加载到了jquery,requirejs特点加载既执行,所以在全局作用域下就有了$了!!
6、配置中shim的问题
拿作品里的MVCrequire版举例
paths:{
jquery:"../lib/jquery-1.12.2",
mvc:"../lib/MVC"
},
shim:{
mvc:{
exports:"MVC",
deps:[]
}
}
主要看exports这个属性,它暴露的是MVC这个对象(这个对象必须在MVC.js这个文件中存在),
这个MVC这个名不是随便起的,它是把MVC.js中的一个变量MVC作为接口暴露出来的,这样之后再次访问该路径下的MVC.js,就会得到MVC对象
再举一个例子:
shim: {
// 处理jquery文件
'lib/jquery-1.12.2': {
// 定义接口
exports: '$',
// 定义依赖集合
deps: []
}
},
在这个例子中,(main是主入口,header是由main require进来的一个文件)
define(['modules/header/skin', 'lib/jquery-1.12.2'],fn)
如果直接像上面这一行这么引入,会是underfined的,因为jquery的路径(lib/jquery-1.12.2)和名字(jquery,这个是JQ内置暴露的名字)不一样
解决这个问题有两个办法:
a:paths: {
jquery: 'lib/jquery-1.12.2'
}
直接配置这个路径,使他的名字和路径一样
b:还是define(['modules/header/skin', 'lib/jquery-1.12.2'],fn)这样直接引入,不过在引入之前要 shim: {
// 处理jquery文件
'lib/jquery-1.12.2': {
// 定义接口
exports: '$',
// 定义依赖集合
deps: []
}
}
这样的话,只要你路径写对了,访问到这个文件了,它就会把$暴露出来!
还有 这里配置的mvc是一个路径
小提示:想看JQ版本号,用$().jquery
requireJS的配置心得的更多相关文章
- Tesseract 3.04 + VS2013 配置心得(包括静态库版本号和Release版本号)
研究Tesseract也有几个星期了 走了一些弯路 网上有非常多VS2010的配置心得 但没有VS2013的, 找到一篇之后, 又发现会有一些小问题, 这里记录下来, 也为新人提供一些帮助. Tess ...
- mysql+tomcat+spring 配置心得(从0开始搭环境)
前几天公司竞一个标要做个POC,前端AugularJs做mobile界面,后端Spring MVC做Restful API供前端调用. 时间紧急,大家都忙,so我这个不写代码的闲人花一上午配了一套Sp ...
- requirejs的配置
baseUrl : 所有模块的查找根路径. 当加载纯.js文件(依赖字串以/开头,或者以.js结尾,或者含有协议),不会使用baseUrl. 如未显式设置baseUrl,则默认值是加载require. ...
- requireJS基本配置相关
requireJS: (1)实现js文件的异步加载,避免页面失去响应: (2)管理模块之间的依赖性,便于代码的编写和维护. 加载: <script src="js/require.js ...
- Requirejs常用配置和应用
requirejs.require方法冲突 如果加载了多个requirejs脚本,每个requirejs会判断是否浏览器已经实现了require和define方法.如果浏览器已经自带require和d ...
- react-route4 按需加载配置心得
本篇文章主要记录笔者项目中使用 react-route + webpack 做路由按需加载的心得,可能只有笔者一个人看,权当日记了. 很久很久以前,react-route还是2.X和3.X版本的时 ...
- VMware+Fedora20+secureCRT7.0配置心得
VMware10 XX版 下载地址 secureCRT7 XX版 下载地址 做好安装等准备工作,打开Fedora虚拟机: 首先.安装openssh-server yum install openssh ...
- CentOS下samba配置心得(smb和nmb都要启动)
印象中以前多次配置成功过,重新配置就把以前的资料找出来: yum安装 samba samba-client samba-swat,然后配置参见:http://www.cnblogs.com/mchin ...
- SSM整个配置心得
个人整合心得,还望指正
随机推荐
- Java 原型模式
http://www.cnblogs.com/itTeacher/archive/2012/12/02/2797857.html http://www.cnblogs.com/java-my-life ...
- Bootstrap入门(二十三)JS插件1:模态框
Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...
- easyui treegrid实现显示checkbox并能获取到选定值的
闲聊: 小颖最近忙疯了,经常被加班,昨天都要下班了,又提了个需求,虽然写的代码不多只有几行,可是测试环境很难跑通,一会就ie崩溃了,所以弄得小颖最近老是头晕. 也不知道最近是怎么了,一向特别爱吃的小颖 ...
- TimSort算法分析
Timsort是一种混合稳定的排序算法,采用归并排序混合插入排序的设计,在多种真实数据上表现良好. 它基于一个简单的事实,实际中大部分数据都是部分有序(升序或降序)的. 它于2002年由Tim Pet ...
- java 继承的学习(转)
转自:http://www.cnblogs.com/happyframework/p/3332243.html,非常感谢啊 public class test { /** * @param args ...
- keepalived原理
Keepalived的作用是检测服务器的状态,如果有一台web服务器死机,或工作出现故障,Keepalived将检测到,并将有故障的服务器从系统中剔除,同时使用其他服务器代替该服务器的工作,当服务器工 ...
- [Kafka] - Kafka内核理解:Message
一个Kafka的Message由一个固定长度的header和一个变长的消息体body组成 header部分由一个字节的magic(文件格式)和四个字节的CRC32(用于判断body消息体是否正常)构成 ...
- jMeter入门实例
在大家开始看的时候先声明这篇文章不是我写的我只是照着他讲的安装好了,我觉得很有用就想保留下来.分享给大家. 人们对从认识事物都有一个具体到抽象的过程,学习Jmeter也不例外,通过一个实例来进行学习, ...
- wikioi 3132 高精度乘法(FFT)
第一次学FFT,先膜拜一下法法塔大神ORZ 关于FFT的话,有一篇博文特别赞http://z55250825.blog.163.com/blog/static/15023080920143127465 ...
- BZOJ 1085: [SCOI2005]骑士精神(A*算法)
第一次写A*算法(这就是A*?如果这就是A*的话,那不就只是搜索的一个优化了= =,不过h函数如果弄难一点真的有些难设计) 其实就是判断t+h(x)(t为当前步数,h(x)为达到当前状态的最小步数) ...