Backbone.js入门教程MVC模式基础解析

Backbone.js 的灵活性和轻量级设计，挺适合构建中小型项目，尤其是那些不需要太复杂的框架支持的场景。你可以通过 MVC 模式来组织应用代码，界面和数据分离得挺清晰。比起 React、Angular 这样的现代框架，Backbone 显得简单不少，学习曲线也低。它依赖于 jQuery 和 Underscore.js，虽然是老技术，但如果你需要做快速原型或者维护旧项目，Backbone 还是有用的。

Models用来管理数据，Collections则是 Models 的容器。比如，你可以定义一个模型：

var Person = Backbone.Model.extend({
  defaults: {
    name: "John Doe",
    age: 30
  }
});
var person = new Person();
console.log(person.get('name')); //输出"John Doe"

视图部分则由Views来，负责渲染数据和响应用户事件。比如你可以定义一个视图，这样就能绑定 DOM 元素：

var PersonView = Backbone.View.extend({
  el: '#person-container',
  initialize: function() {
    this.model.on('change', this.render, this);
  },
  render: function() {
    $(this.el).html('Name: ' + this.model.get('name'));
    return this;
  }
});
var view = new PersonView({model: person});
view.render();

，Backbone 的路由功能也不容忽视。你可以通过路由管理页面跳转，像这样：

var AppRouter = Backbone.Router.extend({
  routes: {
    "": "home",
    "about": "aboutPage"
  },
  home: function() {
    console.log("Home page");
  },
  aboutPage: function() {
    console.log("About page");
  }
});
var router = new AppRouter();
Backbone.history.start();

，Backbone 适合构建单页应用、数据驱动应用或快速原型。虽然它已经有点过时，但在一些小型项目或维护老项目时，还是挺有价值的。如果你喜欢轻量、灵活的框架，Backbone 绝对是值得了解的。