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整个配置心得
个人整合心得,还望指正
随机推荐
- Oracle-11g 基于 NBU 的 rman 冷备份及恢复
html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", "微软雅 ...
- 大大维的贪吃蛇v1
虽然本人一直是个免费的游戏测试员(/手动滑稽),但一直有着一个游戏架构师的梦想.正如马爸爸所说,梦想还是要有的,万一实现了呢? 这些天放寒假,有些空闲时间,就想着做一个简单的游戏机.能达到小时候十几块 ...
- web前端 兼容性问题
1:position属性使用过多或使用位置不恰当引起滚动时页面错乱 浏览器环境:ie7 position:relative; 网页上最直接表现就是极具破坏性的滚动错位,问题产生来自ie7自身渲染解析出 ...
- jQuery --checkbox全选和取消全选简洁高效的解决办法
最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...
- swift2.0 字符串,数组,字典学习代码
swift 2.0 改变了一些地方,让swift变得更加完善,这里是一些最基本的初学者的代码,里面涉及到swift学习的最基本的字符串,数组,字典和相关的操作.好了直接看代码吧. class View ...
- Windows程序员必须知道的字符编码和字符集
字符编码 (Character encoding) 在存储和传递文本过程中,为了使得所有电脑都能够正确的识别出文本内容,需要有一个统一的规则. 2. 字符集 (Character Set) ) 一般 ...
- jQuery的拾色器
代码如下 1.js <link href="css/farbtastic.css" rel="stylesheet" /> <script t ...
- 什么是Bootstrap?
简介 - 框架:库 lib library- jQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式- 把大家都需要的功能预先写好到一些文件 这就是一个框架- Bootstrap 让我们的 ...
- DataTable && SqlDataReader帮助理解小程序
// 2015/07/08 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
- java8-lamba表达式的使用-遁地龙卷风
(-1)前言 学习lamba表达式是十分重要的,你会发现java变的可爱多了. (0)函数式接口 只有一个方法的接口称为函数式接口 JButton jButton = new JButton(&quo ...