BackBone 源码解读及思考

// 定义Backbone版本
Backbone.VERSION = '0.9.2';

   (function() {
        Backbone.Events        // 自定义事件
        Backbone.Model        // 模型构造函数和原型扩展
        Backbone.Collection    // 集合构造函数和原型扩展
        Backbone.Router        // 路由配置器构造函数和原型扩展
        Backbone.History        // 路由器构造函数和原型扩展
        Backbone.View            // 视图构造函数和原型扩展
        Backbone.sync            // 异步请求工具方法
        var extend = function (protoProps, classProps) { ... } // 自扩展函数
        Backbone.Model.extend = Backbone.Collection.extend =          Backbone.Router.extend = Backbone.View.extend = extend; // 自扩展方法
   }).call(this);

   _.extend(Model.prototype, Events, {
         // code..
        // 设置模型中的数据, 如果key值不存在, 则作为新的属性添加到模型, 如果key值已经存在, 则修改为新的值
        set : function(key, value, options) {
            var attrs, attr, val;

            // 参数形式允许key-value对象形式, 或通过key, value两个参数进行单独设置
            // 如果key是一个对象, 则认定为使用对象形式设置, 第二个参数将被视为options参数
            if(_.isObject(key) || key == null) {
                attrs = key;
                options = value;
            } else {
                attrs = {};
                attrs[key] = value;
            }

            // options配置项必须是一个对象, 如果没有设置options则默认值为一个空对象
            options || ( options = {});
            if(!attrs)
                return this;
            // 如果被设置的数据对象属于Model类的一个实例, 则将Model对象的attributes数据对象赋给attrs
            // 一般在复制一个Model对象的数据到另一个Model对象时, 会执行该动作
            if( attrs instanceof Model)
                attrs = attrs.attributes;

            // 一般在复制一个Model对象的数据到另一个Model对象时, 但仅仅需要复制Model中的数据而不需要复制值时执行该操作
            if(options.unset)
                for(attr in attrs)
                attrs[attr] =
                void 0;

            // 如果设置了validate() 函数，则需要验证
            if(!this._validate(attrs, options))
                return false;

            // 如果设置的id属性名被包含在数据集合中, 则将id覆盖到模型的id属性
            // 这是为了确保在自定义id属性名后, 访问模型的id属性时, 也能正确访问到id
            if(this.idAttribute in attrs)
                this.id = attrs[this.idAttribute];

            var changes = options.changes = {};
            // now记录当前模型中的数据对象
            var now = this.attributes;
            // escaped记录当前模型中通过escape缓存过的数据
            var escaped = this._escapedAttributes;
            // prev记录模型中数据被改变之前的值
            var prev = this._previousAttributes || {};

            // code..

            // 如果没有配置silent参数，则需要触发change函数。
            if(!options.silent)
                this.change(options);
            return this;
        },
        // 从服务器获取默认的模型数据, 获取数据后使用set方法将数据填充到模型, 因此如果获取到的数据与当前模型中的数据不一致, 将会触发change事件
        fetch : function(options) {
            options = options ? _.clone(options) : {};
            var model = this;
            var success = options.success;
            // 当获取数据成功后填充数据并调用自定义成功回调函数
            options.success = function(resp, status, xhr) {
                // 如果填充数据时验证失败, 则不会调用自定义success回调函数
                if(!model.set(model.parse(resp, xhr), options))
                    return false;
                // 调用自定义的success回调函数
                if(success)
                    success(model, resp);
            };
            // 请求发生错误时通过wrapError处理error事件
            options.error = Backbone.wrapError(options.error, model, options);
            // 所有的读取数据(Model, Collection)都是通过sync提供的HTTP方法操作
            return (this.sync || Backbone.sync).call(this, 'read', this, options);
        },
        // 保存模型中的数据到服务器
        save : function(key, value, options) {
            // attrs存储需要保存到服务器的数据对象
            var attrs, current;

            // 支持设置单个属性的方式 key: value
            // 支持对象形式的批量设置方式 {key: value}
            if(_.isObject(key) || key == null) {
                // 如果key是一个对象, 则认为是通过对象方式设置
                // 此时第二个参数被认为是options
                attrs = key;
                options = value;
            } else {
                // 如果是通过key: value形式设置单个属性, 则直接设置attrs
                attrs = {};
                attrs[key] = value;
            }
            // 配置对象必须是一个新的对象
            options = options ? _.clone(options) : {};

            // 如果在options中设置了wait选项, 则被改变的数据将会被提前验证, 且服务器没有响应新数据(或响应失败)时, 本地数据会被还原为修改前的状态
            // 如果没有设置wait选项, 则无论服务器是否设置成功, 本地数据均会被修改为最新状态
            if(options.wait) {
                // 对需要保存的数据提前进行验证
                if(!this._validate(attrs, options))
                    return false;
                current = _.clone(this.attributes);
            }

            var model = this;
            // 在options中可以指定保存数据成功后的自定义回调函数
            var success = options.success;
            options.success = function(resp, status, xhr) {
                var serverAttrs = model.parse(resp, xhr);
                if(options.wait) {
                    delete options.wait;
                    serverAttrs = _.extend(attrs || {}, serverAttrs);
                }
                // 如果调用set方法时验证失败, 则不会调用自定义的success回调函数
                if(!model.set(serverAttrs, options))
                    return false;
                if(success) {
                    // 调用响应成功后自定义的success回调函数
                    success(model, resp);
                } else {
                    // 如果没有指定自定义回调, 则默认触发sync事件
                    model.trigger('sync', model, resp, options);
                }
            };
            // 请求发生错误时通过wrapError处理error事件
            options.error = Backbone.wrapError(options.error, model, options);

            var method = this.isNew() ? 'create' : 'update';
            var xhr = (this.sync || Backbone.sync).call(this, method, this, options);
            // 如果设置了options.wait, 则将数据还原为修改前的状态
            // 此时保存的请求还没有得到响应, 因此如果响应失败, 模型中将保持修改前的状态, 如果服务器响应成功, 则会在success中设置模型中的数据为最新状态
            if(options.wait)
                this.set(current, silentOptions);
            return xhr;
        },
        // code..

    });

  // Backbone.View 视图相关
    var View = Backbone.View = function(options) {
        // 为每一个视图对象创建一个唯一标识, 前缀为"view"
        this.cid = _.uniqueId('view');
        this._configure(options || {});
        this._ensureElement();
        this.initialize.apply(this, arguments);
        this.delegateEvents();
    };

    // viewOptions列表记录一些列属性名, 在构造视图对象时, 如果传递的配置项中包含这些名称, 则将属性复制到对象本身
    var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName'];
    _.extend(View.prototype, Events, {
        // 如果在创建视图对象时, 没有设置指定的el元素, 则会通过make方法创建一个元素, tagName为创建元素的默认标签
        tagName : 'div',
        // code ..
        // 移除当前视图的$el元素
        remove : function() {
            // 通过调用jQuery或Zepto的remove方法, 因此在第三方库中会同时移除该元素绑定的所有事件和数据
            this.$el.remove();
            return this;
        },
        // 该方法用于在内部创建this.el时自动调用
        make : function(tagName, attributes, content) {
            var el = document.createElement(tagName);
            if(attributes)
                $(el).attr(attributes);
            if(content)
                $(el).html(content);
            return el;
        },
        // 为视图对象设置标准的$el及el属性, 该方法在对象创建时被自动调用
        setElement : function(element, delegate) {
            // this.$el 存放Jquery或其他库的示例对象
            this.$el = ( element instanceof $) ? element : $(element);
            // this.el存放标准的DOM对象
            this.el = this.$el[0];
            // code ...
            return this;
        },
        // 为视图元素绑定事件
        // events参数配置了需要绑定事件的集合, 格式如('事件名称元素选择表达式' : '事件方法名称/或事件函数'):
        // {
        //     'click #title': 'edit',
        //     'click .save': 'save'
        //     'click span': function() {}
        // }
        // 该方法在视图对象初始化时会被自动调用, 并将对象中的events属性作为events参数(事件集合)
        delegateEvents : function(events) {
            if(!(events || ( events = getValue(this, 'events'))))
                return;
            // 取消当前已经绑定过的events事件
            this.undelegateEvents();
            for(var key in events) {
                // code ...
                // 解析事件表达式(key), 从表达式中解析出事件的名字和需要操作的元素
                // 例如 'click #title'将被解析为 'click' 和 '#title' 两部分, 均存放在match数组中
                var match = key.match(delegateEventSplitter);
                // eventName为解析后的事件名称
                // selector为解析后的事件元素选择器表达式
                var eventName = match[1], selector = match[2];

                method = _.bind(method, this);
                // 设置事件名称, 在事件名称后追加标识, 用于传递给jQuery或Zepto的事件绑定方法
                eventName += '.delegateEvents' + this.cid;
                if(selector === '') {
                    this.$el.bind(eventName, method);
                } else {
                    this.$el.delegate(selector, eventName, method);
                }
            }
        },

        // 在实例化视图对象时设置初始配置
        // 将传递的配置覆盖到对象的options中
        // 将配置中与viewOptions列表相同的配置复制到对象本身, 作为对象的属性
        _configure : function(options) {
            // 如果对象本身设置了默认配置, 则使用传递的配置进行合并
            if(this.options)
                options = _.extend({}, this.options, options);
            // 遍历viewOptions列表
            for(var i = 0, l = viewOptions.length; i < l; i++) {
                // attr依次为viewOptions中的属性名
                var attr = viewOptions[i];
                // 将options配置中与viewOptions相同的配置复制到对象本身, 作为对象的属性
                if(options[attr])
                    this[attr] = options[attr];
            }
            this.options = options;
        },
        _ensureElement : function() {

            if(!this.el) {
                // 如果没有设置el属性, 则创建默认元素
                var attrs = getValue(this, 'attributes') || {};
                if(this.id)
                    attrs.id = this.id;
                if(this.className)
                    attrs['class'] = this.className;
                // 通过make方法创建元素, 并调用setElement方法将元素设置为视图所使用的标准元素
                this.setElement(this.make(this.tagName, attrs), false);
            } else {
                // 如果设置了el属性, 则直接调用setElement方法将el元素设置为视图的标准元素
                this.setElement(this.el, false);
            }
        }
});

  var extend = function(protoProps, classProps) {
        // child存储已经实现继承自当前类的子类(Function)
        // protoProps设置子类原型链中的属性
        // classProps设置子类的静态属性
        var child = inherits(this, protoProps, classProps);
        // 将extend函数添加到子类, 因此调用子类的extend方法便可实现对子类的继承
        child.extend = this.extend;
        // 返回实现继承的子类
        return child;
    };
    // 为Model, Collection, Router和View类实现继承机制每次使用只需要 Backbone.View.extend({...});
Model.extend = Collection.extend = Router.extend = View.extend = extend;

BackBone 源码解读及思考

说明

整体框架

Events

Collection