使用RequireJS 2.0.1和shim加载jQuery,Underscore和Backbone [英] Loading jQuery, Underscore and Backbone using RequireJS 2.0.1 and shim

查看:107
本文介绍了使用RequireJS 2.0.1和shim加载jQuery,Underscore和Backbone的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在对RequireJS 2.0.1 进行一些试验.我的目标是正确加载jQuery,Underscore和Backbone.从原始的 RequireJS文档中,我发现作者J. Burke在此新版本中添加了

I am experimenting a little bit with RequireJS 2.0.1. My goal is to load correctly jQuery, Underscore and Backbone. From the original RequireJS doc I discovered that the author J. Burke added (to this new release) a new config option called shim.

然后我在这里写下了这些东西:

Then I wrote this stuff down here:

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Testing time</title>
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>Testing time</h1>
    </body>
</html>

scripts/main.js

requirejs.config({
    shim: {
        'libs/jquery': {
            exports: '$'
        },
        'libs/underscore': {
            exports: '_'
        },
        'libs/backbone': {
            deps: ['libs/underscore', 'libs/jquery'],
            exports: 'Backbone'
        }
    }
});


define(
    ['libs/jquery', 'libs/underscore', 'libs/backbone'],

    function (jQueryLocal, underscoreLocal, backboneLocal) {
        console.log('local', jQueryLocal);
        console.log('local', underscoreLocal);
        console.log('local', backboneLocal);
        console.log('global', $);
        console.log('global', _);
        console.log('global', Backbone);
    }
);

一切似乎都可以正常工作,但是我感觉我缺少一些东西,我知道有 AMDed 版本的jQuery和Underscore,但是如果设置是如此简单,我就不会不明白为什么我应该使用它们.

Everything seems to work quite fine, but I have the feeling that I'm missing something, I know that there are AMDed version of jQuery and Underscore but if the setup is so simple I don't understand why I should use them.

那么,这种设置正确吗?或者我缺少什么?

So, is this setup right or I'm missing something?

推荐答案

如果库尚未调用define()来声明模块,则只需使用"shim"配置. jQuery已经做到了这一点,因此您可以从shim配置中删除它.上面的代码将按原样工作,但是jQuery的导出填充程序配置将被忽略,因为jQuery将在完成填充程序之前调用define().

You only need to use "shim" config if the library does not already call define() to declare a module. jQuery does this already, so you can remove that from the shim config. The above code will work as is, but the exports shim config for jQuery will be ignored since jQuery will call define() before the shim work is done.

填充程序与使用脚本调用define()来定义模块的缺点:

The downsides with the shim vs having the script call define() to define a module:

  1. 它的可移植性/可靠性较差:每个开发人员都需要进行填充程序配置,并跟踪库更改.如果库作者在库中内联地执行此操作,则每个人都可以更有效地获得收益. umdjs/umd 上的代码模板可以帮助您进行代码更改.

  1. It is less portable/reliable: every developer needs to do the shim config, and keep track of library changes. If the library author does it inline in the library, everyone gets the benefits more efficiently. The code templates at umdjs/umd can help with that code change.

更少的最佳代码加载:shim config通过在加载实际库之前加载shim deps来工作.因此,它比并行加载要多一些顺序加载.如果可以并行加载所有脚本,则速度更快,这在使用define()时可以实现.如果您为最终部署进行构建/优化并将所有脚本组合为一个脚本,那么这并不是真正的缺点.

Less optimal code loading: shim config works by loading shim deps before loading the actual library. So it is a bit more sequential loading than parallel. It is faster if all scripts can be loaded in parallel, which is possible when define() is used. If you do a build/optimization for final deployment and combine all the scripts into one script, then this is not really a downside.

这篇关于使用RequireJS 2.0.1和shim加载jQuery,Underscore和Backbone的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆