将 Backbone 视图函数分隔到单独的文件中

Question

我有一个 Backbone 视图。

为了更好地组织它的代码，我宁愿将它的一些功能分离到一个单独的文件中。

所以，我想维护结构，但我只需要将函数分离到不同的文件中：

- MyView
   - functions A -> file A;
   - functions B -> file B;

我想在相同的当前模式下使用视图。所以我需要在我看来调用函数 'A'：myViewInstance.functionA_1()

什么是正确的way/pattern来实现这个？

我也用 RequireJS。

Answer 1

可以使用Mixin pattern。将MyView的原型划分为主体部分和其他部分，将它们放到单独的模块中，使主模块依赖它们并将这些部分合并在一起。

照常将主要部分的原型成员添加到 MyView 的声明中：

var MyView = Backbone.View.extend({
  method: function () {
    this.otherMethod();
  }
});

将原型的其他部分放到单独的模块中并导出为对象字面量：

var prototypePart = {
  otherMethod: function () {}
};

使主模块依赖于它们，并通过 Object.assign or by _.extend:

合并所有导入部分的原型

// Merging the prototype with ES6.
Object.assign(MyView.prototype, prototypePart);
// Merging the prototype with Underscore.js.
_.extend(MyView.prototype, prototypePart);

你会得到 MyView 就像声明 "in one piece":

var MyView = Backbone.View.extend({
  method: function () {
    this.otherMethod();
  },
  otherMethod: function () {}
});

例如，myview.js 导出 MyView。它依赖于另外两个模块，以便从它们导入 MyView 原型的其他部分：

define([
  'underscore', 'backbone', './myview-a', './myview-b'
], function (_, Backbone, myViewA, myViewB) {
  var MyView = Backbone.View.extend({
    // ...prototype members from this module
    initialize: function () {
      this.fromModuleA();
    }
  });
  // Add prototype members imported from other modules
  _.extend(MyView.prototype, myViewA);
  _.extend(MyView.prototype, myViewB);
  return MyView;
});

myview-a.js 导出带有一组附加 MyView 原型成员的对象：

define(function () {
  var myViewA = {
    // ...prototype members from this module
    fromModuleA: function () {
      this.fromModuleB();
    }
  };
  return myViewA;
});

myview-b.js 使用另一组 MyView 原型成员导出一个对象：

define(function () {
  var myViewB = {
    // ...prototype members from this module
    fromModuleB: function () {}
  };
  return myViewB;
});

将 Backbone 视图函数分隔到单独的文件中

Separate Backbone View functions into separate files

javascript

design-patterns

backbone.js

requirejs