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 ...
随机推荐
- mysql————表类型(存储引擎)的选择
表类型(存储引擎)的选择 7.1 mysql存储引擎概述 插件式存储引擎是mysql数据库最重要的特性之一,用户可以根据应用的需要选择ruhr存储和索引数据,是否使用事务等. InnoDB和BDB提供 ...
- IDEA2017 使用(二)
1.鼠标悬浮在方法上显示api 2.关闭拼写检查 3.自动导入包(存在多个包时需要手动导入) 4.设置方法线
- react 记录:React Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack
前言: react-router-dom 4.4.2 在页面中直接使用 import { Link } from 'react-router-dom' //使用 <Link to={{ path ...
- Python基础(4)_集合、布尔类型
一.集合 集合的作用一:关系运算集合的作用二:去重 定义集合:集合内的元素必须是唯一的:集合内的元素必须是可hash的,也是就不可变类型:集合是无序的 s={'egon',123,'egon','1' ...
- 1552: [Cerc2007]robotic sort
这道题用splay写 先离散化数据保证按题目所述顺序来写 按原序作为键值建树 维护区间最小值去跑 每次将i的位置 和 n的位置x和y找出来后 将x旋转到root y旋转到x的有儿子 这时y的左子树就是 ...
- 【洛谷 P4342】[IOI1998]Polygon(DP)
题目链接 题意不再赘述. 这题和合并石子很类似,但是多了个乘法,而乘法是不满足"大大得大"的,因为两个非常小的负数乘起来也会很大,一个负数乘一个很大的整数会很小,所以我们需要添加一 ...
- bzoj 2120 线段树套平衡树
先吐下槽,改了快一个小时,最后发现是SBT的delete写错了,顿时就有想死的心..... 首先对于这道题,我们应该先做一下他的小问题,bzoj1878,虽然和这道题几乎一点关系没有, 但是能给我们一 ...
- gcc 簡單操作
gcc -c test.c 產出 test.o object file gcc -c test.c -o XXX 產出 XXX object file gcc test.c -o aaa 產出 aaa ...
- 汉字hash问题(转)
一.汉字编码的种类 汉字编码中现在主要用到的有三类,包括GBK,GB2312和Big5. 1.GB2312又称国标码,由国家标准总局发布,1981年5月1日实施,通行于大陆.新加坡等地也使用此编码.它 ...
- discuz自定义生成单页面
在pc端,若要生成一个单页面,有一个比较方便的方法是生成新的专题页,然后diy其中的内容. 不过这种做法有两个缺点 1 url太过冗赘 2 只有一个插入url代码功能,没有文本编辑功能 而且文本框小的 ...