backbone库学习-model

backbone库学习-model

backbone库的结构：

http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html

本文所有例子来自于http://blog.csdn.net/eagle_110119/article/details/8842007

 

1.1  先看model块的结构

var Model = Backbone.Model = function(attributes, options){}
_.extend(Model.prototype, Events,{..})
var modelMethods = ['keys', 'values', 'pairs', 'invert', 'pick', 'omit'];
_.each(modelMethods, function(method) {})

第一个是Model的构造器，第二个是Model的原型。注意，这里将Events和一系列的自定义参数都放进了Model的原型上，backbone必须依赖一个underscore库，我们在underscore库中找到相对应的方法。

_.extend = function(obj) {
        each(slice.call(arguments, 1), function(source) {
           if (source) {
                for (var prop in source) {
                    obj[prop] = source[prop];
                }
            }
        });
        return obj;
    };

model上的方法非常多，我们先从实例化开始，先上例子

//定义Book模型类
    var Book = Backbone.Model.extend({
        defaults: {
            name: 'unknow',
            author: 'unknow',
            price: 0
        }
    })

第一句话：

var Model = Backbone.Model = function(attributes, options){...}
Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend

找到extend方法

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')) {//检查protoProps是否拥有constructor属性(不考虑原型上)
            child = protoProps.constructor;
        } else {
            child = function(){ return parent.apply(this, arguments); };//借用构造器，this指向model构造器,让子类实例化时，可以获取父类构造器的成员
        }

        // Add static properties to the constructor function, if supplied.
        _.extend(child, parent, staticProps);//将父类和staticProps上的属性成员统统传给child的构造器上

        // Set the prototype chain to inherit from `parent`, without calling
        // `parent`'s constructor function.
        var Surrogate = function(){ this.constructor = child; };
        Surrogate.prototype = parent.prototype;
        child.prototype = new Surrogate;//临时构造器的方式完成继承，Surrogate属于中间件，子类实例修改不会影响父类原型，可以让子类实例获取父类原型上的成员

        // Add prototype properties (instance properties) to the subclass,
        // if supplied.
        if (protoProps) _.extend(child.prototype, protoProps);//将自定义信息绑定到子类原型上

        // Set a convenience property in case the parent's prototype is needed
        // later.
        child.__super__ = parent.prototype; //_super_属性方便子类直接访问父类原型

        return child; //返回子类构造器
    };

所以我们最后得到那个Book其实是一个继承了Model的子类构造器。ok，使用它，必须要实例化它。

var javabook = new Book();

这里，我们可以在实例化的时候，传入我们的参数，如下：

var javabook = new Book({
        name : 'Thinking in Java',
        author : 'Bruce Eckel',
        price : 395.70
    })

 

我们看一下构造器

var Model = Backbone.Model = function(attributes, options) {
        var defaults;
        var attrs = attributes || {};
        options || (options = {});
        this.cid = _.uniqueId('c');//生成唯一id
        this.attributes = {};
        if (options.collection) this.collection = options.collection;
        if (options.parse) attrs = this.parse(attrs, options) || {};

        options._attrs || (options._attrs = attrs);//让options的属性中拥有attributes，这在插件，库中很常见的写法
        if (defaults = _.result(this, 'defaults')) {//this指向Book的实例，因为defaults对象被绑定到了Book的原型上，所以this是可以访问的
            attrs = _.defaults({}, attrs, defaults);//合并
        }
        this.set(attrs, options);//执行原型上的set方法
        this.changed = {};//将changed(变化的)清空
        this.initialize.apply(this, arguments);//实例化时执行
    }

在进入set方法之前，系统会将你传进去的参数与原型上的默认参数进行合并，不清楚的可以看一下_.defaults方法

_.defaults = function(obj) {
        each(slice.call(arguments, 1), function(source) {
            if (source) {
                for (var prop in source) {
                    console.log(obj[prop]);
                    if (obj[prop] === void 0) obj[prop] = source[prop];
                }
            }
        });
        return obj;
    }

这里我们又有了一个新的判断方法，记得在原型上的默认参数，都是unknow和0，作者这样写也可以判断，大家学习一下。经过这个过滤，留下的基本都是我们自定义的参数了。

进入set方法。

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.
            if (typeof key === 'object') {
                attrs = key;
                options = val;
            } else {
                (attrs = {})[key] = val;
            }

            options || (options = {});

            // Run validation.
            // 执行自定义的validation
            if (!this._validate(attrs, options)) return false;//validate为false时不能通过

            // Extract attributes and options.
            // 提取属性和选项
            unset           = options.unset;
            silent          = options.silent;
            changes         = [];
            changing        = this._changing;
            this._changing  = true;
            if (!changing) {
                this._previousAttributes = _.clone(this.attributes);
                this.changed = {};
            }
            //current表示当前状态，prev表示上一个状态。
            current = this.attributes, prev = this._previousAttributes;
            // Check for changes of `id`.
            if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];//检测id

            // For each `set` attribute, update or delete the current value.
            for (attr in attrs) {
                val = attrs[attr];
                if (!_.isEqual(current[attr], val)) changes.push(attr);//将变化了属性名加入数组
                if (!_.isEqual(prev[attr], val)) {
                    this.changed[attr] = val;//跟上此状态不相同的，修改为现在的值
                } else {
                    delete this.changed[attr];
                }
                unset ? delete current[attr] : current[attr] = val;//第一次赋完值后，将值放入current中。
            }
            // Trigger all relevant attribute changes.
            // silent配置用于忽略验证规则，并且它不会触发change和error等事件

            if (!silent) {
                if (changes.length) this._pending = true;
                for (var i = 0, l = changes.length; i < l; i++) {
                    //console.log(current[changes[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.
            // 在所有事件结束后，触发一次change事件
            if (changing) return this;
            if (!silent) {
                while (this._pending) {
                    this._pending = false;
                    this.trigger('change', this, options);
                }
            }
            this._pending = false;
            this._changing = false;
            return this;
        }

验证和silent这块，我们在例子上再说。set中很重要的一步就是处理当前状态和上一个状态，保存相应状态。

最后，我们执行

this.changed = {};//将changed(变化的)清空
this.initialize.apply(this, arguments);//实例化时执行

看一下原型上的initialize方法

initialize: function(){
        }

英文注释是：Initialize is an empty function by default. Override it with your own，用到的时候，我们需要重载下。

以上完成了一个Book的实例化。

 

 

1.2   关于model实例读取数据

看个例子：

console.log(javabook.get('name'));
console.log(javabook.get('author'));
console.log(javabook.get('price'));

显示结果：

 

1.2.1  get方法

看一下get方法

get: function(attr) {
            return this.attributes[attr];
        }

留心一下我们会发现，这个this.attributes在哪出现。

current = this.attributes, prev = this._previousAttributes;
            // Check for changes of `id`.
            if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];//检测id
            // For each `set` attribute, update or delete the current value.
            for (attr in attrs) {
                val = attrs[attr];
                if (!_.isEqual(current[attr], val)) changes.push(attr);//将变化了属性名加入数组
                if (!_.isEqual(prev[attr], val)) {
                    this.changed[attr] = val;//跟上此状态不相同的，修改为现在的值
                } else {
                    delete this.changed[attr];
                }
                unset ? delete current[attr] : current[attr] = val;//第一次赋完值后，将值放入current中。
            }

将this.attributes和current之间是引用传递，当current[attr]的值变化时，this.attributes中的值也发生了变化，刚开始current为一个空对象，它会根据你自定义传入的对象，去复制过来。另外attributes是实例上的属性，所以我们可以这样取值。

console.log(javabook.attributes['name'])
console.log(javabook.attributes['author'])
console.log(javabook.attributes['price'])

其实结果是一样的。

1.2.2  escape()

我们看一下，另外一种取值方法：escape()

escape: function(attr) {
            return _.escape(this.get(attr));
        }

看似做了层过滤，看下_.escape方法

_.each(['escape', 'unescape'], function(method) {
        _[method] = function(string) {
            if (string == null) return '';//为空将返回
            return ('' + string).replace(entityRegexes[method], function(match) {//匹配到正则的部分执行function方法，实际上就是将<,>，&，",'等进行转换
                return entityMap[method][match];
            });
        };
    });


var entityRegexes = {
        escape:   new RegExp('[' + _.keys(entityMap.escape).join('') + ']', 'g'),//拼正则
        unescape: new RegExp('(' + _.keys(entityMap.unescape).join('|') + ')', 'g')
    };

var entityMap = {//需要转换的部分
        escape: {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#x27;'
        }
    };

如果需要添加新的转换部分，可以添加到entityMap中。

 

1.3  修改数据

看例子：

var javabook = new Book();  
  
// 通过set方法设置模型数据  
javabook.set('name', 'Java7入门经典');  
javabook.set('author', 'Ivor Horton');  
javabook.set('price', 88.50);
// 获取数据并将数据输出到控制台  
var name = javabook.get('name');  
var author = javabook.get('author');  
var price = javabook.get('price');  
  
console.log(name); // 输出Java7入门经典  
console.log(author); // 输出Ivor Horton  
console.log(price); // 输出88.50  

原型上的set方法，刚才我们已经看过了，set方法会将我们传入的值与上一次状态的值进行比较，同样也与没赋这次值的当前值进行比较。如果改变了，则将新的值覆盖旧的值，不过this._previousAttributes中保存着model上一次状态的值。

set可以单独一个个赋值，同样也可以一起赋值

//set()方法也允许同时设置多个属性，例如：  
javabook.set({  
    name : 'Java7入门经典',  
    author : 'Ivor Horton',  
    price : 88.50  
}); 

 

1.4 修改数据吗，触发事件

当调用set()方法修改模型中的数据时，会触发一系列事件，我们常常通过监听这些事件，来动态调整界面中数据的显示，我们先来看一个例子：

// 定义Book模型类  
var Book = Backbone.Model.extend({  
    defaults : {  
        name : 'unknown',  
        author : 'unknown',  
        price : 0  
    }  
});  
  
// 实例化模型对象  
var javabook = new Book();  
  
// 监听模型"change"事件  
javabook.on('change', function(model) {  
    console.log('change事件被触发');  
});  
// 监听模型"change:name"事件  
javabook.on('change:name', function(model, value) {  
    console.log('change:name事件被触发');  
});  
// 监听模型"change:author"事件  
javabook.on('change:author', function(model, value) {  
    console.log('change:author事件被触发');  
});  
// 通过set()方法设置数据  
javabook.set({  
    name : 'Thinking in Java',  
    author : 'unknown',  
    price : 395.70  
});  
  
// 控制台输出结果:  
// change:name事件被触发  
// change事件被触发  

问题在set方法中，一般情况我们不设置slient的情况下，会执行事件，看代码：

// silent配置用于忽略验证规则，并且它不会触发change和error等事件

            if (!silent) {
                if (changes.length) this._pending = true;
                for (var i = 0, l = changes.length; i < l; i++) {
                    this.trigger('change:' + changes[i], this, current[changes[i]], options);
                }
            }

如果我们修改的数据，changes数组中是会有值的。遍历changes数组，将修改过的属性名找到，执行类似'change:属性名'为名称的事件，这里，告诉我们在页面，如果想通过数据修改触发事件的话，这个事件的命名按照'change'+'属性名'来定义。

另外，set源码中，还有一段：

// 在所有事件结束后，触发一次change事件
            if (changing) return this;
            if (!silent) {
                while (this._pending) {
                    this._pending = false;
                    this.trigger('change', this, options);
                }
            }

一旦数据不真正修改了，那this._pending将变为true，将默认执行一遍change方法。我们可能监听change方法来判断数据是否被修改(但是你也可以通过获取实例的_pending属性来判断)

除了get方法之外，还有两种方法获取上一次状态的值

previous()

previousAttributes()

先看previous()

previous: function(attr) {
            if (attr == null || !this._previousAttributes) return null;
            return this._previousAttributes[attr];
        }

很简单，this._previousAttributes存放着上一个状态的参数。

previousAttributes()

previousAttributes: function() {
            return _.clone(this._previousAttributes);
        }

克隆一份返回，这样修改不会影响原来的状态值。

 

1.5  数据验证

Backbone模型提供了一套数据验证机制，确保我们在模型中存储的数据都是通过验证的，我们通过下面的例子来说明这套验证机制：

var Book = Backbone.Model.extend({
        validate : function(data) {
            if(data.price < 1) {
                return '书籍价格不应低于1元.';
            }
        }
    });

    var javabook = new Book();

    // 监听error事件，当验证失败时触发
    javabook.on('error', function(model, error) {
        console.log(error);
    });
    javabook.set('price', 0);

找到set方法中的相应方法：

if (!this._validate(attrs, options)) return false;

大家注意，上述的例子没有作用，为什么？因为this._validate()中传入的两个参数为空，定义Book时传入的validate实际上绑定到Book的原型上。实例化时根本没有传入任何数据。这里源码存在错误，看看我们该如何修改。

先看_validate方法：

_validate: function(attrs, options) {
            //if (!options.validate || !this.validate) return true;//这里的this.validate是你自己定义的，所以validate需要定义在model类中
            if(!this.validate || !options.validate) return true//没有验证，直接通过
            attrs = _.extend({}, this.attributes, attrs);
            var error = this.validationError = this.validate(attrs, options) || null;
            if (!error) return true;//没有报错内容，返回true
            this.trigger('invalid', this, error, _.extend(options, {validationError: error})); //如果是false，则表示验证正确，否则则自动执行下面的trigger方法，抛出异常
            return false;
        }

因为options没值，所以!options.validate恒为true，这也就是为什么validate不验证的关键。修改下判断为：

if(!this.validate || !options.validate) return true//没有验证，直接通过

 

继续向下，看这段代码：

this.trigger('invalid', this, error, _.extend(options, {validationError: error})); 

如果抛出错误，会执行事件名为invalid的事件，那我们再看看页面的绑定事件名，是error，不相符，导致从this._events中按事件名取事件取不到，导致验证失败。ok，简单修改下页面

// 监听error事件，当验证失败时触发
    javabook.on('invalid', function(model, error) {
        console.log(error);
    });

ok，修改完成，我们再运行一遍，看结果

对于修改validate这块，我只是列举了一种办法，还有很多方法，你选择你喜欢。再说一句，绑定validate还有一种方式：

javabook.set('price', 0, {  
    error : function(model, error) {  
        console.log('自定义错误：' + error);  
    }  
}); 

options将会有值，这样就不会跳出validate判断了。

 

1.6 　slient配置

这个东西搁了一段没看，现在我们根据例子来过一遍。上例子：

javabook.set('price', 0, {  
    silent : true  
});

如果传入silent，那将不触发change和change:属性名的事件，但记住，它只在定义它的时候生效，换言之，如下代码：

javabook.set('price', 0, {
        silent : true
    });
    javabook.set('name', 'Thinking in Java');

第一次set不会抛异常，第二次会，为什么，因为传入的参数不一样。第二次没有silent，就可以触发change等事件了。

 

1.7  删除数据

Backbone提供了unset和clear方法，看下API

unset()方法用于删除对象中指定的属性和数据

clear()方法用于删除模型中所有的属性和数据

例子：

// 定义Book模型类  
var Book = Backbone.Model.extend();  
// 实例化模型对象  
var javabook = new Book({  
    name : 'Java7入门经典',  
    author : 'Ivor Horton',  
    price : 88.50  
});   
// 输出: Java7入门经典  
console.log(javabook.get('name'));    
// 删除对象name属性  
javabook.unset('name');    
// 输出: undefined  
console.log(javabook.get('name'));  
当我们对模型的name属性执行unset()方法后，模型内部会使用delete关键字将name属性从对象中删除。  
  
clear()方法与unset()方法执行过程类似，但clear()方法会删除模型中的所有数据，例如：  
// 定义Book模型类  
var Book = Backbone.Model.extend();    
// 实例化模型对象  
var javabook = new Book({  
    name : 'Java7入门经典',  
    author : 'Ivor Horton',  
    price : 88.50  
});  
  
// 删除对象name属性  
javabook.clear();  
  
// 以下均输出: undefined  
console.log(javabook.get('name'));  
console.log(javabook.get('author'));  
console.log(javabook.get('price')); 

 先从unset开始

javabook.unset('name');

找到相应的unset方法

unset: function(attr, options) {
            return this.set(attr, void 0, _.extend({}, options, {unset: true}));
        }

可以看的很清楚，unset还是用到set方法，注意它传入的{unset:true}的，回到之前的set方法中，去找相应的unset部分，我们会找到这段代码。

unset ? delete current[attr] : current[attr] = val;//第一次赋完值后，将值放入current中。

unset为true之后，delete current[attr]，即删除current['name']。表示删除了name属性。

再来看clear方法

clear: function(options) {
            var attrs = {};
            for (var key in this.attributes) attrs[key] = void 0;//将this.attributes中所有的成员清空，这里undefined可能会被重写，所以用void 0代替
            return this.set(attrs, _.extend({}, options, {unset: true}));
        }

 

clear方法依旧是调用set方法，由于成员被清空，再传入set中，删除掉current[attr]，释放掉内存。

 

1.8  将模型数据同步到服务器

1.8.1  save

Backbone提供了与服务器数据的无缝连接，我们只需要操作本地Model对象，Backbone就会按照规则自动将数据同步到服务器。如果需要使用Backbone默认的数据同步特性，请确定你的服务器数据接口已经支持了REST架构。具体概念，大家可以看http://blog.csdn.net/eagle_110119/article/details/8842007部分的讲解，或者上网搜些资料看。

数据标识：Backbone中每一个模型对象都有一个唯一标识，默认名称为id，你可以通过idAttribute属性来修改它的名称。

URL： Backbone默认使用PATHINFO的方式来访问服务器接口。

先看例子

// 定义Book模型类  
var Book = Backbone.Model.extend({  
    urlRoot : '/service'  
});  
  
// 创建实例  
var javabook = new Book({  
    id : 1001,  
    name : 'Thinking in Java',  
    author : 'Bruce Eckel',  
    price : 395.70  
});  
  
// 保存数据  
javabook.save(); 

看一下save方法

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);//将options绑定一个error方法
            method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');//判断id，如果没有则新建，如果有再判断options.patch，改为更新
            if (method === 'patch') options.attrs = attrs;
            xhr = this.sync(method, this, options);

            // Restore attributes.
            if (attrs && options.wait) this.attributes = attributes;

            return xhr;
        }

这里，我们先只从前端的角度看save方法，有条件的朋友，可以搭建一个环境，与服务器交互下，效果会更好(目前我也再搞，我使用的是node+mongodb)

在save方法中，我们调用了validate进行了验证。验证不通过，则不允许发送请求。其中的options.success是一个返回成功的回调函数。看一下wrapError

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);
        };
    };

这个方法，给options添加了一个error方法，主要是为了防止当ajax请求失败时，捕获错误信息。

其中ajax的请求，主要包含：url，method，async，datatype，success，error等。看一下save如果处理method

method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');//判断id，如果没有则新建，如果有再判断options.patch，改为更新

接着是

xhr = this.sync(method, this, options);

ajax归根结底是通过XMLHttpRequest实例来操作的，来看如何创建一个xhr实例，进入原型的sync方法

sync: function() {
            return Backbone.sync.apply(this, arguments);
        }

看一下Backbone.sync

Backbone.sync = function(method, model, options) {
        var type = methodMap[method];
        // Default options, unless specified.
        _.defaults(options || (options = {}), {
            emulateHTTP: Backbone.emulateHTTP,//false
            emulateJSON: Backbone.emulateJSON //false
        });

        // Default JSON-request options.
        // 默认JSON请求选项
        var params = {type: type, dataType: 'json'};

        // Ensure that we have a URL.
        // 查看选项中是否有url，没有则选用实例set时的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));//转成字符串,其中model.toJSON()返回this.attributes里的信息
        }
        // params中包含了发送给服务器的所有信息
        // 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");
            };
        }
        // 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;
    }

其中，整个这个方法中，主要完成的工作，就是填充params，让其包含传到服务器所需要的所有信息，包括头，编码等等。另外在ajax中存在兼容性问题，低版本的IE没有xhr对象，它们有自己的实例对象activeObject。

兼容性判断

var noXhrPatch = typeof window !== 'undefined' && !!window.ActiveXObject && !(window.XMLHttpRequest && (new XMLHttpRequest).dispatchEvent);

浏览器不支持xhr，可以使用activeObject

代码最后，调用了Backbone.ajax(_.extend(params,options))

Backbone.ajax = function() {
        return Backbone.$.ajax.apply(Backbone.$, arguments);
    }

再看

Backbone.$ = root.jQuery || root.Zepto || root.ender || root.$;

这里，我们都清楚了，Backbone在与服务器交互时，再发送请求时调用的是第三方的ajax，这里我们使用的是jQuery。最后返回xhr对象。save方法结束。(这里大家可以结合$.ajax()来理解)

例子中还将，可以这样写回调

// 将数据保存到服务器  
javabook.save(null, {  
    success : function(model) {  
        // 数据保存成功之后, 修改price属性并重新保存  
        javabook.set({  
            price : 388.00  
        });  
        javabook.save();  
    }  
}); 

这样也可以，为什么呢，看源码：

var success = options.success;//你可以在save方法的时候写成功回调
            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);
            };

没有自己写回调，系统帮你写，如果有回调，则使用你的回调，至于回调函数，我们最后看。

还有一个wait参数的配置，看例子

// 从将数据保存到服务器  
javabook.save({  
    name : 'Thinking in Java',  
    author : 'Bruce Eckel',  
    price : 395.70  
}, {  
    wait : true  
});

例子中的解答是如果我们传递了wait配置为true，那么数据会在被提交到服务器之前进行验证，当服务器没有响应新数据（或响应失败）时，模型中的数据会被还原为修改前的状态。如果没有传递wait配置，那么无论服务器是否保存成功，模型数据均会被修改为最新的状态、或服务器返回的数据。

我们来看回调，里面有几个方法

if (attrs && !options.wait) {
                if (!this.set(attrs, options)) return false;
            } else {
                if (!this._validate(attrs, options)) return false;//验证通过了
            }

如果设置了wait为true，将会进行验证(其实你不传值，也要进行验证。。。)

再看这个方法

parse: function(resp, options) {
            return resp;
        }

对照save里的方法

model.attributes = attributes;
var serverAttrs = model.parse(resp, options);
if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);

如果设置了wait，当服务器没有响应时，理论上resp是没有值，serverAttrs的值应该为attrs，这个是原来修改前的值。对于ajax请求失败，失败了服务器一般返回错误信息，数据库里的数据是不会修改原来的状态，所以原来的状态依旧是原来的状态。

其实在我们不设置wait参数时，save方法可以有参数，不需要在此之前使用set，因为他包含了这set方法看例子

javabook.save({
        name: 'helloWorld'
        //,wait: true
        }
    );

运行结果为：

可以看到name被修改了，save完成了set的功能，前提，不要设置wait，wait可以理解为保持原有的参数不变(在ajax没有返回时，或者报错时)

 

很多时候，接口返回的数据是多种多样的，例子上有一种情况

{  
    "resultCode" : "0",  
    "error" : "null",  
    "data" : [{  
        "isNew" : "true",  
        "bookId" : "1001",  
        "bookName" : "Thinking in Java(修订版)",  
        "bookAuthor" : "Bruce Eckel",  
        "bookPrice" : "395.70"  
    }]  
} 

backbone提供了一个parse方法，不过之前我们已经看过，默认情况，这个方法提供传入两个参数，并返回第一个参数，解析时，自己重写parse方法解析。

 

1.8.2  fetch

fetch()方法用于从服务器接口获取模型的默认数据，常常用于模型的数据恢复，它的参数和原理与save()方法类似，因此你可以很容易理解它。

从fetch代码看起：

fetch: function(options) {
            options = options ? _.clone(options) : {};
            if (options.parse === void 0) options.parse = true;
            var model = this;
            var success = options.success;
            options.success = function(resp) {//成功的回调
                if (!model.set(model.parse(resp, options), options)) return false;
                if (success) success(model, resp, options);
                model.trigger('sync', model, resp, options);
            };
            wrapError(this, options);//错误的回调
            return this.sync('read', this, options);
        }

基本跟save相似，注意，这里的标识为read。如果需要在回调中绑定响应事件的，可以在页面用on绑定事件，事件名为sync，这样是正确回调后，是可以触发的。

这里，因为没有连接上服务器，所以id的部分没有给出，抱歉。

 

1.8.3  destroy

destroy()方法用于将数据从集合（关于集合我们将在下一章中讨论）和服务器中删除，需要注意的是，该方法并不会清除模型本身的数据,如果需要删除模型中的数据，请手动调用unset()或clear()方法）当你的模型对象从集合和服务器端删除时，只要你不再保持任何对模型对象的引用，那么它会自动从内存中移除。（通常的做法是将引用模型对象的变量或属性设置为null值）

看一下destory

 

destroy: function(options) {
            options = options ? _.clone(options) : {};
            var model = this;
            var success = options.success;

            var destroy = function() {  //模型会触发destroy事件，页面需要声明
                model.trigger('destroy', model, model.collection, options);
            };

            options.success = function(resp) { //成功回调
                if (options.wait || model.isNew()) destroy();
                if (success) success(model, resp, options);
                if (!model.isNew()) model.trigger('sync', model, resp, options);
            };

            if (this.isNew()) {//查看id是否是新的。
                options.success();
                return false;
            }
            wrapError(this, options);//错误回调

            var xhr = this.sync('delete', this, options);
            if (!options.wait) destroy();//设置wait之后，将不会触发destory
            return xhr;
        }

这里的标识为delete，可以看到，该方法并不会清除模型本身(也就是没有跟this.attributes打交道)。

这里基本过完一遍model。ok，好吧有点长。。

内容不多，时间刚好，以上是我的一点读码体会，如有错误，请指出，大家共通学习。