`

RequireJS 2.0

阅读更多

RequireJS 2.0较1.x版本变化较大,代码也进行了重构,层次更清晰可读。功能上主要变化如下:

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

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(_)
})

        错误信息:

 

3.require函数增加了第三个参数errbacks

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

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

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

 

4.更强大的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。

 

5.在模块载入失败回调中可以使用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);
    } 
});

 

6.删除了jQuery domready相关代码

        这次没人再诟病RequireJS和jQuery耦合的太紧密。

 

7.删除了priority,packagePaths,catchError.define

        这几个参数已经有相应的替代品。

 

        最后需要注意的是,虽然功能增加了不少。但代码量却减少了近60行。主要是去掉了jQuery ready相关代码。另外newContext函数依然有1000多行。

 

文章来源:http://www.cnblogs.com/snandy/archive/2012/06/04/2532997.html

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

相关推荐

    《RequiresJS-2.0-API中文》PDF

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

    domReady:Bower-domReady

    domReady 一个用于检测DOM就绪的AMD加载程序插件。 已知可在RequireJS中使用,但应在支持相同加载器插件API的其他AMD加载器...该插件一直在,直到requirejs 2.0版本发布为止。 贡献 domReady遵循,并被视为的子项目。

    layer2.0_js

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

    JQuery2.0库文件

    - **模块化**:jQuery2.0开始采用AMD(Asynchronous Module Definition)模块化加载,便于与RequireJS等模块加载器配合使用。 3. **文件解析** - `jquery.html.bak`和`jquery.html`可能是包含jQuery2.0应用示例...

    RequiresJS_2.0_API中文

    requirejs define,requirejs 教程,requirejs 中文,requirejs shim, seajs require,requirejs seajs ,requirejs css,requirejs api, requirejs require

    requirejs + vue 项目搭建详解

    今年正美正好升级avalon2.0,加入虚拟dom的时候,不稳定了,就考试寻找其他的mvvm框架。 看了比较流行的一些框架,最后选择了vue。选择他的原因是 文档比较全,而且还有中文的(你懂的),生态圈比较好,有vux, vue-...

    HearsayRequireJSBundle:Symfony2的RequireJS集成

    " hearsay/require-js-bundle " : " 2.0.*@dev " // ... } // ... } 请注意, master分支正在开发中,并且不稳定。 如果要使用稳定版本,请指定1.0.*版本。 但是,请记住1.0分支不再提供新功能,而仅提供错误...

    jquery各种版本1.3--2.0.zip

    2. 模块化改进:jQuery 1.7开始采用AMD(Asynchronous Module Definition)模块化规范,方便与其他AMD库如RequireJS配合使用。 六、jQuery 1.8至1.9:API调整与兼容性修复 1. API调整:移除了一些不推荐使用的API...

    bpmn.js:用于 Web 的 BPMN 2.0

    bpmn.js 是 BPMN 2.0 元模型在 JavaScript 中的实现,包括执行支持。 如果您需要基于 JavaScript 的 BPMN 渲染器,请查看 。 入门 检查example.html以获取基于 requirejs 的 bpmn.js 设置 发展 跑步 grunt watch:...

    RequiresJS2.0API中文.pdf

    RequireJS 是一个JavaScript模块加载器。 在ES6出现之前,JS不像其他语言同样拥有“模块”这一概念,于是为了支持JS模块化,出现了各种各样的语言工具,如webpack,如ReuqireJS。

    requirejs-sandbox:require.js 的沙盒管理器

    一起运行使用 1.4.x和2.0.x编写的小部件时没有问题。 例如见演示#2 使用不同的冲突库作为依赖项同时运行小部件。 您可以轻松地在一页上运行使用和编写的小部件,而不必担心不兼容。 使用它自己的一组库(例如jQuery...

    Backbone.RPC2:将 Backbone 与 JSON RPC 2.0 API 结合使用

    // so this works with requirejs, node require, commonjs, etc. var RPC2 = require('backbone.rpc2'); // Models which should sync using the RPC 2.0 service must extend // Backbone RPC2's Model instead

    ko-spa-starter:适用于SPA或模块化js应用程序的淘汰赛+ RequireJS入门套件

    KnockoutJS + RequireJS + jQuery + Bootstrap入门套件 该应用程序旨在作为基于AMDjs设计原则的模块化JavaScript应用程序的起点。 请参考相应的库以获取更多信息和许可。 包含的库: v1.8.2 v2.1.0 v2.1.1 v2.0...

    amd-version:RequireJS semver 兼容的版本控制插件

    RequireJS 版本插件不再维护或建议...在您的代码中使用版本后缀,semver 范围通常是一个坏主意。 支持模块加载的任何 semver 范围( ~1.8 , =1.8.1 , >=0.5 < 2 xss=removed xss=removed>=2.0 <5' ) ; } ) ;设置...

    echarts在jsp中使用配置手册

    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }] }); }); ``` 这里的代码使用RequireJS加载Echarts模块,并初始化Echarts实例,创建了一个简单的柱状图表。 在JSP中使用...

    【千锋】Web前端项目精讲视频(29集)

    千锋Web前端教程:10-14.requirejs实战(5集) 千锋Web前端教程:08-09.svg实现地球转动(2集) 千锋Web前端教程:04-07.vue2.0登录注册评论功能(4集) 千锋Web前端教程:01-02.html5拖放垃圾桶效果(2集) 千锋Web...

    harviewer:HAR Viewer是一个Web应用程序,它可以可视化HTTP存档日志(HAR)

    稳定的网址(2016年3月21日,v2.0.17版)-...//requirejs.org/ jQuery: : jQuery JSON插件:Jim Dalton( jim.dalton@furrybrains.com ),基于http://www.JSON.org/json2.js 基于Domplate + Domplate的模板: ...

    verse-[removed]对 Verse 协议的 Websocket 支持

    verse-javascript Websocket 支持 Verse 协议。 请记住,该项目仍在进行中!诗Verse 2.0 是用于实时共享 3D 数据的网络协议。...要求RequireJS 如果您想使用未链接的源并运行 Grunt 任务,您还需要: Node.js v0.10+ 鲍

    react-cart-example

    react-cart-example 演示地址 所涉及的第三方库 本项目是react+reflux+react-route的使用示例。主要涉及的js第三方库有: jQury V2.1.4 Bootstrap V3.3.5 ...tools requirejs的r.js工具使用的配置文件,可以

    QQ登录插件

    - **OAuth 2.0**:QQ登录通常基于OAuth 2.0协议,这是一种广泛使用的授权协议,提供了安全的第三方应用访问用户数据的方式。 - **JavaScript/jQuery**:前端交互主要由JavaScript实现,可能使用jQuery库来简化DOM...

Global site tag (gtag.js) - Google Analytics