backbone.Model
backbone的model(模型)，用来存储数据,交互数据,数据验证,在view里面可以直接监听model来达到model一改变,就通知视图.
这个里面的代码是从backbone里面剥离出来,然后一点一点研究和调试出来的,可以单独运行,依赖underscore,jquery或者是zepto event.js是剥离出来的Backbone.Events
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <title>backbone</title> <style type="text/css"> *{padding:0;margin:0;} .wrap{width:960px; margin: 100px auto; padding: 20px 0;} ul{ list-style: none;} </style> </head> <body> <div class="wrap"> <div id="a1"></div> <div id="a2"></div> <div id="a3"></div> </div> <script src="http://files.cnblogs.com/wtcsy/jquery.js"></script> <script src="http://files.cnblogs.com/wtcsy/underscore.js"></script> <script src="http://files.cnblogs.com/wtcsy/events.js"></script> <script> (function(){ // Backbone.Model // -------------- // Backbone **Models** are the basic data object in the framework -- // frequently representing a row in a table in a database on your server. // A discrete chunk of data and a bunch of useful, related methods for // performing computations and transformations on that data. // Create a new model with the specified attributes. A client id (`cid`) // is automatically generated and assigned for you. var Model = Backbone.Model = function(attributes, options) { var attrs = attributes || {}; options || (options = {}); //每个molde都有一个cid 唯一的标识 this.cid = _.uniqueId('c'); //这个是存放设置值得hash列表 this.attributes = {}; //看这个model是属于哪个collection if (options.collection) this.collection = options.collection; //格式化参数 默认是不做变化的,可以自己扩展parse方法实现 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); }; _.extend(Model.prototype, Backbone.Events, { // A hash of attributes whose current and previous value differ. //存放 与之前attributes里面改变了的值 changed: null, //验证失败后返回的信息 // The value returned during the last failed validation. validationError: null, // The default name for the JSON `id` attribute is `"id"`. MongoDB and // CouchDB users may want to set this to `"_id"`. idAttribute: 'id', // The function that will generate an id for a model given that model's // attributes. generateId: function (attrs) { return attrs[this.idAttribute]; }, // Initialize is an empty function by default. Override it with your own // initialization logic. // 实例化一个model的时候总会被调用的方法 initialize: function(){}, // Return a copy of the model's `attributes` object. // 复制model.的attributes的属性 toJSON: function(options) { return _.clone(this.attributes); }, // Proxy `Backbone.sync` by default -- but override this if you need // custom syncing semantics for *this* particular model. sync: function() { return Backbone.sync.apply(this, arguments); }, // Get the value of an attribute. get: function(attr) { return this.attributes[attr]; }, // Get the HTML-escaped value of an attribute. escape: function(attr) { return _.escape(this.get(attr)); }, // Remove an attribute from the model, firing `"change"`. `unset` is a noop // if the attribute doesn't exist. // 删除model上的数据 触发监听 change 和 unset的回调 unset: function(attr, options) { return this.set(attr, void 0, _.extend({}, options, {unset: true})); }, // Clear all attributes on the model, firing `"change"`. clear: function(options) { var attrs = {}; for (var key in this.attributes) attrs[key] = void 0; return this.set(attrs, _.extend({}, options, {unset: true})); }, // Determine if the model has changed since the last `"change"` event. // If you specify an attribute name, determine if that attribute has changed. // 查看某个是属性值 是否被修改了 hasChanged: function(attr) { if (attr == null) return !_.isEmpty(this.changed); return _.has(this.changed, attr); }, // Return an object containing all the attributes that have changed, or // false if there are no changed attributes. Useful for determining what // parts of a view need to be updated and/or what attributes need to be // persisted to the server. Unset attributes will be set to undefined. // You can also pass an attributes object to diff against the model, // determining if there *would be* a change. changedAttributes: function(diff) { if (!diff) return this.hasChanged() ? _.clone(this.changed) : false; var val, changed = false; var old = this._changing ? this._previousAttributes : this.attributes; for (var attr in diff) { if (_.isEqual(old[attr], (val = diff[attr]))) continue; (changed || (changed = {}))[attr] = val; } return changed; }, // Get the previous value of an attribute, recorded at the time the last // `"change"` event was fired. //取改变了attribute之前的某个属性值 previous: function(attr) { if (attr == null || !this._previousAttributes) return null; return this._previousAttributes[attr]; }, // Get all of the attributes of the model at the time of the previous // `"change"` event. //获取改变了attribute之前 previousAttributes: function() { return _.clone(this._previousAttributes); }, // Set a hash of model attributes on the object, firing `"change"`. This is // the core primitive operation of a model, updating the data and notifying // anyone who needs to know about the change in state. The heart of the beast. set: function(key, val, options) { var attr, attrs, unset, changes, silent, changing, prev, current; if (key == null) return this; // Handle both `"key", value` and `{key: value}` -style arguments. // 根据传参的不同 统一成key : value的形式 if (typeof key === 'object') { attrs = key; options = val; } else { (attrs = {})[key] = val; } options || (options = {}); // Run validation. // 如果需要验证数据格式, 进行验证, 验证不通过 则返回 if (!this._validate(attrs, options)) return false; // Extract attributes and options. // unset表示删除 // changes 是存放改变值得数组 // changing 属性值是否正在改变中 unset = options.unset; silent = options.silent; changes = []; changing = this._changing; this._changing = true; //如果不是在改变值得进行中 复制this.attributes 到 this._previousAttributes if (!changing) { this._previousAttributes = _.clone(this.attributes); this.changed = {}; } current = this.attributes, prev = this._previousAttributes; // For each `set` attribute, update or delete the current value. for (attr in attrs) { val = attrs[attr]; // 如果设置的属性的值,和当前的值不一样 放到changes里面去 if (!_.isEqual(current[attr], val)) changes.push(attr); // 如果设置的值和之前的值 一样 this.changed删除掉该属性 不一样 添加到this.changed里面去 if (!_.isEqual(prev[attr], val)) { this.changed[attr] = val; } else { delete this.changed[attr]; } unset ? delete current[attr] : current[attr] = val; } var prevId = this.id; this.id = this.generateId(current); if (prevId !== this.id) this.trigger('change-id', this, prevId, options); // Trigger all relevant attribute changes. // 触发改变了属性值的相关的回调事件 if (!silent) { if (changes.length) this._pending = options; for (var i = 0, length = changes.length; i < length; i++) { this.trigger('change:' + changes[i], this, current[changes[i]], options); } } // You might be wondering why there's a `while` loop here. Changes can // be recursively nested within `"change"` events. // if (changing) return this; if (!silent) { while (this._pending) { options = this._pending; this._pending = false; this.trigger('change', this, options); } } this._pending = false; this._changing = false; return this; }, // **parse** converts a response into the hash of attributes to be `set` on // the model. The default implementation is just to pass the response along. parse: function(resp, options) { return resp; }, // Check if the model is currently in a valid state. isValid: function(options) { return this._validate({}, _.extend(options || {}, { validate: true })); }, // Run validation against the next complete set of model attributes, // returning `true` if all is well. Otherwise, fire an `"invalid"` event. _validate: function(attrs, options) { //在实例化的时候需要传入验证函数validate //然后每次设置值的时候都进行验证 //验证失败 触发invalid的回调事件 if (!options.validate || !this.validate) return true; attrs = _.extend({}, this.attributes, attrs); var error = this.validationError = this.validate(attrs, options) || null; if (!error) return true; this.trigger('invalid', this, error, _.extend(options, {validationError: error})); return false; }, // Fetch the default set of models for this collection, resetting the // collection when they arrive. If `reset: true` is passed, the response // data will be passed through the `reset` method instead of `set`. fetch: function(options) { options = options ? _.clone(options) : {}; if (options.parse === void 0) options.parse = true; var success = options.success; var collection = this; options.success = function(resp) { var method = options.reset ? 'reset' : 'set'; collection[method](resp, options); if (success) success(collection, resp, options); collection.trigger('sync', collection, resp, options); }; wrapError(this, options); return this.sync('read', this, options); }, // Set a hash of model attributes, and sync the model to the server. // If the server returns an attributes hash that differs, the model's // state will be `set` again. save: function(key, val, options) { var attrs, method, xhr, attributes = this.attributes; // Handle both `"key", value` and `{key: value}` -style arguments. if (key == null || typeof key === 'object') { attrs = key; options = val; } else { (attrs = {})[key] = val; } options = _.extend({validate: true}, options); // If we're not waiting and attributes exist, save acts as // `set(attr).save(null, opts)` with validation. Otherwise, check if // the model will be valid when the attributes, if any, are set. if (attrs && !options.wait) { if (!this.set(attrs, options)) return false; } else { if (!this._validate(attrs, options)) return false; } // Set temporary attributes if `{wait: true}`. if (attrs && options.wait) { this.attributes = _.extend({}, attributes, attrs); } // After a successful server-side save, the client is (optionally) // updated with the server-side state. if (options.parse === void 0) options.parse = true; 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); if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs); if (_.isObject(serverAttrs) && !model.set(serverAttrs, options)) { return false; } if (success) success(model, resp, options); model.trigger('sync', model, resp, options); }; wrapError(this, options); method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update'); if (method === 'patch') options.attrs = attrs; xhr = this.sync(method, this, options); // Restore attributes. if (attrs && options.wait) this.attributes = attributes; return xhr; }, // A model is new if it has never been saved to the server, and lacks an id. isNew: function() { return this.id == null; } }); // Helper function to correctly set up the prototype chain, for subclasses. // Similar to `goog.inherits`, but uses a hash of prototype properties and // class properties to be extended. //第一个参数是要扩展到原型上的对象, 第2个参数是静态方法扩展到构造函数上去的 var extend = function(protoProps, staticProps) { var parent = this; var child; // The constructor function for the new subclass is either defined by you // (the "constructor" property in your `extend` definition), or defaulted // by us to simply call the parent's constructor. if (protoProps && _.has(protoProps, 'constructor')) { child = protoProps.constructor; } else { child = function(){ return parent.apply(this, arguments); }; } // Add static properties to the constructor function, if supplied. //将静态方法和 parent上的静态方法一起扩展到child上面去 _.extend(child, parent, staticProps); // Set the prototype chain to inherit from `parent`, without calling // `parent`'s constructor function. //创建一个新的构造含糊Surrogate ; //this.constructor = child的意思是 Surrogate实例化后的对象 让对象的构造函数指向child // Surrogate的原型就是parent的原型 // 然后实例化给child的原型, // 这里不是直接从new parent给child.prototype 而是创建一个新的构造函数，我也不知道为啥要这样 var Surrogate = function(){ this.constructor = child; }; Surrogate.prototype = parent.prototype; child.prototype = new Surrogate; // Add prototype properties (instance properties) to the subclass, // if supplied. // 把第一个参数上的属性扩展到child.prototype if (protoProps) _.extend(child.prototype, protoProps); // Set a convenience property in case the parent's prototype is needed // later. // 拿一个属性引用父的原型, 以免以后要用到. child.__super__ = parent.prototype; return child; }; Model.extend = extend; // Backbone.sync // ------------- // Override this function to change the manner in which Backbone persists // models to the server. You will be passed the type of request, and the // model in question. By default, makes a RESTful Ajax request // to the model's `url()`. Some possible customizations could be: // // * Use `setTimeout` to batch rapid-fire updates into a single request. // * Send up the models as XML instead of JSON. // * Persist models via WebSockets instead of Ajax. // // Turn on `Backbone.emulateHTTP` in order to send `PUT` and `DELETE` requests // as `POST`, with a `_method` parameter containing the true HTTP method, // as well as all requests with the body as `application/x-www-form-urlencoded` // instead of `application/json` with the model in a param named `model`. // Useful when interfacing with server-side languages like **PHP** that make // it difficult to read the body of `PUT` requests. // Map from CRUD to HTTP for our default `Backbone.sync` implementation. var methodMap = { 'create': 'POST', 'update': 'PUT', 'patch': 'PATCH', 'delete': 'DELETE', 'read': 'GET' }; // Turn on `emulateHTTP` to support legacy HTTP servers. Setting this option // will fake `"PATCH"`, `"PUT"` and `"DELETE"` requests via the `_method` parameter and // set a `X-Http-Method-Override` header. Backbone.emulateHTTP = false; // Turn on `emulateJSON` to support legacy servers that can't deal with direct // `application/json` requests ... will encode the body as // `application/x-www-form-urlencoded` instead and will send the model in a // form param named `model`. Backbone.emulateJSON = false; Backbone.sync = function(method, model, options) { var type = methodMap[method]; // Default options, unless specified. _.defaults(options || (options = {}), { emulateHTTP: Backbone.emulateHTTP, emulateJSON: Backbone.emulateJSON }); // Default JSON-request options. var params = {type: type, dataType: 'json'}; // Ensure that we have a URL. if (!options.url) { params.url = _.result(model, 'url') || urlError(); } // Ensure that we have the appropriate request data. if (options.data == null && model && (method === 'create' || method === 'update' || method === 'patch')) { params.contentType = 'application/json'; params.data = JSON.stringify(options.attrs || model.toJSON(options)); } // For older servers, emulate JSON by encoding the request into an HTML-form. if (options.emulateJSON) { params.contentType = 'application/x-www-form-urlencoded'; params.data = params.data ? {model: params.data} : {}; } // For older servers, emulate HTTP by mimicking the HTTP method with `_method` // And an `X-HTTP-Method-Override` header. if (options.emulateHTTP && (type === 'PUT' || type === 'DELETE' || type === 'PATCH')) { params.type = 'POST'; if (options.emulateJSON) params.data._method = type; var beforeSend = options.beforeSend; options.beforeSend = function(xhr) { xhr.setRequestHeader('X-HTTP-Method-Override', type); if (beforeSend) return beforeSend.apply(this, arguments); }; } // Don't process data on a non-GET request. if (params.type !== 'GET' && !options.emulateJSON) { params.processData = false; } // If we're sending a `PATCH` request, and we're in an old Internet Explorer // that still has ActiveX enabled by default, override jQuery to use that // for XHR instead. Remove this line when jQuery supports `PATCH` on IE8. if (params.type === 'PATCH' && noXhrPatch) { params.xhr = function() { return new ActiveXObject("Microsoft.XMLHTTP"); }; } // Pass along `textStatus` and `errorThrown` from jQuery. var error = options.error; options.error = function(xhr, textStatus, errorThrown) { options.textStatus = textStatus; options.errorThrown = errorThrown; if (error) error.apply(this, arguments); }; // Make the request, allowing the user to override any Ajax options. var xhr = options.xhr = Backbone.ajax(_.extend(params, options)); model.trigger('request', model, xhr, options); return xhr; }; Backbone.$ = $; // Set the default implementation of `Backbone.ajax` to proxy through to `$`. // Override this if you'd like to use a different library. Backbone.ajax = function() { return Backbone.$.ajax.apply(Backbone.$, arguments); }; var wrapError = function(model, options) { var error = options.error; options.error = function(resp) { if (error) error(model, resp, options); model.trigger('error', model, resp, options); }; }; })(); </script> </body> </html>
Model的extend
Model的extend可以创建一个新的模型,扩展你所需要的方法和属性,这个方法在Model,View,Collection上都有.
这里得介绍下constructor,虽然网上已经有很多介绍了。 当一个构造函数入a = function(){}; a被实例化b,b.constructor就指向a,也就是说constructor指向它的构造函数的.但是这个属性是可以修改的
extend 这个函数依赖underscore
// Helper function to correctly set up the prototype chain, for subclasses. // Similar to `goog.inherits`, but uses a hash of prototype properties and // class properties to be extended. //第一个参数是要扩展到原型上的对象, 第2个参数是静态方法扩展到构造函数上去的 var extend = function(protoProps, staticProps) { var parent = this; var child; // The constructor function for the new subclass is either defined by you // (the "constructor" property in your `extend` definition), or defaulted // by us to simply call the parent's constructor. if (protoProps && _.has(protoProps, 'constructor')) { child = protoProps.constructor; } else { child = function(){ return parent.apply(this, arguments); }; } // Add static properties to the constructor function, if supplied. //将静态方法和 parent上的静态方法一起扩展到child上面去 _.extend(child, parent, staticProps); // Set the prototype chain to inherit from `parent`, without calling // `parent`'s constructor function. //创建一个新的构造含糊Surrogate ; //this.constructor = child的意思是 Surrogate实例化后的对象 让对象的构造函数指向child // Surrogate的原型就是parent的原型 // 然后实例化给child的原型, // 这里不是直接从new parent给child.prototype 而是创建一个新的构造函数，我不知道为啥要这样 var Surrogate = function(){ this.constructor = child; }; Surrogate.prototype = parent.prototype; child.prototype = new Surrogate; // Add prototype properties (instance properties) to the subclass, // if supplied. // 把第一个参数上的属性扩展到child.prototype if (protoProps) _.extend(child.prototype, protoProps); // Set a convenience property in case the parent's prototype is needed // later. // 拿一个属性引用父的原型, 以免以后要用到. child.__super__ = parent.prototype; return child; }; Model.extend = extend;
Model的set set(attributes, [options])
在调用set的方法，流程如下,在set的时候,看是否需要验证,需要验证则验证,验证成功就继续往下执行。然后再copy一个attributes的属性,赋值给this._previousAttributes,然后比较传入的参数跟attributes,这里有2中如果值一样则从this.changed里面删除,不一样则添加,this.changed总是保存这次跟上次之间值发生变化的那些属性. 然后再看时候设置了unset属性,如果设置了该属性从attributes删除该值,否则在attributes修改或者添加该值 然后看那些属性的值发生了变化,变化的属性值触发change:key的监听回调(key是属性名)，然后再触发change监听的回调
在调用set方法的时候大概用到了一下几个属性
_previousAttributes
changed
_changing
changed
_previousAttributes 这个属性总是记录model修改之前的数据
changed 这个属性总是记录这次set操作后,对于上次的数据,修改了哪些数据,就是保存修改的数据 changed顾名思义,已改变的
_changing 这个属性如果为true表示正在进行set中,false表示没有对model进行数据的操作
set方法可以传入2个参数,也可以传入3个参数,其实传入就是支持对象的入参,和key,value的入参,如果第一个参数是对象就当做2个参数来处理,如果第一个参数是字符串,就会当成3个参数来处理,另外一个参数options,里面有几个属性会经常用到unset，silent
unset 表示把这个属性取消
silent 表示把是否触发绑定该属性监听的回调,不设置或者设置成false都会触发change:attr,设置为true表示不触发监听回调
一个例子
var m = new Backbone.Model(); m.set({ name : "xxoo", age : 18, info : "wa haha!!!" }); //监听age的变化如果 当age改变时 小于18和大于等于18弹出的结果是不一样的 m.on("change:age",function(model,val){ if(val>=18){ alert("cheng nian le -_-"); }else{ alert("ni hai xiao ^_^"); } }); m.set({age:12}); //ni hai xiao ^_^ m.set({age:20}) //cheng nian le -_- //如果改变age 的时候不想触发监听的函数 可以设置silent m.set({age:20},{silent:true}) //取消一个属性 m.set({info:1},{unset:true}) console.log(m) //如果想监听所有的属性的变化可以用直接绑定chagne m.on("change",function(model){console.log(model)}) m.set({age:1}) m.set({name:2})
Model的unset model.unset(attribute, [options]) zzzzz
就是删除一个属性,实现其实很简单就是调用set方法，把options里面的silent设置成true
var m = new Backbone.Model() m.set("haha",123) m.unset("haha") //一次只能删除一个 参数不能传递对象 如果要删除多个就调用多次unset,如果要删除所有的,就调用clear
Model的validate和_validate
验证,在设置值得时候会进行验证,设置值得时候必须带上属性validate比如,m.set("test",11,{"validate":true})。validate是用户自己设定的验证函数,_validate是进行验证时的操作,验证失败后会触发invalid监听的回调
var testModel = Backbone.Model.extend({ validate:function(obj){ if(obj.test>10){ return "测试值不能大于10"; } if(obj.age<18){ return "不能小鱼18岁"; } } }) var m = new testModel() m.on("invalid",function(model,errText){alert(errText)}); //对设置值失败的统一处理函数,只要绑定了invalid,设置值失败了都会进这个地方 m.set("test",11,{"validate":true}) //这个设置会失败的 m.set("test",9,{"validate":true}) //设置会成功 m.set("test",2)//该值不会进行验证,因为没有设置{"validate":true} m.set("age",12,{"validate":true}) //这个测试当验证失败的时候他们回调用invalid的监听
Model的一些属性和方法 cid changed _previousAttributes hasChanged
每个modl实例化的时候都会创建一个cid 保证model的唯一性.
Model里面有一些属性和方法是专门对比上一次和修改后之前的差异的
changed 是属性 一个object 保存上一次和这次相比发生变化的值
_previousAttributes 是一个对象 保存上一次的attributes
hasChanged 是一个方法 判断一个属性，这一次跟上一次是否发生了变化
var m = new Backbone.Model(); m.set({ a:1, b:1, c:1, d:1, e:1 }); m.set({ a:2, b:3 }); //打印出来的只有a,b因为只有a,b发生了变化 console.log(m.changed) //做个对比可以看到 _previousAttributes保存的修改前的值 console.log(m._previousAttributes) console.log(m.attributes) //可以看到a返回的true c则是false m.hasChanged("a") m.hasChanged("c")
Model提供了跟后台交互的方法snyc fetch save destory方法 依赖jquery或者zepto,用到的也是$.ajax,基本上就是在做了一些事件的监听, 在工作中我都不用到