RequireJS 2.0初探
就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0。随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升级到了2.0.1。此次变化较大,代码也进行了重构,层次更清晰可读。功能上主要变化如下:
1,延迟模块的执行。
这是一个很大变化,以前模块加载后factory立马执行。性能上肯定有一些损耗。2.0修改实现,再没人诟病AMD的模块是立即执行的。现在也可以等到require的时候才执行。
2,config增加了shim,map,module,enforceDefine。
shim参数解决了使用非AMD方式定义的模块(如jQuery插件)及其载入顺序。使用shim参数来取代1.0版本的order插件。其实在1.0版本中就曾经有人开发过use和wrap插件来解决此类问题。考虑到很多开发者有此类需求(比如某些JS模块是较早时候其他人开发的,非AMD方式)此次2.0版本直接将其内置其中。
下面是一个使用jQuery插件形式配置的参数。我们知道jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使用define定义的模块。而jQuery插件都依赖于jQuery,即在require插件时得保证jQuery先下载下来。可以如下配置
1
2
3
4
5
6
|
require.config({ shim: { 'jquery-slide' : [ 'jquery' ] } }); require([ 'jquery-slide' ]); |
这时会保证先下载jquery.js,然后再下载jquery-slide.js。
map参数用来解决同一个模块的不同版本问题,这一灵感来自于Dojo的packageMap。有这样的场景:开发初期使用了的jquery-1.6.4,后期升级到了1.7.2。但担心有些依赖jquery-1.6.4的代码升级到1.7.2后有问题。因此保守的让这部分代码继续使用1.6.4版本。这时map参数将派上用场。
假如A,B模块中使用了jquery-1.6.4.js,C,D模块中使用了jquery-1.7.2.js。如下
1
2
3
4
5
6
7
8
9
10
11
12
|
requirejs.config({ map: { 'A' : { 'jquery' : 'jquery-1.6.4' }, 'B' : { 'jquery' : 'jquery-1.7.2' } } }); require([ 'A' ]); // download jquery-1.6.4.js require([ 'B' ]); // download jquery-1.7.2.js |
这时require(['A'])将会下载jquery-1.6.4.js,require(['B'])会下载jquery-1.7.2.js。模块“A”如果写成“*”则表示除了B模块使用jquery-1.7.2之外其它模块都使用jquery-1.6.4。map参数解决了模块的各个版本问题,很好的向下兼容了老代码。
config参数用来给指定的模块传递一些有用的数据。如下
1
2
3
4
5
6
7
|
require.config({ config: { 'A' : { info: {name: 'jack' } } } }); |
使用A的模块中可以通过A.config().info获取到该数据信息。如
1
2
3
4
|
require([ 'A' ], function (A) { var info = a.config().info; console.log(info); }); |
enforceDefine用来强制模块使用define定义,默认为false。如underscore不再支持AMD后,其代码移除了define。此时如果仍然使用requirejs来载入它,它就是普通的js文件了。此时如果enforceDefine设为true,虽然underscore.js能下载但requirejs会报错。如
1
2
3
4
5
6
|
require.config({ enforceDefine: true }); require([ 'underscore' ], function (_){ console.log(_) }) |
错误信息
4,require函数增加了第三个参数errbacks。
很明显该函数指模块文件没有载入成功时的回调。这个也是应一些开发者得要求而增加,其中还包括另一个著名AMD的实现curl的作者John Hann。
1
2
3
4
5
|
require([ 'b' ], function (){ console.log( 'success' ); }, function (err){ console.log(err) }); |
err会给出一些出错提示信息。
5,更强大的paths参数。
requirejs 1.x版本中已经有paths参数,用来映射模块别名。requirejs2.0更加强大,可以配置为一个数组,顺序映射。当前面的路径没有成功载入时可接着使用后面的路径。如下
1
2
3
4
5
6
7
8
9
10
11
12
|
requirejs.config({ enforceDefine: true , paths: { jquery: [ 'lib/jquery' ] } }); require([ 'jquery' ], function ($) { }); |
当google cdn上的jquery.min.js没有获取时(假如google宕机),可以使用本地的lib/jquery.js。
6,在模块载入失败回调中可以使用undef函数移除模块的注册。
这个灵感来自dojo AMD loader,RequireJS取名undef。如下
1
2
3
4
5
6
7
8
|
require([ 'jquery' ], function ($) { //Do something with $ here }, function (err) { var failedId = err.requireModules && err.requireModules[0]; if (failedId === 'jquery' ) { requirejs.undef(failedId); } }); |
7,删除了jQuery domready相关代码。
这次没人再诟病RequireJS和jQuery耦合的太紧密。
8,删除了priority,packagePaths,catchError.define。
这几个参数已经有相应的替代品。
最后需要注意的是,虽然功能增加了不少。但代码量却减少了近60行。主要是去掉了jQuery ready相关代码。另外newContext函数依然有1000多行。
RequireJS 2.0初探的更多相关文章
- RequireJS 2.0 API之配置项
转载自http://blog.csdn.net/kevinwon1985/article/details/8155267 RequireJS 把每一个依赖项当做一个script标签,使用 head.a ...
- RequireJS源码初探
前两天跟着叶小钗的博客,看了下RequireJS的源码,大体了解了其中的执行过程.不过在何时进行依赖项的加载,以及具体的代码在何处执行,还没有搞透彻,奈何能力不够,只能先记录一下了. RequireJ ...
- RequireJS 2.0 正式发布(转)
RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升级到了2.0 ...
- RequireJS 2.0 新特性
就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升 ...
- RequireJS 2.0 正式发布
就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升 ...
- Swift 2.0初探
转眼间,Swift已经一岁多了,这门新鲜.语法时尚.类型安全.执行速度更快的语言已经渐渐的深入广大开发者的心. 今年6月,一年一度的WWDC大会如期而至,在大会上Apple发布了Swift 2.0,引 ...
- Swift 2.0初探:值得注意的新特性
转眼间,Swift已经一岁多了,这门新鲜.语法时尚.类型安全.执行速度更快的语言已经渐渐的深入广大开发者的心.我同样也是非常喜爱这门新的编程语言. 今年6月,一年一度的WWDC大会如期而至,在大会上A ...
- angular2 学习笔记 ( 4.0 初探 )
目前是 4.0.0-rc.2. 刚好有个小项目要开发,就直接拿它来试水啦. 更新 cli 到最新版, 创建项目, 然后 follow https://github.com/angular/angula ...
- 安全声明标记语言SAML2.0初探
目录 简介 SAML的构成 SAML的优势 SAML是怎么工作的 SP redirect request; IdP POST response SP POST Request; IdP POST Re ...
随机推荐
- salt搭建lamp架构
install_httpd: pkg.installed: - name: httpd httpd_running: service.running: - name: httpd - enable: ...
- 【BZOJ1976】能量魔方 [最小割]
能量魔方 Time Limit: 10 Sec Memory Limit: 64 MB[Submit][Status][Discuss] Description 小C 有一个能量魔方,这个魔方可神奇 ...
- CCCC练习即感
字符串进行初始化时不能通过char a[10]={'\0'}来简单进行,写循环或者memset,亲测有效,以及初始化分好情况,用空格还是'\0',别乱搞. 有一个有意思的题,连续因子,从2开始,依次向 ...
- 【洛谷 P1667】 数列 (贪心)
题目链接 对于一个区间\([x,y]\),设这个区间的总和为\(S\) 那么我们在前缀和(设为\(sum[i]\))的意义上考虑到原操作其实就是\(sum[x−1]+=S\) , \(sum[x]+S ...
- java中 快捷键输入System.out.println();
syso 然后:alt+ /(就是问号键)
- JVM指令的使用深入详解
原文地址:https://www.jb51.net/article/155293.htm 一.未归类系列A 此系列暂未归类. 指令码 助记符 ...
- python读取doc
import os, time, fnmatch from docx import Document class search: def __init__(self, path, search_str ...
- 定制一个支持中英文的简单LaTex模板
平常写汇报文档什么的,word排版有时还是比较费劲,遂定制一个简单的LaTex模板,中文默认为宋体,英文为LaTex默认字体,支持彩色高亮展示,有目录书签,有页眉展示,大致如下: LaTex代码如下: ...
- PHPExcel 使用(1)
最近在项目中要用到PHP生成EXCEL,上网找了一下,发现PHPEXCEL挺不错,用了一下,感觉还行,就是设置单元格格式的时候比较麻烦,总体来说功能还是比较强大的,还有生成PDF什么的,发一个实例吧 ...
- PLSQL Developer 运用Profiler 分析存储过程性能
最近应公司需要,需要编写ORACLE存储过程.本人新手,在完成存储过程的编写后,感觉需要对存储过程中各个语句的执行时间进行分析,以便 对整个存储过程进行优化. 由于用的是PLSQL Developer ...