就在前天晚上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版本中就曾经有人开发过usewrap插件来解决此类问题。考虑到很多开发者有此类需求(比如某些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多行。

Require.JS 2.0的更多相关文章

  1. EpiiAdmin 开源的php交互性管理后台框架, 让复杂的交互变得更简单!Phper快速搭建交互性平台的开发框架,基于Thinkphp5.1+Adminlte3.0+Require.js。

    EpiiAdmin EpiiAdmin php开源交互性管理后台框架,基于Thinkphp5.1+Adminlte3.0+Require.js, 让复杂的交互变得更简单!Phper快速搭建交互性平台的 ...

  2. 窥探Vue.js 2.0

    title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...

  3. require.js源码分析

    写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...

  4. require.js基本认识

    基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出 ...

  5. Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告

    1. 关于Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner). 该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuou ...

  6. ASP.NET MVC应用require.js实践

    这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41d6ad.html Require.js是一个支持j ...

  7. Javascript模块化编程之路——(require.js)

    转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...

  8. 在 Ubuntu 14.04/15.04 上配置 Node JS v4.0.0

    大家好,Node.JS 4.0 发布了,这个流行的服务器端 JS 平台合并了 Node.js 和 io.js 的代码,4.0 版就是这两个项目结合的产物——现在合并为一个代码库.这次最主要的变化是 N ...

  9. require.js入门指南(三)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

随机推荐

  1. 【DP专辑】ACM动态规划总结

    转载请注明出处,谢谢.   http://blog.csdn.net/cc_again?viewmode=list          ----------  Accagain  2014年5月15日 ...

  2. Binary Tree Inorder Traversal(转)

    Given a binary tree, return the inorder traversal of its nodes' values. For example: Given binary tr ...

  3. hdu 5106 Bits Problem(数位dp)

    题目链接:hdu 5106 Bits Problem 题目大意:给定n和r,要求算出[0,r)之间全部n-onebit数的和. 解题思路:数位dp,一个ct表示个数,dp表示和,然后就剩下普通的数位d ...

  4. COC+RTS+MOR游戏开发 一(游戏特色分析,和实践)

    本场比赛的临时名称 游戏特色(-):COC风格 ,塔防养成类游戏.          一款史诗般的战斗策略游戏.玩家须要建立村庄,成千上万的网友训练玩家的军队和战斗. 游戏中玩家须要不断的提高军队的作 ...

  5. UVa - The 3n + 1 problem 解读

    这个问题并计算质数了一下相间隔似的.思想上一致. 注意问题: 1 i 可能 大于或等于j -- 这里上传.小心阅读题意,我没有说这个地方不能保证.需要特殊处理 2 计算过程中可能溢出,的整数大于最大值 ...

  6. HDU--3829--Cat VS Dog【最大点独立集】

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=3829 题意:动物园有n条狗.m头猫.p个小孩,每一个小孩有一个喜欢的动物和讨厌的动物.如今动物园要转移一些 ...

  7. WordPress添加评论回复的电子邮件警报通知

    评论回复帖子,主动发送电子邮件通知评论员,这是提高的一大举措的用户体验.倡导孟一直在使用Willin Kan主评论回复电子邮件警报通知码,我相信很多人也使用,假设你没有使用.最好的尝试. 根据自己的需 ...

  8. Dp_F Pku1157

    <span style="color:#000099;">/* F - 简单dp Time Limit:1000MS Memory Limit:10000KB 64bi ...

  9. 深入了解Libgdx中间Skin分类

    文不是直接翻译.. . 本文在Libgdx的官方wiki的基础上,加上一些自己的理解.所以,难免会一些甚至是非常多的理解非常片面的东西.写的不好,还请见谅.... 事实上 事实上.在LibGDX的官方 ...

  10. win8 64位使用plsql developer连接oracle数据库问题

    问题:win8的64使用位系统plsql developer本地连接oracle莫名其妙的问题发生在数据库时.错误消息框,甚至可能是空的. 原因:它表示,互联网,的原因,预计在64位系统安装在64位O ...