初学Backbone

简介

Backbone是一款不错的前端MVC框架，它主要由Router，Model，View，Collection构成。当我们在一个页面中有许多交互，js操作，即构建富应用程序(rich client-side applications)时，用Backbone这类的框架来管理自己的代码是十分有用的。

在Backbone里，我们一般会用Model来处理数据，包括数据的校验，Ajax等。用View与页面显示打交道，会在View中渲染el之类的。Collection只是Model的集合。MVC中的C其实隐藏在View中，并没有显式的Controller。在官方文档中说的是我们可以把View中事件处理作为Controller，而View中的template之类的渲染函数才是真正的View。

Backbone的学习还是直接看官方的英文文档较好，不管是学习的速度还是质量。中文的翻译毕竟还是很让人迷惑的。。。。。

Backbone官方文档：http://backbonejs.org/

Model

我们会用extend来生成我们自己的Model，后面的View，Collection，Router也是一样。在extend中，可以传入必要的参数进行构建：

var Note = Backbone.Model.extend({

  initialize: function() { ... },

  author: function() { ... },

  coordinates: function() { ... },

  allowedToEdit: function(account) {
    return true;
  }

});

var PrivateNote = Note.extend({

  allowedToEdit: function(account) {
    return account.owns(this);
  }

});

因为在Backbone中，extend使用prototype实现的。于是按理说可以无限extend下去，不过应该不会有人extend很长吧。。。。

几个特殊的函数要注意的：

首先是initialize，上述例子中，我们如果var note = new Note，initialize函数会默认指向，将其中的值绑定到this对象中。

然后是validate，如果我们定义了validate函数，那么调用note.isVaid()或者在调用Model原生的上传函数save，都会运行validate。来进行校验Model中保存的数据是否合理。

View

和Model，首先用extend：

var DocumentRow = Backbone.View.extend({

  tagName: "li",

  className: "document-row",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },

  render: function() {
    ...
  }

});

render函数一般是用来渲染的，最后一般会加一句return this;。

一般的，我们都会这么使用这个View：

var documentRow = new DocumentRow({
    //options
});
$(targetEle).append(documentRow.render().el);

el和$el的区别在于，$el是jQuery化的el。

Collection

Collection是同一个Model的实例的集合，可以往里添加实例，或者删除等等操作。

Router

Router一般会被用来作为项目或者组件的入口。同样是用extend：

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

routes中对应的是访问时地址后面的hash值所定义要执行的函数，然后可以再具体函数中初始化相应的View之类的。

 

如果有人能看到这的话。。。肯定已经一团雾水了。。。刚开始的时候是这样。。特别是直接看中文的教程。。所以强烈推荐直接去官方文档上看

 

 

最近刚入职，被拉去学Backbone，然后立马上项目。。还是交易模块的。。简直压力山大。。每天都是到晚上11点的节奏啊。。。

不写了，睡觉去，明天有空再码一篇。。。