Backbone.Model
今天我们先来谈谈Backbone.js MVC 中的 M , Model是backbone的核心部分，包含着页面展示内容的数据，还有围绕着数据操作的各种 转换，校验，计算 ，权限控制，服务端交互等等操作，你可以通过 Backbone.Model.extend() 生成你的model , 当然生成的model也可以作为一个基类去向下扩展更多的model
var People = Backbone.Model.extend({
});
var Man = People.extend({
});
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进行讲解：
构造函数
var Model = Backbone.Model = function(attributes, options) {
var attrs = attributes || {};
options || (options = {});
this.cid = _.uniqueId('c');
this.attributes = {};
if (options.collection) this.collection = options.collection;
if (options.parse) attrs = this.parse(attrs, options) || {};
attrs = _.defaults({}, attrs, _.result(this, 'defaults'));
this.set(attrs, options);
this.changed = {};
this.initialize.apply(this, arguments);
};
构造函数主要对初始化的数据和选项进行设置，然后会对生成一个唯一的cid用于标示model,如果options中的parse为true,那么会对初始化数值通过parse方法进行一个解析，调用set方法，所有的初始值会被存入attributes中，调用initialize初始化方法 。model的初始化就完成了。
set
model.set(attributes, [options])
set方法会将值设置进入attribute中，设置时如果设置了slient为true,会触发相应的 change:attr 的事件，最后统一触发change事件，set方法部分代码如下：
set: function(key, val, options) {
//......
// key值可以是键值对，也可以是一个字符串,将赋值传入attrs属性中
if (typeof key === 'object') {
attrs = key;
options = val;
} else {
(attrs = {})[key] = val;
}
// ....
//对设置的值进行校验
if (!this._validate(attrs, options)) return false;
unset = options.unset; // unset为true时会删除设置的值,unset方法就是通过 set(key,val,{unset:true})去实现的
//当对象正在被被设置的时候，不给 previousAttributes 赋值
if (!changing) {
this._previousAttributes = _.clone(this.attributes);
this.changed = {};
}
current = this.attributes, prev = this._previousAttributes;
//如果对Id进行了设置，则对对象的id属性也进行改变
if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];
//进行 设置或者是删除操作
for (attr in attrs) {
val = attrs[attr];
if (!_.isEqual(current[attr], val)) changes.push(attr);
if (!_.isEqual(prev[attr], val)) {
this.changed[attr] = val;//为model的changed进行设置
} else {
delete this.changed[attr];
}
unset "htmlcode">
model.save([attributes], [options])
save方法用于向客户端持久化数据，会根据数据的不同和配置的不同选择使用create,update或者是patch,并且触发 sync 事件，以下为部分代码：
save: function(key, val, options) {
// ......
//当设置了wait属性true的时候 , save方法先不执行set方法(不触发change事件),只执行validate
if (attrs && !options.wait) {
if (!this.set(attrs, options)) return false;
} else {
if (!this._validate(attrs, options)) return false;
}
//如果wait为true,设置this.attributes
if (attrs && options.wait) {
this.attributes = _.extend({}, attributes, attrs);
}
// .....
var model = this;
var success = options.success;
options.success = function(resp) {
// Ensure attributes are restored during synchronous saves.
model.attributes = attributes;
var serverAttrs = model.parse(resp, options);
//如果wait为true , 那么会在请求返回之后才进行set操作
if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);
if (_.isObject(serverAttrs) && !model.set(serverAttrs, options)) {
return false;
}
if (success) success(model, resp, options);
//触发 sync 事件
model.trigger('sync', model, resp, options);
};
//生成XHR onerror 回调函数
wrapError(this, options);
//选择方法
method = this.isNew() "2016214171843674.png (197×245)" src="/UploadFiles/2021-04-02/2016214171843674.png">
方法不多，下面对部分API进行介绍:
构造方法
var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
var View = Backbone.View = function(options) {
this.cid = _.uniqueId('view');
options || (options = {});
_.extend(this, _.pick(options, viewOptions));
this._ensureElement();
this.initialize.apply(this, arguments);
this.delegateEvents();
};
构造方法中为View生成了一个唯一的cid,以'view'开头,然后进行对目标属性viewOptions进行合并，接着调用_ensureElement判断el的情况，接着调用delegateEvents进行方法绑定，初始化完成 。
delegateEvents
view.setElement(element)
setElement: function(element, delegate) {
if (this.$el) this.undelegateEvents();//如果已经存在this.$el，进行事件解绑
//对$el进行赋值，本质是一个jquery或者是 Lo-Dash and Zepto 对象
this.$el = element instanceof Backbone.$ "htmlcode">
_ensureElement: function() {
//如果已经对el进行设置，直接调用setElement方法
if (!this.el) {//如果没有设置，生成一个元素对象，再调用setElement方法
var attrs = _.extend({}, _.result(this, 'attributes'));
if (this.id) attrs.id = _.result(this, 'id');
if (this.className) attrs['class'] = _.result(this, 'className');
var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);
this.setElement($el, false);
} else {
this.setElement(_.result(this, 'el'), false);
}
}
_ensureElement这个方法是内部方法，在构造函数中使用，用于判断指定的el在页面中存不存在，如果存在则对$el进行赋值，如果不存在，则生成一个$el,但是要注意这个对象是没有落地到dom树中的 。
delegateEvents
delegateEvents([events])
// *{"event selector": "callback"}*
//
// {
// 'mousedown .title': 'edit',
// 'click .button': 'save',
// 'click .open': function(e) { ... }
// }
delegateEvents: function(events) {
//如果不存在events,则直接返回
if (!(events || (events = _.result(this, 'events')))) return this;
//先解除所有的事件绑定
this.undelegateEvents();
//处理每个事件
for (var key in events) {
var method = events[key];
//解析回调函数
if (!_.isFunction(method)) method = this[events[key]];
if (!method) continue;
//对选择器进行分析
var match = key.match(delegateEventSplitter);
var eventName = match[1], selector = match[2];
method = _.bind(method, this);
//绑定的事件名都是以 eventName + '.delegateEvents' + cid 组成,
//这么做能够在undelegateEvents的时候选择到这个View的所有事件
eventName += '.delegateEvents' + this.cid;
if (selector === '') {
this.$el.on(eventName, method);
} else {
this.$el.on(eventName, selector, method);
}
}
return this;
}
在View中你可以使用一个 key:value 集合指定对应的事件，在初始化的时候构造函数会调用delegateEvents进行绑定，需要注意的是所有在key中指定的元素的父元素都必须是$el,也就是说元素必须是$el的子节点，否则绑定失败。
View和其他backbone模块一个区别就是没有自己的内建自定义事件，当然他也组合了Events模块，但是所有的事件都需要自己进行建立。View主要是一个MVC模型的承载，其实真正的功能不多，其实从模型层面上看V在前端开发中是最接近业务逻辑的，所以在View中大部分的逻辑都是开发者自己去扩展的。
相思资源网 Design By www.200059.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。