backbone学习笔记一

事件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中的对象太多时,可以用此方法来使用局部的对象

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

时间: 2024-10-18 16:01:14

backbone学习笔记一的相关文章

Backbone学习笔记一Backbone中的MVC

原文章地址http://bigdots.github.io/2015/12/01/Backbone学习笔记(一)/#more Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中models用于绑定键值数据和自定义事件:collections附有可枚举函数的丰富API: views可以声明事件处理函数,并通过RESRful JSON接口连接到应用程序. 下面通过实例来学习backbone的MVC.实例来自http://

Backbone学习笔记

MVC 爱创课堂今日分享-Backbone学习笔记 M表示模型V表示视图C表示控制器MVC最早出现在smalltalk语言中,MVC分别表示模型,视图,控制器,模型通常指的是数据,视图通常是它能看到的页面,控制器通常表示一些交互等等,MVC根据前后端的划分,又有不同的含义对于后端来说M(Model)模型,通常指的是底层的数据,例如对数据库操作数据的封装等V(View)视图,向前端输出的视图等等,包括渲染视图,创建视图等等C(Controller)控制器,指的是对模型以及视图的操作,例如获取请求,

Backbone学习笔记 - View篇

Backbone是一种Web端的MVC框架,这里纪录学习Model,View和Collection的笔记. 1 View initialize构造函数 Backbone.View 与jQuery库紧密结合. var SearchView = Backbone.View.extend({ initialize:function(){ alert("Alerts suck."); } }); var search_view = new SearchView(); initialize 就类

Backbone 学习笔记

Backbone 是一款基于模型-视图-控制器 MVC 模式的轻量级javascript 框架 ,可以用来帮助开发人员创建单页Web应用. 借助Backbone 我们可以使用REST的方式来最小化客户端和服务器间的数据传输,从而实现了更快加速的Web页面更新. 能心静下来学习了,以前以为Backbone 是一座高山用起来很难,结果只是学了2天就有一些新的,实在让人开心. 我整理了一下整个BackBone的学习记录在我的GIT里面,大部分事件都有例子并且有详细的注解和解释,结合require.js

backbone学习笔记:集合(Collection)

集合(Collection)是一个Backbone对象,用来组织和管理多个模型,它不仅仅是一个javascript数组,还提供了专门的方法来对集合进行排序.过滤和遍历,集合可以方便的与REST服务器进行通信. RoomCollection=Backbone.collection.extend({model: RoomModel}); var room1=new RoomModel({name:'test1'}); var room2=new RoomModel({name:'test2'});

backbone学习笔记:视图(View)

Backbone 视图对象主要用来渲染数据,监听事件. Backbone的视图对象可以展示Model数据,也可以把用户编辑的Model数据传递到后台,可以通过监听事件操作视图里的DOM元素 举例: var PreviewInvoiceItemView=Backbone.View.extend({ el:'#itemList', template: _.template($('#InvoiceItem').html()), initialize:function(){ this.template=

backbone学习笔记(1)

bb给网页应用提供框架,这是由于bb以下主要特性:1.带键-值绑定.自定义事件的model模型,2.具有丰富API的遍历函数的collection集合,3.声明式事件响应的view视图,4.通过RESTful的JSON接口与已经存在的API连接. 粗看文档,大致有以下心得: 1.model.collection类似rails 2.route都是RESTful的 3.数据绑定并不像angular自动,还是需要指定更新view中的哪里,但也更简单,不会像angular嵌入代码增加耦合. 印象不错,继

backbone学习笔记:模型(Model)(2)属性验证

http://www.midifan.com/moduleuser-index-413988.htmhttp://www.midifan.com/moduleuser-index-414047.htmhttp://www.midifan.com/moduleuser-index-413930.htmhttp://www.midifan.com/moduleuser-index-414053.htmhttp://www.midifan.com/moduleuser-index-413907.htm

【转】Backbone.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由