Backbone学习笔记

Posted 2020-10-13

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/