javascript - 一种使用 require 加载 Backbone 堆栈的方法

Question

这是我如何使用纯 HTML 脚本标签来完成此操作 SO Question on CDN suggestions 。这将是一个串行加载(下划线->jquery->backbone)，它支撑着页面的其余部分。

 <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>

如何使用 require.js 或类似的非阻塞方法加载这些库？

引用(API 链接)

• underscore

• jQuery

• backbone

• require

Answer 1

jquery 是 AMD 友好的，因此您只需在 require.js 配置中需要它即可

主干和下划线不再对 AMD 友好，因此您有以下选择:

1. 您可以将它们包含为“外部”，并使用 shim 分配正确的依赖项(请参阅此处 the docs 和 tutorial )

2. 或者您可以使用两个支持 AMD 的库的稍作修改的版本。您可以在 this repository 中找到它们.

3. 使用旧版本的主干和下划线。 (不推荐)

---

注意:如果您选择匀场路由，请记住这些库不会异步加载。

---

这是一个使用库的更改版本的工作示例:

require.config({
    enforceDefine: true, //Only libraries AMD Friendly will be loaded
    urlArgs: "bust=" + (new Date()).getTime(), //for development, forces browser to clear the cache
    paths: { // relative paths (to the current file main.js)
        "es5":               'libs/es5-shim/es5-shim',
        "jquery":            'libs/jquery/jquery',
        "jqueryThreeDots":   'libs/jquery/plugins/jquery.ThreeDots',//A jquery plugin
        "underscore":        'libs/underscore/underscore.amd',
        "underscore.string": 'libs/underscore/underscore.string',
        "backbone":          'libs/backbone/backbone.amd',
        "text":              'text',
        "mediator":          'libs/backbone/plugins/backbone.mediator',
        "bootstrap":         'libs/bootstrap/bootstrap.min',
        "rangy":             'libs/rangy/rangy-core.amd',
    },
    shim: {
        "bootstrap": {
            deps: ["jquery"],
            exports: "$.fn.popover"
        }
    }
});

使用垫片的示例:

require.config({
    enforceDefine: true,
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        "jquery": 'http://code.jquery.com/jquery-1.9.1.min.js'
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"], // Backbone dependencies
            exports: "Backbone" // variable exported
        },
        underscore: {
            exports: "_"
        }
    }
});