backbone学习笔记一

Posted 2020-09-25

事件event

on(bind) 在对象上绑定一个函数，只要该event被触发，绑定函数即被调用。可以用第三个参数提供一个上下文

off(unbind) 移除对象上绑定的函数，可以传递上下文和具体时间来解除特定的函数

trigger 触发给定事件的函数

once 同on相同，区别在于事件被触发一次后，函数就会被解除

listenTo 监听另一个对象上的特定事件，貌似是仍然算该事件的绑定函数

stopListening 停止对事件的监听

listenToOnce 同listenTo相同，事件被触发一次后，函数就会被解除

事件目录

• "add" (model, collection, options) — 当一个model（模型）被添加到一个collection（集合）时触发。 
• "remove" (model, collection, options) — 当一个model（模型）从一个collection（集合）中被删除时触发。
• "reset" (collection, options) — 当该collection（集合）的全部内容已被替换时触发。
• "sort" (collection, options) — 当该collection（集合）已被重新排序时触发。 
• "change" (model, options) — 当一个model（模型）的属性改变时触发。 
• "change:[attribute]" (model, value, options) — 当一个model（模型）的某个特定属性被更新时触发。 
• "destroy" (model, collection, options) —当一个model（模型）被destroyed（销毁）时触发。
• "request" (model_or_collection, xhr, options) — 当一个model（模型）或collection（集合）开始发送请求到服务器时触发。
• "sync" (model_or_collection, resp, options) — 当一个model（模型）或collection（集合）成功同步到服务器时触发。
• "error" (model_or_collection, resp, options) — 当一个model（模型）或collection（集合）的请求远程服务器失败时触发。
• "invalid" (model, error, options) — 当model（模型）在客户端validation（验证）失败时触发。 
• "route:[name]" (params) —  当一个特定route（路由）相匹配时通过路由器触发。
• "route" (route, params) — 当任何一个route（路由）相匹配时通过路由器触发。
• "route" (router, route, params) — 当任何一个route（路由）相匹配时通过history（历史记录）触发。
• "all" — 所有事件发生都能触发这个特别的事件，第一个参数是触发事件的名称。

当不想事件绑定的函数被触发时，可以传递{silent: true}作为参数

个人感觉在此部分是将用户行为与处理的js函数进行关联的部分。主要的作用只是绑定、解除绑定。可以是对单独对象的事件绑定也可以是对象间的事件绑定

模型model

个人感觉和类结构相似

extend 对某个父类进行继承，形成新的新的子类

constructor/initialize 创建一个类的实例，可以传入属性的初始值。initialize函数在实例创建后执行，constructor是构造函数

get 获得实例的属性值

set 设置一系列属性值，这些属性的值被更改后会有事件被触发

escape 获得html转义后的属性值

has 判断属性是否存在和属性值是否为空

unset 删除属性，会触发属性被更改的事件

clear 清除model的所有属性，包括id，会触发属性被更改的事件

id idAttribute cid 并不是十分清楚具体的区别 都是实例的属性

attributes 获取实例对象的所有属性，通常以json对象的形式表示

changed 包含所有自最后一次set后值改变的属性

defaults 为实例指定默认属性值

toJSON 返回一个实例的JSON字符串形式

sync、fetch、save、destroy 并不是什么了解和服务器交互的这四个函数

underscore方法

validate 在将数据存储到服务器前验证数据有效性

url parse 并没有弄清楚

clone 返回一个相同的实例

hasChanged 自从上次set之后是否改变，功能和changed相同

changedAttribute 同changed相同，似乎是同一功能只为了细小差别而

previous 在change发生的过程中，用于获取已经改变的旧值

previousAttribute 同上一个函数功能相同

个人感觉此部分就是对模型中存在的属性进行操作，无外乎增删改查操作

集合collection

集合是模型的有序组合，似乎是比模型更高层次，函数是对集合中模型的操作

extend 继承一个已经存在的collection

model 覆盖此属性来指定集合中包含的模型类，似乎这里指的是集合中包含的model的范围，而下面models中则是集合中model的实例

constructor/initialize 在这里需要注意的是，声明一个新的集合可能需要comparator函数来为集合中的模型排序

models 访问集合中模型的内置的javascript数组(这个不清楚是什么，不过应该是模型数组)

toJSON 返回一个包含模型属性的json数组

sync 同样是与服务器的交互

add 向集合添加一个模型或者模型数组，会触发add事件，这里不清楚集合的索引到底是一个什么结构，按理来说索引应该就是和数据本身的信息相关，但是这里面可以将数据插入到特定的索引位置？

remove 从集合中删除模型或者模型数组，会触发remove事件

reset 用一个新的模型数组替换原来的模型数组，相当于将原来的数组全部更新，这里也有事件触发但是并没有搞懂

set 将集合中的模型数组进行更改，感觉是简化的reset，同样会触发add,remove,change事件

get 通过id,cid来获取模型

at 通过索引来获取模型

push 在集合尾部添加一个模型

pop 删除并返回集合中最后一个模型

unshift 在集合头部添加一个模型

shift 删除并返回集合第一个模型

slice 返回一个模型数组，应该可以是集合中的模型数组的一部分

length 返回集合中模型的数量

comparator 集合所使用的排序规则

sort 强制对数组进行重新排序，这里说道一般情况是用不到的，因为会用comparator进行实时排序

pluck 从集合中的每个模型拉取属性，这里我自己把它理解为在数据库中选取单个属性的信息并返回

where 对集合中的模型进行过滤并取得合适的结果，似乎和SQL语句中的where相同

findWhere 同where相同，不同的是findWhere返回匹配的第一个模型

url parse 并没有弄清楚

clone 返回一个完全相同的新实例

fetch create 都是同服务器的交互，create似乎是创建一个模型的实例对象，将实例对象保存到服务器中，并同时添加到集合中，会触发add事件

个人感觉是比模型更高层次的数据结构，不过将对属性的操作改为对模型的操作

路由router 

从来没有接触过的，看介绍是和url相关，但是本人对url的理解也不是很深刻。

extend 同以上的extend相同

routes 将带参数的 URLs 映射到路由实例的方法上，匹配特定的url来触发特定的事件

constructor/initialize 同以上的相同，总感觉这类方法是对框架有一定理解后才能用的比较恰当

route 将带参数的 URLs 映射到路由实例的方法上

navigate 不是很清楚，介绍中说是与保存一个url相关，但并不清楚怎么保存以及保存的url是什么形式的，有什么用

execute 

历史history

留待后续

视图view

这也是一个不是很了解的部分，google到的信息是视图层最主要的是监听模型层上的数据改变，并且实时的更新html页面。当然也包括一些事件的注册或者ajax请求操作(发布事件),都是放在视图层来完成。

extend 与上面相同，不过与其说是一个继承的函数，还不如说是一个根据backbone提供的基类来定义自己的属性的创建新类的手段

construtor/initialize 与上面相同，不过这里提到有几个属性一旦说明就会注入到视图中，不懂这是什么意思，难道其他属性不是吗？

el 所有视图都拥有的属性，是DOM元素

$el 一个视图元素的缓存jQuery对象。 一个简单的引用，而不是重新包装的DOM元素。不懂这是什么意思

setElement 应用backbone视图到DOM元素上，不过既不懂backbone视图是什么，又不懂DOM元素为什么需要backbone视图

template 

render 默认实现是没有操作的，本函数的作用是从模型数据渲染视图模板，这个也不知道具体怎么回事，不过个人感觉应该是后面经常用到的，比较重要的一部分

remove 从DOM中移除一个视图，同时移除绑定在视图上的所有事件。但是...视图是怎么绑定上事件的...对视图真的是没有一点具象的理解

delegateEvents undelegateEvents 第一个不知道是什么意思，第二个是删除视图所有委托事件

实用功能utility

noConflict 返回对象的原始信息，避免冲突，似乎是当backbone中的对象太多时，可以用此方法来使用局部的对象

$ 似乎是设置$符号依赖哪个库