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整个配置心得
个人整合心得,还望指正
随机推荐
- bootstrap 基础表单 内联表单 横向表单
bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...
- Quill编辑器介绍及扩展
从这里进入官网. 能找到这个NB的编辑器是因为公司项目需要一个可视化的cms编辑器,类似微信公众号编辑文章.可以插入各种卡片,模块,问题,图片等等.然后插入的内容还需要能删除,拖拽等等.所以采用vue ...
- Redis系列四(keepalived+lvs搭建负载均衡)
1.安装Keepalived(主备服务器都要安装) 10.8.80.218 主服务器 10.8.80.217 备服务器 10.8.80.200 虚拟IP $ wget http://www.ke ...
- 安装Oracle服务端后配置注册表与PL/SQL
1.流程: 1.安装Oracle客户端(绿色版和安装版均可,建议安装在和Oracle服务端文件夹并行的路径下,例:E:\app\yginuo\product\11.2.0) 2.配置环境变量和注册表( ...
- Python学习--17 访问数据库
实际开发中,我们会经常用到数据库. Python里对数据库的操作API都很统一. SQLite SQLite是一种嵌入式数据库,它的数据库就是一个文件.由于SQLite本身是C写的,而且体积很小,所以 ...
- Android仿微信朋友圈,全文收起功能,附源码
在众多的社交类软件中,朋友圈是必不可少的,可以与好友.同学等分享自己的日常和有意思的事情,在开发社交类App时,朋友圈发表的内容你不可能让他全部显示,全部显示的话用户体验度会非常不好,这时就要用到全文 ...
- python - bilibili(二)出错的解决办法
在获取房间号之前我们先解决上篇文章遗留的bug,即输入的房间号不是数字和对应的房间号不存在而产生的问题. 输入的房间号不是数字: 在python中,你所输入的必定是字符串,虽然你输入的是数字,但是类型 ...
- 【前端】:Dom
前言: 昨天写了篇关于JavaScript的,今天写篇Dom的(插入4个实例),写完之后感觉知识点还不少~ 内容当然会用到[前端]:JavaScript的知识.下篇博客会写关于jQuery~~ 一.D ...
- windows下部署免费ssl证书(letsencrypt)
随着网络的发展,网络安全也越来越重要,对于网站来说,从Http升级到https也是我们要做的首要事情.要实现https,首先我们需要申请一张SSL证书,这篇文章我主要介绍下边这几个方面: 1. SSL ...
- 20130620—ant和java杂学随笔
ant知识点: 1.使用属性定义相对路径的时候,一定要使用location,而不要去使用value 对于<property></property>中location和valu ...