浅谈backbone框架的学习体会--by肖超玮

author : XiaoChaoWei 2011013279

首先说说backbone，backbone是一个重量级的前端mvc框架，我感觉他可以实现的是将js代码的组织，能够提供一种数据额逻辑相互分离的方法，减少开发过程中的数据和逻辑的混乱。

Backbone.model

包括交互数据及相关的大量逻辑： 转换、验证、计算属性和访问控制。你可以用特定的方法扩展 Backbone.Model ， 模型 也提供了一组基本的管理变化的功能。

下面谈谈如何运用:

Man=Backbone.Model.extend({
    initialize:function(){
    alert('Hey, you create me!');
      //初始化时绑定监听
    this.bind("change:name",function(){
    varname=this.get("name");
    alert("你改变了name属性为："+name);
  });
},
defaults:{
  name:'张三',
  age:'38'
},
aboutMe:function(){
    return'我叫'+this.get('name')+',今年'+this.get('age')+'岁';
  }
});
varman=newMan;
man.set({name:'the5fire'})//触发绑定的change事件

这是网上的一个example，我谈谈这里面如何运用model.

首先我们通过extend来拓展Backbone.Model，并且提供实例。这点很类似于java的代码结构，所有的类都继承object，然后通过拓展新的方法来创建属于自己的类。而backbone的特点是类似于xml编程模式，通过键值对应的方式来实现各种方法。创建成员变量。

Backbone.Model.extend({})

 

而其中的initialize方法类似于构造函数。也就是在对象实例化的时候调用。

defults相对于如果不修改该类的成员变量，构造时默认为变量赋值的函数。

我们对成员变量赋值可以通过set方法，例：

man.set({name：”xiaochaowei“,age:"21"});

而我们取值的时候可以通过get方法，例：

man.get("name");

而想要设定对象的方法，比如上面的想要弹出个人信息就可以通过键值对的方式:

函数名：function(){}

同时对于数据来说还提供了如下默认方法。

• – extend
• – constructor / initialize
• – get
• – set
• – escape
• – has
• – unset
• – clear
• – id
• – cid
• – attributes
• – defaults
• - toJSON
• – fetch
• – save
• – destroy
• – validate
• – url
• – urlRoot
• – parse
• – clone
• – isNew
• – change
• – hasChanged
• – changedAttributes
• – previous
• – previousAttributes

以上方法的详情请参看http://www.csser.com/tools/backbone/backbone.js.html#manual/Introduction

这里我想说一下我比较有感悟的save,fetch,destory

save 相当于CRUD里面的creat或者是update,它是指定一个url，然后backbone会判断对象是否是新的，如果对象是新的，则类似于create,请求为post，如果不是新的，类似与update,请求为get。

而fetch则类似于同步服务器数据，对模型尚未填充数据，或者服务器端已有最新状态的情况很有用处。同时提供success和error回调函数。

man.set({name:'the5fire'})//触发绑定的change事件
man1.fetch({url:'/getmans/',success:function(model,response){
alert('success');
//model为获取到的数据
alert(model.get('name'));
},error:function(){
//当返回格式不正确或者是非json数据时，会执行此方法
alert('error');
}})

destory：

destory相当于http的delete请求。同时也提供success和error回调。同时如果调用destory，事件会向上冒泡。

Backbone.collection

关于collection我觉得就是类似于list，是将model整合。首先看下面例子：

Book=Backbone.Model.extend({
default:{
title:'default'
},
initialize:function(){
}
});
BookShelf=Backbone.Collection.extend({
model:Book
});
varbook1=newBook({title:'book1'});
varbook2=newBook({title:'book2'});
varbook3=newBook({title:'book3'});
//var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用add
varbookShelf=newBookShelf;
bookShelf.add(book1);
bookShelf.add(book2);
bookShelf.add(book3);
bookShelf.remove(book3);
//基于underscore这个js库，还可以使用each的方法获取collection中的数据
bookShelf.each(function(book){
alert(book.get('title'));
});

这是网上一个很经典的例子。我觉得写得很好，可以很好的理解collection。一个book的model,然后又一个bookshelf,bookshelf将一个个book add到其中。

而如果想要从服务器端获取数据也可以通过fetch方法。和上面类似。我这里面就不多加说明了。

关于具体的api，请参看：http://www.csser.com/tools/backbone/backbone.js.html#manual/Model-fetch

Backbone.router

Router从名字上就可以看出是路由的意思，所以它的作用就是匹配各种地址。或者是连接，重设url，总之就是控制url.

我觉得这里面要强调的是匹配规则。

1.用“:”来把#后面的对应的位置作为参数

2.还有一种是“*”，它可以匹配所有的url

举个api里面的例子：

"search/:query/p:page" 能匹配 #search/obama/p2 , 这里传入了 "obama" 和 "2" 到路由对应的动作中去了。 

"file/*path 路由可以匹配 #file/nested/folder/file.txt，这时传入动作的参数为 "nested/folder/file.txt"。

routes: {
  "help/:page":         "help",
//匹配#help/10,调用help方法
  "download/*path":     "download",
//匹配#download/#download/xiaochaowei/demo.txt
  "folder/:name":       "openFolder",
}
router.bind("route:help", function(page) {
  ...
});

同时router还有

• – extend
• – routes
• – constructor / initialize
• – route
• – navigate

方法，具体请看上面连接。

History

关于Backbone.history api里面的解释是：

History 作为全局路由服务用于处理 hashchange 事件或 pushState，匹配适合的路由，并触发回调函数。 我们不需要自己去做这些事情 — 如果使用带有键值对的 路由，Backbone.history 会被自动创建。

而我的理解就是如果router创建好后，就可以通过start函数监视haschange()，来执行router里面定义的匹配操作。

这点我还是有点不明白。等写完后欢迎大家指点。

Backbone.sync(选择api说明）

Backbone.sync 是 Backbone 每次向服务器读取或保存模型时都要调用执行的函数。

Backbone.sync 的语法为 sync(method, model, [options])。

• method – CRUD 方法 ("create", "read", "update", 或 "delete")
• model – 要被保存的模型（或要被读取的集合）
• options – 成功和失败的回调函数，以及所有 jQuery 请求支持的选项

这里的api说明很清楚，我就不解释了。

Backbone.view

Backbone的view是用来显示你的model中的数据到页面的，同时它也可用来监听DOM
上的事件然后做出响应。这里关键接受几个函数，通过掌握这几个函数可以轻松的应用了。

el（form api)

所有的视图都拥有一个 DOM 元素（el 属性），即使该元素仍未插入页面中去。 视图可以在任何时候渲染，然后一次性插入 DOM 中去，这样能尽量减少 reflows 和 repaints 从而获得高性能的 UI 渲染。 this.el 可以从视图的 tagName，className，以及 id 属性创建，如果都未指定，el 会是一个空 div。

如果希望将 el 赋给页面 DOM 中已经存在的元素，直接设置其值为真实的 DOM 元素或 CSS 选择符字符串。

从api里面的介绍我们可以看出el就是获取dom节点的，这点类似于getelementById等。而如果我们或者了dom节点，我就可以通过render重绘页面，同时如果模型层的数据发生改变是，我们也可以立刻重绘，从而调整css和js。同时我们还可以制定一次render，避免调用多次浏览器的渲染，加快速度。

不过写到这，我看很多代码都有template。好像是underscore的库，我有点不明白，还有通过events绑定事件，我没有看出比bind好到了哪里。

以上就是我对backbone的理解。欢迎老师和助教还有同学们指点。