3

我有两个小的 Backbone 插件，如下所示：

(function($, _, Backbone) {

var ListView = Backbone.View.extend({
// blablabla
});

Backbone.ListView = ListView;

})($, _, Backbone);

和

(function($, _, Backbone) {

var Repository = Backbone.Model.extend({
// blablabla
});

Backbone.Repository = Repository;

})($, _, Backbone);

我现在已经设置了 require.config：

require.config({

    baseUrl: "javascripts",

    shim: {
        "jquery": {
            exports: "$"
        },
        "underscore": {
            exports: "_"
        },
        "backbone": {
            deps: ['jquery', 'underscore'],
            exports: "Backbone"
        },
        "ListView": {
            deps: ['jquery', 'underscore', 'backbone'],
            exports: "Backbone.ListView"
        },
        "Repository": {
            deps: ['jquery', 'underscore', 'backbone'],
            exports: "Backbone.Repository"
        }        

    },

    paths: {
        "jquery": "Vendors/jquery",
        "underscore": "Vendors/underscore",
        "backbone": "Vendors/backbone",
        "ListView": "Extensions/ListView",
        "Repository": "Extensions/Repository"
    }

});

现在我们来解决问题。如果我想同时使用这两个插件，这就是我目前必须处理模块依赖项的方式：

require(['jquery', 'underscore', 'ListView', 'Repository'], function($, _, Backbone1, Backbone2) {

    // this is backbone + list view
    console.log(Backbone1);
    // this is backbone + repository
    console.log(Backbone2);       

});

但我想让插件已经注册到主干：

require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {

    // this now is backbone + listView + repository
    console.log(Backbone);

});

我该怎么做呢？我必须改变什么？

最好的问候，博多

4

2 回答 2

9

我建议首先为它们创建模块ListView并将Repository它们（希望Backbone也是）保持在全局命名空间之外，如下所示：

list_view.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  Backbone.ListView = Backbone.View.extend({
    ... ListView code here ...
  }
  return Backbone.ListView
});

存储库.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  Backbone.Repository = Backbone.View.extend({
    ... Repository code here ...
  }
  return Backbone.Repository
});

然后，您可以使用 require.js 的map配置将依赖项映射到包含两个模块的适配器，然后撤消list_view和repository模块本身的映射以避免循环依赖：

requirejs.config({
  map: {
    '*': {
      'backbone': 'backbone-adapter'
    },
    'list_view': {
      'backbone': 'backbone'
    },
    'repository': {
      'backbone': 'backbone'
    },
});

然后创建一个文件backbone-adapter.js以将插件与 Backbone 本身捆绑在一起：

骨干适配器.js

define(['backbone', 'list_view', 'repository'], function (Backbone) {
  return Backbone;
});

然后在您的模块中，当您将其包含'backbone'为依赖项时，requirejs 会将其映射到backbone-adapter，这反过来将包含您的插件，以便它们可以作为Backbone.ListView和使用Backbone.Repository。

我实际上并没有测试过上面的代码，但我使用了类似的策略将供应商模块与我自己的插件捆绑在一起，它对我来说效果很好。（这个想法来自这个讨论。）

于 2012-11-11T14:16:31.383 回答
0

我不会做那样的事情，你正在创建一个包含所有模块的全局对象，这不是 require.js 的用途。

您应该明确定义您的依赖项。如果需要ListView，则将其添加到 require 调用中，如果需要Repository将其添加到 require 调用中，...

如果您仍然想这样做，您可以定义自己的 Backbone 模块：

# backbone.js

define(['vendor/backbone', 'ListView', 'Repository'],
  function(Backbone, ListView, Repository) {

    Backbone.ListView = ListView
    Backbone.Repository = Repository

    return Backbone
});

然后你的垫片配置：

paths: {
    ...
    "backbone": "backbone",
    ...
}

（再一次，你真的不应该这样做！！）

于 2012-11-11T13:56:42.300 回答