`
zhouyrt
  • 浏览: 1172294 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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先下载下来。可以如下配置

 

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。如下

 

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参数用来给指定的模块传递一些有用的数据。如下

 

require.config({
    config: {
        'A': {
            info: {name: 'jack'}
        }
    }
});

使用A的模块中可以通过A.config().info获取到该数据信息。如

 

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会报错。如

 

require.config({
    enforceDefine: true
});
require(['underscore'], function(_){
    console.log(_)
})

错误信息

 

 

4,require函数增加了第三个参数errbacks。

很明显该函数指模块文件没有载入成功时的回调。这个也是应一些开发者得要求而增加,其中还包括另一个著名AMD的实现curl的作者John Hann

 

require(['b'], function(){
    console.log('success');
},function(err){
    console.log(err)
}); 

err会给出一些出错提示信息。

 

 

5,更强大的paths参数。

requirejs 1.x版本中已经有paths参数,用来映射模块别名。requirejs2.0更加强大,可以配置为一个数组,顺序映射。当前面的路径没有成功载入时可接着使用后面的路径。如下

 

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。如下

 

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

  • 大小: 11.7 KB
分享到:
评论

相关推荐

    requireJS初学者完整例子

    RequireJS是前端开发中一款非常重要的模块化加载库,它主要解决了JavaScript在浏览器环境中异步加载和组织代码的问题。这个“requireJS初学者完整例子”提供了学习RequireJS的基础步骤和实践操作,帮助初学者快速...

    《RequiresJS-2.0-API中文》PDF

    《RequiresJS-2.0-API中文》PDF 是一本专注于介绍RequireJS 2.0版本API的中文指南。RequireJS是一个JavaScript模块加载器,它使得在浏览器环境中管理JavaScript代码变得更加有序和高效,尤其对于大型项目来说,是...

    requirejs_Demo演示

    **requireJS**是一个JavaScript库,主要用于管理项目的模块依赖性,特别是在大型Web应用程序中。它引入了AMD(异步模块定义)规范,使得JavaScript模块化变得简单而高效,尤其是在需要加载大量脚本的情况下。...

    requirejs-2.1.17.zip

    RequireJS 是一个JavaScript库,主要用于解决在浏览器环境中管理和加载JavaScript模块的问题。它的核心功能是实现异步模块定义(AMD)规范,使得JavaScript代码可以按照模块化的方式组织,从而提高代码的可维护性和...

    angularjs_requirejs demo

    AngularJS和RequireJS是两种非常重要的JavaScript库和模块化工具,它们在Web开发中起着至关重要的作用。这个"angularjs_requirejs demo"是将AngularJS与RequireJS结合使用的一个示例项目,旨在帮助开发者更好地理解...

    requirejs demo

    RequireJS 是一个 JavaScript 库,专门用于管理前端的模块化依赖。它引入了 AMD(Asynchronous Module Definition)规范,使得在浏览器环境中可以异步加载和组织JavaScript代码,从而解决了传统方式下JavaScript文件...

    layer2.0_js

    9. **模块化**:遵循AMD(Asynchronous Module Definition)规范,方便与其他模块化开发框架如RequireJS、Sea.js等无缝集成。 10. **社区支持**:活跃的开发者社区为用户提供技术支持和问题解答,不断推动Layer2.0 ...

    RequireJS入门(一)

    ** RequireJS 入门(一) ** RequireJS 是一个 JavaScript 模块加载器和打包工具,它使得在浏览器环境中可以实现模块化开发,解决了传统 JavaScript 文件依赖关系混乱的问题。本篇文章将对 RequireJS 的基本概念、...

    requireJs学习文档+demo

    RequireJS 是一个 JavaScript 文件和模块加载器,它使得在浏览器端使用异步方式来加载和组织脚本,从而解决了大型JavaScript应用中代码依赖管理和加载效率的问题。RequireJS 的设计思想深受 CommonJS 和 AMD...

    requireJS实例

    RequireJS 是一个 JavaScript 文件和模块加载器,它使得在浏览器端组织和管理代码变得更加有序,尤其是在大型项目中。 RequireJS 的核心理念是依赖前置,即在执行任何代码之前,先声明其依赖的模块,这样可以确保按...

    ionic-requirejs实例

    在本文中,我们将深入探讨如何将Ionic框架与RequireJS结合使用,实现项目的模块化管理。Ionic是一个基于AngularJS构建移动应用的开源框架,而RequireJS则是一个JavaScript模块加载器,它使得JavaScript代码能够遵循...

    RequireJS API

    RequireJS是一个JavaScript模块加载器,它的主要目的是解决JavaScript代码的依赖和模块化问题。通过RequireJS,可以将代码分割为可重用的模块,每个模块都可以单独加载或打包成一个文件。RequireJS的API提供了一种...

    requireJS + angularJs的项目构架

    "requireJS + angularJs的项目构架"就是一个旨在解决这些问题的实例。RequireJS是一个JavaScript模块加载器,而AngularJS则是一个强大的前端MVC(Model-View-Controller)框架。结合两者,我们可以创建出高效、可...

    快速理解RequireJs

    RequireJS 是一个JavaScript库,主要用于组织和加载JavaScript模块,尤其在大项目中,它能帮助开发者实现异步加载,提高页面性能。RequireJS的核心概念是AMD(Asynchronous Module Definition),这是一种处理...

    requirejs中文版参考文档.pdf

    仅供参考,版权归requirejs中文网所有。

    RequireJS入门(三)

    RequireJS 是一个 JavaScript 的模块化加载器,它使得在浏览器端组织和管理代码变得更加有序,尤其是在大型项目中。本篇文章将深入探讨 RequireJS 的基础知识,包括它的核心概念、使用方式以及如何结合实际项目进行...

    requirejs-master

    RequireJS 是一个 JavaScript 模块化加载器,它在前端开发中扮演着至关重要的角色,尤其是在大型项目中,用于组织代码、管理和优化资源加载。"requirejs-master" 压缩包很可能包含了 RequireJS 的完整源码、文档、...

    前端项目-requirejs-tpl.zip

    【标题】"前端项目-requirejs-tpl"指的是一个基于前端技术构建的项目,其中使用了RequireJS和UnderscoreJS的模板插件。RequireJS是JavaScript的一个模块化管理工具,它使得在浏览器环境中实现模块化的JavaScript代码...

Global site tag (gtag.js) - Google Analytics