2

我将以我实际在做的事情为例。我有一个淘汰赛自定义绑定,它依赖于一个 jquery 插件,该插件本身依赖于当然依赖于 jQuery 的 jQuery UI。还有另一个文件依赖于另一个插件,另一个文件依赖于 jQuery UI 等。在 require.config.js 我有:

shim: {
    "jquery-ui": {exports: "$", deps: ["jquery"]},
    "jquery-plugin1": {exports: "$", deps: ["jquery-ui"]},
    "jquery-plugin2": {exports: "$", deps: ["jquery-ui"]}
}

这有效,然后在相应的文件中我可以这样做:

define(["jquery-plugin1"], function ($) {

但是,我也可以这样做:

define(["jquery", "jquery-ui", "jquery-plugin1"], function ($) {

还有一种情况是文件可能依赖于两个插件:

// which one?
define(["jquery-plugin1", "jquery-plugin2"], function ($) {
define(["jquery", "jquery-ui", "jquery-plugin1", "jquery-plugin2"], function ($){

可能还有其他依赖项,例如淘汰赛自定义绑定(不需要导出任何内容),所以我最终可能会得到:

define(["jquery-plugin1", "model1", "model2",
"ko-custom1", "ko-custom2", "ko-custom3",
"jquery-plugin2"],
function ($, m1, m2) {

该文件也可能依赖于 jQuery UI(依赖于 jQuery),但它们都是通过插件隐式加载的。

我的问题是最好明确所有要求(即在 jQuery 和 jQuery-UI 中包含define)并可能不进行导出,还是首选不那么冗长的嵌套依赖项处理?

4

1 回答 1

2

这是一个很好的问题,并且在使用 AngularJS 依赖注入之类的东西时变得非常相关,因为这些依赖项需要在模块注册之前存在。所以这行不通:

define(['angular'],function (angular) {
  return angular.module('myModule', ['mySubmodule']);
});

// Error: [$injector:nomod] Module 'mySubmodule' is not available!

您还需要定义 AMD 依赖项:

define(['angular','./mySubmodule'],function (angular) {
  return angular.module('myModule', ['mySubmodule']);
});

这可能是主观的,但我发现通过让每个模块明确定义它自己的依赖项并让 requireJS 解决它们而不是相信超出范围的模块已经定义了它们会破坏模块化,这样更容易推理。

通过这样做,您还知道您的 AMD 模块可以独立测试,而无需重新连接缺少的依赖项。

于 2015-04-09T13:50:18.593 回答