javascript - Requirejs垫片: want to register backbone plugins directly into core backbone

Question

我有两个小的 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);

});

我该怎么做？ 我需要更改什么？

最好的问候， 博多

Answer 1

我建议首先为 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 本身捆绑在一起:

Backbone 适配器.js

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

然后在您的模块中，当您将 'backbone' 作为依赖项包含时，requirejs 会将其映射到 backbone-adapter，后者将依次包含您的插件，以便它们以 Backbone.ListView 和 Backbone.Repository 的形式提供。

我还没有实际测试过上面的代码，但我使用了类似的策略将 vendor 模块与我自己的插件捆绑在一起，它对我来说效果很好。 (思路取自this discussion。)