javascript - 主干 Web 应用程序架构 - 最佳实践

Question

我正在用backboneJS重写一个网络应用程序，我想知道与我之前的方法相比的总体架构。

如果您认为这个问题应该在CodeReview上请告诉我而不是 StackOverflow。

这就是我尝试构建 Web 应用程序 MVC 风格的方法，无需任何框架(如 Backbone 或 Angular):

var App = function() {
    // ...
};

每个主要对象，例如 App、Page、Product 或其他对象都有自己的 model 属性来保存数据通常从 RESTful API 接口(interface)和包含所有 HTML 和事件处理程序的 jQuery 对象的 view 属性接收。一旦需要它就会被克隆到 DOM 中。

var Page = function(model) {
    this.model = model;
    this.view = this.render();
}

Page.prototype.render = function() {
    //get template, render it return jQuery object

    return $(html)
}


window.Shop = {
    app: new App({}),
    pages: {
        home: new Page({}),
        products: new Page({})
    }

}

这是我处理许多网络应用程序的传统方法。它的结构很好，我总是知道在哪里可以找到我的数据和观点。更重要的是，它们是同一对象的一部分，因此我可以轻松处理 View 和模型数据之间的 promise 和/或延迟对象(hbs 模板、API 数据等)。

但是对于 Backbone 来说，View 和 Model 似乎是它们自己的、独立的对象，我不确定是否应该将 View 作为子对象处理 -模型的对象，反之亦然，甚至在同一级别。

这是一种方法

var PageView = Backbone.View.extend({});
var Page = Backbone.Model.extend({

    initialize: function() {
        this.view = new PageView();
    }

});

window.Shop = {
    pages: {
        home: new Page({}),
        products: new Page({})
    }

}

这是另一种我看到问题的方法，因为我无法从模型访问 View ，反之亦然(它们之间没有关系)。

var PageView = Backbone.View.extend({});
var Page = Backbone.Model.extend({});

window.Shop = {
    pages: {
        home: {
            view: new PageView({}),
            model: new Page({})
        },
        products: {
            view: new PageView({}),
            model: new Page({})
        }
    }

}

还有很多其他可能性，但我不确定前进的最佳方式是什么。

Answer 1

MVC 的主要原则之一是模型永远不应该了解 Controller / View 层。您永远不应该从模型访问 View 。这样您就可以在多个 View 中使用同一模型。

在 Backbone 中，通常在创建模型时将模型传递到 View 中。查看以下示例。

var User = Backbone.Model.extend({});
var UserView = Backbone.View.extend({
  render: function() {
    this.$el.html(this.template(this.model.toJSON());
    return this;
  }
}

var view = new UserView({model: new User()});
view.render();

通常这是通过从服务器获取集合然后显示集合中的每个模型来完成的。

var User = Backbone.Model.extend({});
var UserCollection = Backbone.Collection.extend({
  model: User
});

var UserView = Backbone.View.extend({
  render: function() {
    this.$el.html(this.template(this.model.toJSON());
    return this;
  }
}

var UsersView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.collection, 'reset sync', this.render);
  },

  render: function() {
    this.$el.empty();
    this.collection.each(function(user) {
      var view = new UserView({model: user});
      this.$el.append(view.render().el);
    }
    return this;
  }
}

var users = new UserCollection();
var view = new UsersView({collection: users});
users.fetch();

有很多教程更详细，您应该查看它们。