简单了解Backbone.js的Model模型以及View视图的源码_基础知识

今天我们先来谈谈Backbone.js MVC 中的 M , Model是backbone的核心部分，包含着页面展示内容的数据，还有围绕着数据操作的各种 转换，校验，计算 ，权限控制，服务端交互等等操作，你可以通过 Backbone.Model.extend() 生成你的model , 当然生成的model也可以作为一个基类去向下扩展更多的model

Backbone.Model Api

Backbone.Model 提供了大量方法用于实现一个Model的基本操作，当然其中最基本的还是基于 Backbone.Events 的事件机制，在Model的attributes发生变化的时候，相应的 change:attr事件会被触发，下面是提供的API:

其中有对数据进行服务端操作的方法：

• sync : 包装了Backbone.sync，xhr的基类
• fetch : 用于从服务端获取数据
• save ： 向服务端持久化数据
• destroy： 从服务端删除数据

model中数据操作的方法：

• get ： 从attributes中获取数据
• set ： 向attributes中设置数据
• escape : 对数据进行编码 ，使用的是underscore的 _.escape
• has : attributes中有无对应数据
• unset : 从attributes中删除数据
• clear : 清空attributes数据
• changed : 与上个状态（执行过set，unset），相比变化的值
• toJSON ： 将 attributes 序列化成一个对象
• parse : 当设置项parse为真的时候，初始化/set/unset/fetch等数据操作中会对目标数据进行一个解析返回解析后的对象，此方法为空方法，需要重写覆盖
• hasChanged : 与上个状态(执行过set,unset),相比是否发生过变化
• changeAttributes : 与上个状态(执行过set,unset),相比发生的所有值
• previous : 前一状态 (执行过set,unset)，该属性对应的值
• previousAttributes : 与上个状态(执行过set,unset),发生过变化对象的前一个状态的所有值

model中数据校验的方法：

• validate：用于对model中数据进行校验，需要重写覆盖默认方法
• validationError : 返回最近一个invalid时返回的值
• isValid ： 调用_validate方法

下面会针对一些重点的api进行讲解：

构造函数

构造函数主要对初始化的数据和选项进行设置，然后会对生成一个唯一的cid用于标示model,如果options中的parse为true,那么会对初始化数值通过parse方法进行一个解析，调用set方法，所有的初始值会被存入attributes中，调用initialize初始化方法 。model的初始化就完成了。

set

set方法会将值设置进入attribute中，设置时如果设置了slient为true,会触发相应的 change:attr 的事件，最后统一触发change事件，set方法部分代码如下：

set的整个流程就是 对传入的数值进行处理，变成一个键值对，然后对数值进行校验，检查正确性，然后开始进行设置操作，设置时检查数值时候是发生改变的，如果有则加入一个 changeed的对象中，然后检查unset的值，进行相应的添加更新删除操作。然后依次触发change:attr和change事件。

save

save方法用于向客户端持久化数据，会根据数据的不同和配置的不同选择使用create,update或者是patch,并且触发 sync 事件，以下为部分代码：

save 中最需要注意的就是 wait 的设置，当wait为真的时候，save返回会在xhr返回之后再执行set操作，而不是在xhr之前就进行set操作，因此change事件的触发时机也就不同了。

之前说过整个Backbone都是通过事件串联起来的，所以对于事件触发时机的了解和把握是非常重要的，不然会在开发过程中导致一些奇怪的问题出现。

Backbone.View
前面已经对backbone中的Event、Model、Collection代码进行了分析，现在我们来看下MVC中的V部分，也就是Backbone.View，View在Backbone中主要用于沟通页面中的DOM和Backbone.Model/Collection，页面的逻辑操作，DOM事件的绑定等，View部分的代码非常简答，加上注释只有110左右。 View部分有一下API：

方法不多，下面对部分API进行介绍:

构造方法

构造方法中为View生成了一个唯一的cid,以'view'开头,然后进行对目标属性viewOptions进行合并，接着调用_ensureElement判断el的情况，接着调用delegateEvents进行方法绑定，初始化完成 。

delegateEvents

setElement方法用于设置View对应的element , 这个方法在new的时候会被调用， 如果想要在使用过程中改变View的dom元素指向，可调用这个方法进行重新设置

_ensureElement

_ensureElement这个方法是内部方法，在构造函数中使用，用于判断指定的el在页面中存不存在，如果存在则对$el进行赋值，如果不存在，则生成一个$el,但是要注意这个对象是没有落地到dom树中的 。

delegateEvents

在View中你可以使用一个 key:value 集合指定对应的事件，在初始化的时候构造函数会调用delegateEvents进行绑定，需要注意的是所有在key中指定的元素的父元素都必须是$el,也就是说元素必须是$el的子节点，否则绑定失败。

View和其他backbone模块一个区别就是没有自己的内建自定义事件，当然他也组合了Events模块，但是所有的事件都需要自己进行建立。View主要是一个MVC模型的承载，其实真正的功能不多，其实从模型层面上看V在前端开发中是最接近业务逻辑的，所以在View中大部分的逻辑都是开发者自己去扩展的。