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整个配置心得
个人整合心得,还望指正
随机推荐
- Flex性能调优相关的一些总结
1.Performace包含4点:(1)Latency反应时间(2)Scalability:可伸缩性(3)Reliablity:稳定性(4)Availability:可用性2.运行时生命周期:Flex ...
- ORACLE的Dead Connection Detection浅析
在复杂的应用环境下,我们经常会遇到一些非常复杂并且有意思的问题,例如,我们会遇到网络异常(网络掉包.无线网络断线).客户端程序异常(例如应用程序崩溃Crash).操作系统蓝屏.客户端电脑掉电.死机重启 ...
- 关于在官网上下载Eclipse遇到的问题!!
首先Eclipse是什么? Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境. 幸运的是,Eclipse 附带了一 ...
- 告别被拒,如何提升iOS审核通过率(下篇)——应用内容检查大法与提审资源检查大法
WeTest 导读 之前的<告别被拒,如何提升iOS审核通过率(上篇)>分享了客户端检查的相关要点,本篇会给大家介绍有关应用内容的检查项和提审资源相关检查项要点. 应用内容检查大法 苹果对 ...
- JavaScript中this的指向问题
this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑 ...
- CodeForces 446B
DZY Loves Modification time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- 私有云存储搭建(owncloud)
第一步.搭建LAMP(基于linux7.1.1503) 1 配置yum(网络加本地,下面为网络) [vault.centos.org_7.1.1503_os_x86_64_] name=added f ...
- 一个web应用的诞生--使用模板
经过了第一章的内容,已经可以做出一些简单的页面,首先用这种方式做一个登录页面,首先要创建一个login的路由方法: @app.route("/login",methods=[&qu ...
- Accessibility辅助功能--一念天堂,一念地狱
0x00什么是Accessibility(辅助功能) 考虑到部分用户不能很好地使用Android设备,比如由于视力.身体.年龄方面的限制,造成阅读内容.触控操作.声音信息等方面的获取困难,Androi ...
- 地图学与GIS制图的基础理论(二)
利用GIS技术进行地图制图,其最终目标还是需要回到地图学中去.地图学中关于地图制作的经典要求,有以下几点: 地图必须要与现实相符,符合人类的感知 这点是地图最基本的一条,地图的每一个要素展现的都是跟现 ...