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，为子类自身提供属性