Backbone学习笔记

MVC

爱创课堂今日分享-Backbone学习笔记

M表示模型
V表示视图
C表示控制器
MVC最早出现在smalltalk语言中，MVC分别表示模型，视图，控制器，模型通常指的是数据，视图通常是它能看到的页面，控制器通常表示一些交互等等，MVC根据前后端的划分，又有不同的含义
对于后端来说
M（Model）模型，通常指的是底层的数据，例如对数据库操作数据的封装等
V（View）视图，向前端输出的视图等等，包括渲染视图，创建视图等等
C（Controller）控制器，指的是对模型以及视图的操作，例如获取请求，返回数据，根据请求返回视图
对于前端来说
机器可读性强的数据人眼可读性差，人眼可读性强的数据机器可读性差
前端的本质就是将机器可读性强的数据转化成人眼可读性强的数据（视图），将人眼可读性强的数据转化成机器可读性强的数据（请求数据）
M，通常指的是机器可读性强的数据。例如json，对象，数组等等
V，通常值的是人眼可读性强的数据。例如下拉框，表单，浮层
C，通常指的一些交互或者请求，（将人眼可读性强的数据与机器可读性强的数据做转化）
 前端经典图片，通过这张图我们能看到MVC在前端的流程
用户可以操作控制器（事件，交互，请求等等）
控制可以操作模型，（发送请求更新数据）
控制器可以操作视图，（路由改变呈现不同的页面，点击事件打开浮层）
视图可以操作模型，（视图根据数据来渲染，此时从模型中获取数据）
经典的MVC模型是一个单向的，不同的框架对于MVC实现有不同的变化
例如Backbone对于MVC实现就有所不同，例如Backbone增强了模型和视图，弱化了控制器
从图中我们可以看出
用户可以操作控制器（更改路由）
用户可以操作视图（触发事件）
控制器可以操作视图（路由改变选择不同页面渲染）
控制器可以更改模型（路由改变请求不同的数据）
视图可以操作模型（改变视图，可以更改数据）
模型可以操作视图（数据变化，重新渲染视图）
在Backbone中MVC是双向的

Backbone获取

Github： https://github.com/jashkenas/backbone
中文文档: http://www.css88.com/doc/backbone/
Bower安装

Backbone依赖文件

第一类 类jquery库 例如jquery，zepto
第二类 backbone拓展库 underscore，主要是为模型中 模型以及集合拓展的
在Backbone中模型Model特指两方面，一方面是Model模型一方是Collection集合
Backbone对于数据操作比较复杂的页面比较适合
体验backbone

1 <script type="text/javascript" src="lib/jquery.js"></script>
2 <script type="text/javascript" src="lib/underscore.js"></script>
3 <script type="text/javascript" src="lib/backbone.js"></script>

模型Model

创建模型

一种构造函数式
通过Backbone.Model
是一个类，必须通过new关键字创建
参数就是模型上的属性
一种继承式
通过Backbone.Model.extend继承得到一个类
返回值就是一个新的类，我们可以通过这个类来创建模型实例化对象，并且这种方式是最常用的方式
创建实例化对象分成两步
第一步创建继承类
传递参数会保留在模型实例化对象的原型上（与第一种烦那个是的区别点）
第二步根据继承类实例化对象
传递的参数会保留实例化对象是attributes属性中

模型实例化对象

模型实例化对象中添加的属性会添加到attributes属性中
Attributes表死好模型属性对象
Changed表示是否被修改
Cid表示模型的id

1 // 构造函数式创建模型
2 // 用一个模型表示一个商品，商品是由价格的
3 var p1 = new Backbone.Model({
4 price: 1000
5 })
6 
7 // 第一步 创建模型类
8 var Product = Backbone.Model.extend({
9 color: ‘red‘
10 })
11 // 第二步 通过模型类实例化对象
12 var p2 = new Product({
13 price: 2000
14 })

defaults

可以通过defaults定义默认属性，
在里面定义的属性，在创建会默认添加上
在继承式创建模型时候，defaults是一个特殊属性，里面的内容会在实例化对象时候，添加到实例化对象的attributes属性中
Defaults属性只能在继承类的时候有作用
 
继承是创建模式是很灵活的，因为我们可以添加默认属性
默认属性在实例化对象的时候，如果传递了属性值，默认属性会被覆盖

1 var Product = Backbone.Model.extend({
2 color: ‘red‘,
3 title: ‘小米手机‘,
4 // 添加默认宽高属性
5 defaults: {
6 width: 100,
7 height: 200
8 }
9 })

构造函数

Backbone的继承式创建模型的时候，可以传递构造函数，
我们使用继承式创建模型类的时候，有一些属性是特殊的，例如defaults，还有一些事特殊方法，例如构造函数initialize
每次实例化对象的时候，构造函数都会被执行
通常我们在构造函数中为模型绑定事件，或者适配模型实例化对象的属性
构造函数中
参数就是实例化对象时候传递的数据
作用域就是当前模型对象

1 var Product = Backbone.Model.extend({
2 // 特殊方法叫initalize表示构造函数
3 initialize: function () {
4 if (this.attributes.price) {
5 this.attributes.onsale = true
6 } else {
7 // 如果没有价格，设置onsale是false
8 this.attributes.onsale = false;
9 }
10 
11 }
12 })

模型和对象的转换

对于一个模型实例化对象来说，他的attributes属性是他的核心数据，我们使用模型就是使用模型的attributes数据，
Backbone提供了一个toJSON方法，可以方便我们将模型数据转化对象
Js的等价方法，（相同功能的方法）
JSON.parse： 是将字符串转化成对象，
JSON.stringify: 将对象转化成字符串
toJSON() === JSON.parse(JSON.stringify())

1 var p1Obj = p1.toJSON();
2 console.log(p1Obj)
3 var str = JSON.stringify(p1);
4 console.log(JSON.parse(str))

获取模型的属性

Backbone的模型提供一个get方法，可以获取模型的属性值
对于一个模型，
如果存在这个属性，那么就返回这个属性值
如果不存在这个属性，那么就返回undefined
注意这里的指的是attributes中的数据属性

1 price = p1.get(‘price‘)
2 price = p2.get(‘price‘)

设置属性方法

Backbone提供了一个set方法，用来设置模型上的属性或者更改模型属性，跟jquery中css，attr一样，但是不支持获取属性
当传递一个参数的时候，表示设置一组属性，（是个对象）
当传递两个参数的时候，表示设置一个属性
Set方法调用时只能触发一次事件，不论修改多少属性，
我们可以通过silent属性来屏蔽修改的操作被事件监听
 
构造函数只在创建模型时候执行，不会再修改模型时候执行

1 p1.set({
2 address: ‘江苏 南京‘,
3 store: ‘苏宁易购官方旗舰店‘
4 })
5 p1.set(‘sale‘, 4055, {silent: true});

事件

对于一个模型实例化对象，我们可以对其绑定一些事件监听他们操作，通过实例化对象的on方法来监听事件
我们可以在模型构造函数内为模型添加事件
不论模型什么时候修改数据，都会触发 事件的执行
我们可以在模型实例化对象后面为模型添加事件
只有在绑定事件后面修改或者添加属性才会被监听，
在绑定事件之前添加或者修改属性是不会被监听的
我们绑定事件的时候，尽量绑定在构造函数内，这样可以保证事件安全可靠的被执行
有时根据需求的需要，我们可以在视图模块，或者集合模块绑定模型事件

1 p2.on(‘change‘, function () {
2 console.log(‘change‘)
3 })

判断模型修改

hasChanged：判断模型是否被修改

1 console.log(p2.hasChanged())

删除属性

Unset：删除模型的某个属性
参数就是一个字符串，表示某一个属性
方法底层的实现是通过set实现
有时候我们需要对删除的属性做监控，此时我们可以传递一个validate属性并设置true
此时就能触发模型实例化对象的validate方法，在这个方法中，我们就可以监听删除了哪个属性
第一个参数表示attributes对象
第二个参数执行删除时传入的配置
如果方法返回true，将阻止删除
如果方法返回false，将执行删除

1 p2.unset(‘price‘)

本文章版权归爱创课堂所有，转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/

时间： 2024-10-11 16:51:05

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学习笔记 - 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学习笔记一

事件event on(bind) 在对象上绑定一个函数,只要该event被触发,绑定函数即被调用.可以用第三个参数提供一个上下文 off(unbind) 移除对象上绑定的函数,可以传递上下文和具体时间来解除特定的函数 trigger 触发给定事件的函数 once 同on相同,区别在于事件被触发一次后,函数就会被解除 listenTo 监听另一个对象上的特定事件,貌似是仍然算该事件的绑定函数 stopListening 停止对事件的监听 listenToOnce 同listenTo相同,事件被触发

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 // 路由