初学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点的节奏啊。。。

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