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版本中就曾经有人开发过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: [

            http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min,

            ‘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多行。

时间: 2024-08-03 08:38:22

RequireJS 2.0初探的相关文章

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增加了shi

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

[转]Swift 2.0初探:值得注意的新特性

转自http://www.cocoachina.com/swift/20150623/12231.html 转眼间,Swift已经一岁多了,这门新鲜.语法时尚.类型安全.执行速度更快的语言已经渐渐的深入广大开发者的心.我同样也是非常喜爱这门新的编程语言. 今年6月,一年一度的WWDC大会如期而至,在大会上Apple发布了Swift 2.0,引入了很多新的特性,以帮助开发者能更快,更简单的构建应用.我在这里也说道说道Swift 2.0中值得大家注意的新特性. guard语句 guard语句和if语

Swift 2.0初探:值得注意的新特性

转眼间,Swift已经一岁多了,这门新鲜.语法时尚.类型安全.执行速度更快的语言已经渐渐的深入广大开发者的心.我同样也是非常喜爱这门新的编程语言. 今年6月,一年一度的WWDC大会如期而至,在大会上Apple发布了Swift 2.0,引入了很多新的特性,以帮助开发者能更快,更简单的构建应用.我在这里也说道说道Swift 2.0中值得大家注意的新特性. guard语句 guard语句和if语句有点类似,都是根据其关键字之后的表达式的布尔值决定下一步执行什么.但与if语句不同的是,guard语句只会

Swift 2.0 初探

转眼间,Swift已经一岁多了,这门新鲜.语法时尚.类型安全.执行速度更快的语言已经渐渐的深入广大开发者的心.我同样也是非常喜爱这门新的编程语言. 今年6月,一年一度的WWDC大会如期而至,在大会上Apple发布了Swift 2.0,引入了很多新的特性,以帮助开发者能更快,更简单的构建应用.我在这里也说道说道Swift 2.0中值得大家注意的新特性. guard语句 guard语句和if语句有点类似,都是根据其关键字之后的表达式的布尔值决定下一步执行什么.但与if语句不同的是,guard语句只会

初探STL容器之List

List 特点: 1.实质上是双向链表 2.使用时包含<list>头文件 #include<list> 3.不支持随机访问迭代器,只能使用双向迭代器  //因此不能使用一些算法和运算符操作 4.在任何位置的插入.删除操作都是常数时间 成员函数 初始化 list <int> intlist0; // 创建空的 intlist list <int> intlist1( 3 ); //包含3个元素 list <int> intlist2( 5, 2 )

初探STL之容器适配器

容器适配器 特点 用某种顺序容器来实现(让已有的顺序容器以栈/队列的方式工作) 分类 1) stack: 头文件 <stack> ? 栈 -- 后进先出 2) queue: 头文件 <queue> ? 队列 -- 先进先出 3) priority_queue: 头文件 <queue> ? 优先级队列 -- 最高优先级元素总是第一个出列 注: 容器适配器上没有迭代器 STL中各种排序, 查找, 变序等算法都不适合容器适配器 Stack 特点 1.stack 是后进先出的数

RequireJS API

可以找到许多的解读,但是原文总是最重要的,也是最正宗的说明,直接访问 RequireJS 有时不太方便,这里将 RequireJS 2.0 API 的原文转载到博客园,方便查看. This is the RequireJS 2.0 API. If you want 1.0: Link to 1.0. Usage §§ 1-1.3 Load JavaScript Files§ 1.1 data-main Entry Point§ 1.2 Define a Module§ 1.3 Simple Na

r.js 配置文件 example.build.js 不完整注释

对这个 r.js 下的 build 配置文件作说明: /* * This is an example build file that demonstrates how to use the build system for * require.js. * * THIS BUILD FILE WILL NOT WORK. It is referencing paths that probably * do not exist on your machine. Just use it as a gu