BackBone 源码解读及思考

最新推荐文章于 2024-06-14 11:20:36 发布

weixin_34061482

最新推荐文章于 2024-06-14 11:20:36 发布

阅读量116

点赞数

文章标签： json javascript 数据结构与算法 ViewUI

原文链接：http://www.cnblogs.com/freestyle21/p/4457491.html

版权

说明

前段时间略忙，终于找到时间看看backbone代码。

正如知友们说的那样，backbone简单、随性。代码简单的看一眼，就能知道作者的思路。因为简单，所以随性，可以很自由的和其他类库大搭配使用，不太要求特别的格式。

本文会关注backbone实现的细节，整体框架在博客园的一位朋友已经总结的很好了。链接：点击这里

本文Bakcbone版本：

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

照例提点问题，有目的的读源码。

怎么和模板引擎配合使用的。
RESTful JSON 接口从服务器检索到的数据
通过源码，了解到平时使用时的哪些需要注意的细节。
当models中值被改变时自动触发一个”change”事件、所有用于展示models数据的views都会侦听到这个事件，然后进行重新渲染。如何实现？
如何兼容IE6+
view model collection怎么关联的。

整体框架

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

本文的思路是按照这个框架，提炼每个部分的重要部分，解决上面提出的问题，并注释平时使用时需要注意的细节。

Events

Model

Model 比较常用，很多细节，所以列出了几个重要的函数，注释了一些重要细节。

   _.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..

    });

Collection

Router & History

View

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

Backbone.sync

使用

   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;

说明

本次分析基本上对翻译源码注释，中间省略了一些个人认为对理解代码实现和平时应用关系不大的代码。

转载于:https://www.cnblogs.com/freestyle21/p/4457491.html

weixin_34061482

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BackBone 源码解读及思考

说明前段时间略忙，终于找到时间看看backbone代码。正如知友们说的那样，backbone简单、随性。代码简单的看一眼，就能知道作者的思路。因为简单，所以随性，可以很自由的和其他类库大搭配使用，不太要求特别的格式。本文会关注backbone实现的细节，整体框架在博客园的一位朋友已经总结的很好了。链接：点击这里本文Bakcbone版本： //定义Backbone版本 Backbone....
复制链接

扫一扫