backbone的一些认识

backbone 官网：http://backbonejs.org/

backbone 作者：Jeremy Ashkenas 杰里米·阿什肯纳斯 (同时还是：underscore、coffeescript的作者)

GitHub ： https://github.com/jashkenas/

js的作用

• 从大范围来说包含两个内容：
  markdown 4行
  1. 第一是将浏览器的数据与服务器的数据在适当的时候进行相互同步；

   

  2.第二是在用户与浏览器，浏览器与服务器之间的交互过程中，控制页面的变化来反馈不同的功能效果
• 从技术上来说：
  4行
  1.前者主要体现为异步请求的处理；

   

  2.后者主要体现为对DOM的操作;

简介

• Backbone是一个非常轻量级的javascript库，依赖于Underscore库，体积轻量，功能十分强大，使用该架构可以打造一个模型——视图——控制器即MVC类结构的应用程序，能够高效、分门别类地管理Web应用程序中纷乱复杂的javascript代码，以及处理单页面界面（SPI）中含有大量复杂的AJAX交互请求。
• 结构：

 

 

主要原因是它提供了一套非常完整的MVC结构的Web开发框架，在这套框架中，数据模型（Model）负责数据原则的创建和各类事件的自定义，并通过key/value形式绑定原型数据；通过数据模型集合（Collection）所提供的API向原型中添加各类数据；最后通过视图控制器（View）绑定页面中元素的内容并处理相应事件，并通过RESTful JSON接口方式与原有应用程序中的数据进行动态交互。

[RESTful]： http://kb.cnblogs.com/page/512047/

[RESTful 架构]： http://www.ruanyifeng.com/blog/2011/09/restful.html

• API ：丰富多样
  javascript 36行
   

  1. initailize

  .

  当创建model实例时，可以传入 属性 (attributes)初始值，这些值会被 set （设置）到 model。

  如果定义了 initialize 函数，该函数会在model创建后执行。

   

  2. defaults

   

  defaults 散列（或函数）用于为模型指定默认属性。 创建模型实例时，任何未指定的属性会被设置为其默认值

   

  3. attributes

   

  实例化的模型对象所有属性都保存在attributes的对象中，对象的set和get方法都是围绕该对象进行存储的。

   

  4. previous 和 previousAttributes 方法

   

  这两个方法都是返回对象在修改之前的上一个状态的属性值。

   

  5. render

   

  重载本函数可以实现从模型数据渲染视图模板，并可用新的 HTML 更新 this .el。 推荐的做法是在 render 函数的末尾 return this 以开启链式调用。

   

  6. fetch

   

  委托给Backbone.sync从服务器重置模型的状态，返回jqXHR

   

  7. save

   

  委托给Backbone.sync，保存模型到数据库（或替代持久化层）， 如果验证成功，返回jqXHR，否则为 false

   

   

  8. destroy

   

  通过委托一个HTTP DELETE请求给Backbone.sync破坏服务器上的模型。 返回一个jqXHR对象， 或者如果模型isNew，那么返回 false 。

  ......
• 特点：
1. MVC结构化
   2行
   数据交互、逻辑处理、页面展示分离，可以组织分工开发，减少重复开发，提高代码的开发效率和可维护性
2. 继承特性
   3行
   Backbone框架已面向对象的方式编写自己的数据、集合、视图模型，这些模型具有可继承性，方便扩展自定义的属性和方法，是的应用的框架更加清晰，更利于后续代码的维护与升级。

    
3. 事件统一管理
   9行
   事件统一放在events对象里面管理，操作方便，清晰明了。

   events：{

   'click #btn':'btnAdd'

   }

   click:表示元素绑定的事件；

   #btn：表示绑定元素;

   btnAdd：表示事件触发时所执行的函数名称；

    
4. 绑定页面模板
   5行
   因为Backbone主要依赖于Underscore，这样直接可以调用页面中的HTML模板，这样有两个好处：

    

   一是，可以在HTML模板中嵌入Javascript代码，无须在动态生成HTML元素时拼接字符串，减少页面执行时的出错率；

   二是，可以在视图中管理页面的模板，即定义多套HTML页面模板，再根据实际需要选择加载荷叶面的渲染，极大提升了开发人员的工作效率；
5. 服务端无缝交互
   4行
   在Backbone内部中，有一套与服务器数据自动同步的机制，通过这套机制，用户只需要关注客户端的操作，

    

   执行完这些操作后的数据将会在模型类中自动同步到服务器中。即只要在页面中数据有变化，数据就会自动与服务器同步。

backbone的MVC理解

• Backbone.Model
  markdown 6行
  Model这个模块可以让我们用来定义一些纯数据管理的类，大部分情况下，这些类就是我们所要开发的功能对应的业务实体，

   

  用Model定义的类能够为我们提供直接修改和获取业务实体数据属性的功能，也能够通过简单明了的api直接与服务器进行同步，

   

  比如前面用到的fetch，save，还有没用到的destroy等
• Backbone.View
  markdown 4行
  View这个模块可以让我们来封装页面中某个独立完整部分的UI功能，它往往会与Model模块进行关联，并且配合模板一起完成UI的更新，

   

  通过监听Model实例的变化来重新渲染html，通过自身注册的事件将UI的变化同步到Model实例，它就像一个控制器，同步数据与界面UI的实时变化。
• Backbone.Collection
  markdown 14行
  另外的一个模块Collection，这个模块你可以把它定义出来的东西看成是一个数组，但是它比数组的功能更丰富，

   

  因为它可以指定存储某种Model的实例，代表Model实例的一个集合，也提供有简单的api比如fetch，create方法来直接同步服务器的数据；

   

  如果说Model跟View的关系，是把数据与UI进行解耦，那么Collection跟View，就是把数据列表与UI进行解耦，

   

  它们的内涵跟机制都是差不多的，只不过Model实例仅仅是作用于单条数据的功能，而Collection实例可以作用于多条数据的功能；

   

  就跟Model可以被直接关联到View一样，Collection实例也能直接通过collection属性，在创建View实例的时候，传递给View；

   

  在Collection内的model发生增删改的时候，通知View实例去重新渲染html；

   

  在用户与View实例发生交互的时候，View主动去调整Collection里面的内容；View层还是充当控制器的作用，实时同步UI与Collection之间的变化。
• 三者之间的联系：

 

当backbone把界面逻辑拆分成Model,View和Collection三个模块之后，由于数据的变化，导致UI变化的逻辑，处理起来就特别容易。

我们不用再去一一手工按数据属性找到相应的元素去做替换了，只要View层实例，监听到关联的Model实例或者Collection实例有变化（增删改）的时候，

去调用View层实例的render方法，重新将界面渲染一遍即可，而这个render方法因为有模板引擎的帮助，渲染的步骤仅用一句话就能完成：

this .$el.html(Mustache.render( this .template, this .model.toJSON()))

[Mustache官网]： https://mustache.github.io

• 其他模块
1. Events
   2行
   Events是backbone所有机制的核心基础，但它并不是这个框架的思想所在，backbone只是需要它来完成自己想做的事情。
2. History跟Router
   2行
   是backbone提供的工具

与服务器同步数据

• 与服务器同步数据
  markdown 18行
  backbone 默认实现了一套与RESTful风格的服务端同步模型的机制，这套机制不仅可以减轻开发人员的工作量，

   

  而且可以使模型变得更为健壮（在各种异常下仍能保持数据一致性）。不过，要真正发挥这个功效，

   

  一个与之匹配的服务端实现是很重要的。为了说明问题，假设服务端有如下REST风格的接口：

   

  GET /resources 获取资源列表

   

  POST /resources 创建一个资源，返回资源的全部或部分字段

   

  GET /resources/{id} 获取某个id的资源详情，返回资源的全部或部分字段

   

  DELETE /resources/{id} 删除某个资源

   

  PUT /resources/{id} 更新某个资源的 全部 字段，返回资源的全部或部分字段

   

  PATCH /resources/{id} 更新某个资源的 部分 字段，返回资源的全部或部分字段
• backbone 会使用到上面这些HTTP方法的地方主要有以下几个：
  34行
  Model.save() 逻辑上，根据当前这个model的是否具有 id 来判断应该使用POST还是PUT，

   

  如果model没有id，表示是新的模型，将使用 POST ，将模型的字段全部提交到 /resources ；

   

  如果model具有id，表示是已经存在的模型，将使用 PUT ，将模型的全部字段提交到 /resources/{id} 。

   

  当传入 options 包含 patch:true 的时候，save会产生 PATCH 。

   

  Model.destroy() 会产生 DELETE ，目标url为 /resources/{id} ，如果当前model不包含id时，不会与服务端同步，

   

  因为此时backbone认为model在服务端尚不存在，不需要删除

   

  Model.fetch() 会产生 GET ，目标url为 /resources/{id} ，并将获得的属性更新model。

   

  Collection.fetch() 会产生 GET ，目标url为 /resources ，并对返回的数组中的每个对象，自动实例化model

   

  Collection.create() 实际将调用 Model.save

   

  options 参数存在于上面任何一个方法的参数列表中，通过 options 可以修改backbone和ajax请求的一些行为，

   

  可以使用的options包括：

   

  wait : 可以指定是否等待服务端的返回结果再更新model。默认情况下不等待

   

  url : 可以覆盖掉backbone默认使用的url格式

   

  attrs : 可以指定保存到服务端的字段有哪些，配合 options.patch 可以产生 PATCH 对模型进行部分更新

   

  patch : 指定使用部分更新的REST接口

   

  data : 会被直接传递给jquery的ajax中的data，能够覆盖backbone所有的对上传的数据控制的行为

   

  其他 : options中的任何参数都将直接传递给jquery的ajax，作为其options
• Backbone 的另一个优势是易于通过 Ajax 交互与服务器进行通信。
  13行
  在模型上调用一个 save() 方法会通过 Rest JSON API 异步将当前状态保存到服务器。

   

  save() 函数将在后台委托给 Backbone.sync，这是负责发出 RESTful 请求的组件，默认使用 jQuery 函数 $.ajax()。

   

  由于调用了 REST 风格架构，每个 Create、Read、Update 或 Delete (CRUD) 活动均会与各种不同类型的 HTTP 请

   

  求（POST、GET、PUT 和 DELETE）相关联。首先保存模型对象，使用一个 POST 请求，创建一个标识符 ID，其后

  ，尝试发送对象到服务器，使用一个 PUT 请求。

   

  Fetch() 方法属于异步调用，因此，在等待服务器响应时，应用程序不会中止。在一些情况下，要操作来自服务器的原

   

  始数据，可以使用集合的 parse() 方法。
• Backbone的extend方法
  [extend方法]： http://blog.csdn.net/sillies_3/article/details/46559019
  6行
  extend（）方法接受两个参数；

   

  参数1：protoProps，为子类的原型prototype提供属性

   

  参数2：staticProps，为子类自身提供属性