Question

正在阅读Backbone.js，他们给出了这个例子。

var Sidebar = Backbone.Model.extend({
  promptColor: function() {
    var cssColor = prompt("Please enter a CSS color:");
    this.set({color: cssColor});
  }
});

window.sidebar = new Sidebar;

sidebar.on('change:color', function(model, color) {
  $('#sidebar').css({background: color});
});

sidebar.set({color: 'white'});

sidebar.promptColor();

提示要求您输入颜色，当您输入颜色时，侧边栏的颜色会发生变化。我的问题是，为什么我更喜欢上面的代码到下面的代码？我认为这与代码结构有关，但我不能确切地说为什么。是因为这个例子太简单了，只有在应用程序变大时才会出现编写上述代码的优点吗？

忽略用于初始化起始颜色并调用promptColor()的主干代码，我将其留在那里以供上下文使用。

function promptColor(){
    var cssColor = prompt("please enter a css color:");
    $('#sidebar').css({background:cssColor})
}

Answer 1

首先，给出的示例是一个在模型中显示DOM操作的糟糕示例。不，你操纵DOM的地方。

需要注意的一点是，骨干为您的应用程序提供了结构，让您可以轻松地分离问题。

如果您看到以下示例（又是一个糟糕的侧边栏示例），则表示逻辑完全由 Backbone.View 实例处理。

这是一个独立的实例，你可以创建n个
Backbone为您创建了具有指定属性的DOM元素
Backbone使设置委派事件处理程序非常容易
Backbone使得定义在创建侧边栏实例时要运行的初始化代码非常容易
我们不必遍历整个DOM，因为我们处理其中的每个视图元素，所以冲突的可能性非常小。
您只需执行instance.remove()即可从DOM
以及more

组件和相关数据的状态存储在 Backbone.Model 实例中。

允许您定义初始状态
可以轻松设置初始化逻辑
事件可以轻松处理数据更改
允许您验证对数据的更改
让您轻松地将数据与后端同步
和more

＆＃13;

var Color = Backbone.Model.extend({
  defaults: {
    color: 'white',
    accepted: ['white', 'red', 'green', 'blue']
  },
  validate: function(attrs) {
    if (this.get("accepted").indexOf(attrs.color) < 0)
      return new Error();
  }
});
var Sidebar = Backbone.View.extend({
  attributes: {
    class: 'sidebar'
  },
  initialize: function() {
    this.listenTo(this.model, 'change:color', this.switchColor);
    this.render();
  },
  events: {
    'input .color': 'updateColor',
    'click .close': 'remove'
  },
  render: function() {
    this.$el.append($('#sidebar').html());
    return this;
  },
  updateColor: function(e) {
    this.model.set({
      color: $(e.target).val()
    }, {
      validate: true
    });
  },
  switchColor: function(model, color) {
    this.$el.css({
      background: color
    });
  }
});

for (var i = 0; i < 3; i++) {
  $('body').append(new Sidebar({
    model: new Color()
  }).el);
}

＆＃13;

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%
}
.sidebar {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  height: 100%;
  padding: 5px 15px 5px 0;
  margin: 0 2px;
  border: 5px solid dodgerblue
}
.close {
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 0;
  height: 18px;
  text-decoration:none;
  border: 0px solid grey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/template" id="sidebar">
  <input type="text" class="color" placeholder="enter bg color... red, green, blue"/>
  <a href="#" class="close">&#10006;</a>
</script>

＆＃13;

当然，您可以直接修改颜色，而无需在此特定示例中将其设置为模型，重点是展示如何在实际应用程序中分离组件的关注点。

模型作业是保存数据并确保它始终有效。 View向用户显示数据并让他使用它。模型充当了真理的源泉。

如果你使用普通的js，你会发现你的数据和DOM是紧密耦合的，你必须为骨干提供开箱即用的大量东西编写自定义逻辑...喜欢它的事件系统...路由器...集合......同步API ..（我们除了使用很少的事件系统之外我们没有使用它们中的任何一个这就是为什么它是一个糟糕的例子）

回答你的问题：＆＃34;是不是因为这个例子过于简单＆＃34; - 是。人们通常不会去MV * js框架来设置提示......这就像用手榴弹打开亚历山大提到的塑料门一样。

当您想要执行CRUD操作，处理路由，与后端进行通信等时，您会看到骨干擅长。例如，您需要发送最新颜色（是任何数据）要做的是在模型声明中添加url属性，并调用model.save()。这有多酷啊？

Answer 2

对于这个简单的例子，使用框架是没有意义的。这就像使用IDE编写10行脚本或使用手榴弹打开门一样。也许你想看看一些使用骨干的项目，或者最好的办法是考虑一个更大的任务，然后提出一个主干与vanillaJS实现。

根据我的个人经验，我经常会遇到整个项目过于或过于复杂的问题 - 你需要为自己的工作找到合适的工具，或者你最终会得到意大利面条代码或单一结构来完成简单的任务。

Answer 3

对于这里提到的这个具体例子它没有任何意义，但是如果你想要同步你的元素集合，如[{id: 1, body: "Hello World"}, {id: 2, body: "Hello World!"}]，则会收到后端出现的新元素。使用您定义的模板快速渲染它，或者让我们说更新某个元素并希望它与后端保持同步。使用像Backbone.js

这样的框架要容易得多

在我看来，它当然不会阻止你使用意大利面条代码，因为一切都取决于你。但是，它可以帮助您分解逻辑并使您更容易阅读您可能拥有的团队成员。

为了更好地了解Backbone.js，我建议您查看本教程：http://backbonejs.org/docs/todos.html

Backbone.js代码与常规JS代码

3 个答案: