简介
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点的节奏啊。。。
不写了,睡觉去,明天有空再码一篇。。。