Backbone.js 或其他 MVC 提供什么？答案

【问题标题】：What does Backbone.js or other MVC offer?Backbone.js 或其他 MVC 提供什么？
【发布时间】：2011-07-19 23:23:32
【问题描述】：

我从backbone.js开始

浏览一些教程，如下所示。我感觉到，这实际上更多是关于如何组织你的对象以及如何指导它们进行交互。我可以在没有backbone.js 的情况下完成它们因此，backbone.js 在我看来更像是一组规则、哲学，然后大部分是一个实际的插件。是这样的吗？

(function($){
  var Item = Backbone.Model.extend({
    defaults: {
  part1: 'hello',
  part2: 'world'
  }
 });      

 var List = Backbone.Collection.extend({
    model: Item
 });

var ListView = Backbone.View.extend({
el: $('body'),
events: {
  'click button#add': 'addItem'
},
   initialize: function(){
  _.bindAll(this, 'render', 'addItem', 'appendItem'); // remember: every function that uses 'this' as the current object should be in here

  this.collection = new List();
  this.collection.bind('add', this.appendItem); // collection event binder

  this.counter = 0;
  this.render();      
},
render: function(){
  $(this.el).append("<button id='add'>Add list item</button>");
  $(this.el).append("<ul></ul>");
  _(this.collection.models).each(function(item){ // in case collection is not empty
    appendItem(item);
  }, this);
},
// `addItem()` now deals solely with models/collections. View updates are delegated to the `add` event listener `appendItem()` below.
addItem: function(){
  this.counter++;
  var item = new Item();
  item.set({
    part2: item.get('part2') + this.counter // modify item defaults
  });
  this.collection.add(item); // add item to collection; view is updated via event 'add'
},
// `appendItem()` is triggered by the collection event `add`, and handles the visual update.
appendItem: function(item){
  $('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
}
});

var listView = new ListView();
})(jQuery);

【问题讨论】：

标签： javascript model-view-controller backbone.js

【解决方案1】：

Backbone.js、underscore.js 和 jQuery（它们都是相互依赖的）是基于 javascript 的实用抽象层和工具集，允许您组织业务逻辑、模板和模型。

这样做的主要好处是代码可读性（对于具有多个成员的长期项目/项目）、围绕离散部分组织的一般良好实践（例如，将 HTML 排除在业务逻辑之外）、为工作提供时间项目的硬/有趣的部分，而不是在不同的浏览器兼容性问题上重新发明轮子，以及（在下划线的情况下）一个很好的工具集，可以帮助您管理 javascript 对象、数组、函数等，以实现安全和理智的编程.

基本上，如果您选择不使用这些工具，那么您要么是在制作原型，要么是在世界上所有的时间都在您手上。如果您喜欢时间和理智，请不要害怕使用它们！

【讨论】：

我同意。但是你所说的似乎更多地适用于 jQuery，那里有 jQuery 函数可以为你做日常的事情，让你免于编写它们。然而，backbone.js 似乎并不是一个工具集或抽象层。如果您查看我发布的教程示例，几乎没有一个特殊功能或专用于backbone.js，它们只是javascript
我明白你的意思，但是对于 Backbone.js，有一些结构帮助器可以做某些应用程序级别的事情，例如，主干允许我绑定到客户端上的特定更新事件，更新模型然后将其推送到服务器进行更新，同时通知所有依赖视图。这种微妙之处需要时间在 JS 中重现，当您想要让所有内容保持同步时，它可以节省大量时间。我喜欢backbone.js 的另一个方面（就您而言）是它迫使我将我的视图/模型组织成离散的块，这是一个很好的做法。
谢谢！为我清理了很多东西。我正在努力实现您在评论中所说的后半部分。
没问题，我知道这有点微妙，我在上面找到的最好的文章是文档......祝你好运！

【解决方案2】：

Backbone 提供了更清晰的关注点分离，让您可以编写更简洁的代码。我使用没有主干的 jQuery 编写了一个非常精细的富客户端。我不得不将大量元数据直接存储在我的 DOM 元素上。这意味着我还必须定期询问我的 DOM 元素以读取/使用该元数据。虽然您可以使用现有工具完成任何工作，但有些工具可以让事情变得更轻松（更简洁）。

使用 Backbone，您的模型可以存储您的所有相关信息。您不需要在 DOM 属性中存储尽可能多的东西。每个模型只存在一次，因此对于任何一个事实（例如给定人物模型的名字），您都有一个单一的事实点，即模型本身。您正在使用模型来跟踪它自己的事实，而不是 DOM。我保证你的代码会更干净。

Backbone 并不是万能的工具。当您在浏览器中表示模型（存在于后端数据库中的东西）时使用它是有意义的。

【讨论】：

【解决方案3】：

你太棒了，它主要是关于如何构建大型 js 应用程序的哲学，所有管道都为你处理。

Backbone 仍处于起步阶段，但具有很大的吸引力。就算你现在印象不是很深，我也会留意的。

【讨论】：

你指的是什么管道？我的看法是，它只是告诉我如何组织现有的 javascript 语言，并没有太多额外的内容。 PS。我将“管道”理解为内置函数，如 jQuery 的 .slideDown()
不必编写带有验证回调的保存函数，或者能够在视图上以声明性方式声明事件，并为您进行委托。它们本身都是小事，但它们加在一起。
至少通常“管道”是指一种读取和复制代码，它只是将您的数据从一个点传输到您需要它的另一个点，可能会在结构上进行一些细微的更改。另一方面，slideDown() 实际上更像是一个功能，如果你愿意的话，“肉”，而不是管道。这是我的理解。

【解决方案4】：

我想说 Backbone.js 提供的主要功能实际上是事件模型。是的，可以手动编写代码，因为它确实是一个简单的模型。

对于 Spine.js，一个非常相似的库，我想说它提供的另一个特性是 Class，一个 javascript 原型的包装器。

也就是说，我认为有很多重要的注意事项是您想要正确处理的。这些警告除其他外：

您的事件究竟是什么时候触发的？
- 是否像自动检测到 Backbone.js 的情况一样？
- 或者您是否希望像在 Spine.js 中那样通过调用 save() 来明确地做到这一点
如果响应事件触发了两个函数并且它们接收模型实例：
- 它们是否收到相同的实例 - 即其中一个所做的更改将立即对另一个可见
- 或者他们是否会收到某种副本。如果复制：
  - 他们会对模型的未来变化做出反应吗？
  - 或者他们不会
名单还在继续……

有很多事情要做好。我肯定有偏见，因为我发现 Backbone.js 所做的选择非常麻烦。我显然更喜欢 Spine.js。但是，我鼓励您为这两个库寻找一些重要的用例示例，并自己思考。

继续自己实现所有这些可能是正确的选择 - Spine.js 核心只有 2KB 的缩小代码。但是，我强烈鼓励您尝试从其他错误中学习。在我看来，有很多事情会出错。

【讨论】：