Javascript 一种使用require加载主干堆栈的方法

下面是我将如何使用简单的HTML脚本标记来实现这一点。这将是一个串行加载（下划线->jquery->主干），它会占用页面的其余部分

 <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链接）

---

jquery是AMD友好型的，因此您可以在require.js配置中要求它

主干线和下划线不再适用于AMD，因此您有以下选项：

您可以将它们作为“外部”包含，并指定正确的依赖项（请参见此处和a）

或者，您可以使用两个启用AMD的库的稍加修改的版本。你可以在里面找到它们

使用旧版本的主干线和下划线。（不推荐）

---

注意：如果选择填隙路由，请记住这些库不会异步加载

---

下面是一个使用库的修改版本的工作示例：

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: "_"
        }
    }
});

---

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

主干线和下划线不再适用于AMD，因此您有以下选项：

您可以将它们作为“外部”包含，并指定正确的依赖项（请参见此处和a）

或者，您可以使用两个启用AMD的库的稍加修改的版本。你可以在里面找到它们

使用旧版本的主干线和下划线。（不推荐）

---

注意：如果选择填隙路由，请记住这些库不会异步加载

---

下面是一个使用库的修改版本的工作示例：

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: "_"
        }
    }
});

---

这就是我们在项目中使用jQuery、下划线和主干线的方式：

requirejs.config({
    baseUrl: "js",

    paths: {
        backbone: "backbone-min",
        jquery: "jquery.min",
        underscore: "underscore-min"
    },

    shim: {
        backbone: { deps: ["underscore", "jquery"], exports: "Backbone" },
        jquery: { exports: "jQuery" },
        underscore: { exports: "_" }
    }
});

requirejs(["backbone"], function (Backbone) {
    // Now we can reference not just Backbone but also jQuery and
    // underscore since those two are dependencies for Backbone.
});

---

这就是我们在项目中使用jQuery、下划线和主干线的方式：

requirejs.config({
    baseUrl: "js",

    paths: {
        backbone: "backbone-min",
        jquery: "jquery.min",
        underscore: "underscore-min"
    },

    shim: {
        backbone: { deps: ["underscore", "jquery"], exports: "Backbone" },
        jquery: { exports: "jQuery" },
        underscore: { exports: "_" }
    }
});

requirejs(["backbone"], function (Backbone) {
    // Now we can reference not just Backbone but also jQuery and
    // underscore since those two are dependencies for Backbone.
});

---

不，就像我说的，这是一个加载主干和下划线更改版本的示例，从该存储库下载。是的。让我将第二个示例更改为CDNfyi，我认为在对象文本中的键周围不需要引号…所有键都是字符串，没有一个是变量。我不需要。但是我在配置文件的第一部分使用了一个需要的requirejs优化器插件。为什么不按照API提到的和下面的答案定义一个

baseUrl

？不，就像我说的，这是一个加载主干和下划线更改版本的示例，从该存储库下载。是的。让我将第二个示例更改为CDNfyi，我认为在对象文本中的键周围不需要引号…所有键都是字符串，没有一个是变量。我不需要。但是我将配置文件的第一部分与一个需要此功能的requirejs优化器插件一起使用。为什么不按照API中提到的和下面的答案定义一个

baseUrl

？