Backbone源码分析(二)

  在传统MVC框架模式中,Model承担业务逻辑的任务。Backbone作为一个mvc框架,主要的业务逻辑交由Model与Collection来实现。Model代表领域对象,今天主要学一下Model源码中几个重要的函数。

  我们先看一下Model的构造函数做了哪些事情:

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

    this.cid = _.uniqueId(this.cidPrefix);//利用underscore生成一个客户端的唯一标识符cid
    this.attributes = {};//this.attributes是backbone中存放所有数据属性的对象
    //collection在获取model对应的后端url时使用,在model上设置collection并不会自动将model加入collection
    if (options.collection) this.collection = options.collection;
    //调用parse方法解析数据
    if (options.parse) attrs = this.parse(attrs, options) || {};
    //处理defaults默认数据,用attrs覆盖defaults
    var defaults = _.result(this, ‘defaults‘);
    attrs = _.defaults(_.extend({}, defaults, attrs), defaults);
    this.set(attrs, options);//接收attrs将数据处理后放入this.attributes
    this.changed = {};//changed属性用来保存修改过的属性数据,第一次set,不需要changed数据
    this.initialize.apply(this, arguments);//调用initialize初始化model,这个方法需要子类来覆盖
  };

  Model的构造函数主要做了以下几件事:

  • 处理参数
  • 处理model的属性:cid、attributes、collection
  • 解析数据、处理属性的默认值
  • set方法接收处理参数
  • 调用initialize做初始化操作

  

  接下来是一个重要的set函数,这个函数是Model最核心的一个方法

// 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) {
      if (key == null) return this;

      // Handle both `"key", value` and `{key: value}` -style arguments.
      var attrs;
      if (typeof key === ‘object‘) {//{key: value}形式
        attrs = key;
        options = val;
      } else {// key, value, options形式
        (attrs = {})[key] = val;
      }

      options || (options = {});//设置options参数

      // Run validation.
      //首先验证参数,这里没有直接调用validate方法,而是调用_validate这个私有方法,该方法内部调用validate方法
      if (!this._validate(attrs, options)) return false;

      // Extract attributes and options.
      var unset      = options.unset;
      var silent     = options.silent;
      var changes    = [];//用来存放所有有变动的key
      var changing   = this._changing;//this._chaning用来标识set方法是否在处理中,我猜这里的设置跟webworker多线程有关
      this._changing = true;//这里代表属性的变动更新开始
      // this.changed = {};//不能放在这里,如果val没改变,所有changed都被清空掉了

      if (!changing) {//使用_previousAttributes来保留最近一次的attributes
        this._previousAttributes = _.clone(this.attributes);
        this.changed = {};//每次set时,changed都会被重置的{},这表示仅保留最近一次的变化
      }

      var current = this.attributes;
      var changed = this.changed;
      var prev    = this._previousAttributes;

      // For each `set` attribute, update or delete the current value.
      for (var attr in attrs) {//遍历attrs
        val = attrs[attr];
        //对于单线程环境,current与_previousAttributes是一样的,这里的处理也应当是应对多线程
        if (!_.isEqual(current[attr], val)) changes.push(attr); //changes是本次变化的keys
        if (!_.isEqual(prev[attr], val)) {
          changed[attr] = val; //存储变化量
        } else {
          delete changed[attr];
        }
        //这里根据unset的设置,如果unset为true移除,否则设置attributes中的对应属性
        unset ? delete current[attr] : current[attr] = val;
      }

      // Update the `id`.
      //idAttribute的目的是跟后端数据库记录的id保持一致
      if (this.idAttribute in attrs) this.id = this.get(this.idAttribute);

      // Trigger all relevant attribute changes.
      // 在所有赋值结束后,发送事件通知
      if (!silent) {
        if (changes.length) this._pending = options;
        for (var i = 0; i < changes.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; //这里我觉得也是跟多线程有关,如果多个线程同时更新model,最终只发出一个整体的change事件
      if (!silent) {
        while (this._pending) {//很奇怪的设置
          options = this._pending;
          this._pending = false;
          this.trigger(‘change‘, this, options);//触发事件
        }
      }
      this._pending = false;
      this._changing = false;
      return this;
    }

  来整理一下set方法做的几件事:

  • 根据api的参数声明来处理参数
  • 声明几个与属性变化相关的变量
  • 设置_previousAttributes与changed来保存上次属性和这次的变化数据
  • 更新属性,保存本次变化数据和对应的key
  • 将发生变化的属性广播出去,change:key形式
  • 在model层次上发出change事件

  

  接下来是与后端打交道的save方法:

// 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方法保持客户端与数据库内记录同步,前后端数据可能出现不一致情况,
    // 如果options中wait参数为true的话,会用后端返回的数据来更新前端数据
    save: function(key, val, options) {
      // Handle both `"key", value` and `{key: value}` -style arguments.
      var attrs;
      if (key == null || typeof key === ‘object‘) {//`{key: value}`
        attrs = key;
        options = val;
      } else {//`"key", value`
        (attrs = {})[key] = val;
      }

      //在方法默认开启验证和解析
      options = _.extend({validate: true, parse: true}, options);
      var wait = options.wait;

      // 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.
      // wait为false的话,首先在前端更新model,set中调用验证方法
      if (attrs && !wait) {
        if (!this.set(attrs, options)) return false;
      } else if (!this._validate(attrs, options)) {//否则利用_validate进行验证
        return false;
      }

      // After a successful server-side save, the client is (optionally)
      // updated with the server-side state.
      var model = this;//保存this关键字
      var success = options.success;
      var attributes = this.attributes;
      options.success = function(resp) {
        // Ensure attributes are restored during synchronous saves.
        model.attributes = attributes;//这里先确保数据与为同步时保持一致
        var serverAttrs = options.parse ? model.parse(resp, options) : resp;
        // wait属性为true,利用后端数据更新model的属性
        if (wait) serverAttrs = _.extend({}, attrs, serverAttrs);
        if (serverAttrs && !model.set(serverAttrs, options)) return false;
        // success带表更新成功后的回调函数。
        // save方法,将模型数据的同步完全封装起来,开发者只需专注于自身业务逻辑即可!
        if (success) success.call(options.context, model, resp, options);
        // 触发sync事件
        model.trigger(‘sync‘, model, resp, options);
      };
      wrapError(this, options);

      // Set temporary attributes if `{wait: true}` to properly find new ids.
      //wait 为true,临时更新attributes,目的是下文中将model更新到数据库内
      if (attrs && wait) this.attributes = _.extend({}, attributes, attrs);

      //根据model是否拥有idAttribute属性,决定是创建还是更新
      var method = this.isNew() ? ‘create‘ : (options.patch ? ‘patch‘ : ‘update‘);
      if (method === ‘patch‘ && !options.attrs) options.attrs = attrs;
      var xhr = this.sync(method, this, options);

      // Restore attributes.
      this.attributes = attributes;//恢复数据,等到success后利用后端数据结果更新属性

      return xhr;
    },

  其中用到的wrapError方法,源码如下:

// Wrap an optional error callback with a fallback error event.
  //将options中的error回调函数,变成一个能够触发error事件的回调函数
  var wrapError = function(model, options) {
    var error = options.error;
    options.error = function(resp) {
      if (error) error.call(options.context, model, resp, options);
      model.trigger(‘error‘, model, resp, options);
    };
  }

  save方法做的几件事:

  • 处理参数
  • 如果以客户端为准,则首先跟新model,否则验证需保存的属性
  • 声明局部变量,替换options中的success回调函数和error回调
  • 如果以后端返回数据为准,则先直接将attributes属性暂时更改,方便sync方法同步model,而后将attributes恢复,等待succes毁掉中利用后端返回结果更新

  

  接下来是销毁model的destroy方法:

// Destroy this model on the server if it was already persisted.
    // Optimistically removes the model from its collection, if it has one.
    // If `wait: true` is passed, waits for the server to respond before removal.
    //destroy方法用来销毁model,当wait属性为true时,等待后台销毁成功时做实际销毁工作
    destroy: function(options) {
      options = options ? _.clone(options) : {};
      var model = this;
      var success = options.success;
      var wait = options.wait;

      var destroy = function() {
        model.stopListening();//移除其他代码中监听的model事件
        // 触发destroy事件
        model.trigger(‘destroy‘, model, model.collection, options);
      };

      // 后台销毁成功后的success回调
      options.success = function(resp) {
        if (wait) destroy();//销毁操作
        // 回调函数,业务逻辑相关
        if (success) success.call(options.context, model, resp, options);
        //拥有idAttribute属性,则触发sync事件
        if (!model.isNew()) model.trigger(‘sync‘, model, resp, options);
      };

      var xhr = false;
      if (this.isNew()) {//数据库中并没有该条记录
        _.defer(options.success);//underscore函数,延迟调用function直到当前调用栈清空为止
      } else {
        wrapError(this, options);//包装错误
        xhr = this.sync(‘delete‘, this, options);// 与后台数据同步
      }
      if (!wait) destroy(); //无需后台等待的话,直接做销毁操作
      return xhr;
    }

  destroy方法做的事情:

  • 声明局部变量以及做销毁操作的destroy方法
  • 替换options中的success方法
  • 如果model未存储于数据库中,直接使用underscore的defer延迟执行success,否则向后台发送删除请求

  与验证相关的_validate方法如下:

// 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) {
      if (!options.validate || !this.validate) return true;
      attrs = _.extend({}, this.attributes, attrs);
      //backbone希望在验证失败时候,validate方法返回一个error对象
      var error = this.validationError = this.validate(attrs, options) || null;
      if (!error) return true;
      //触发invalid事件,也就是说如果单独调用validate方法不会触发invalid事件
      this.trigger(‘invalid‘, this, error, _.extend(options, {validationError: error}));
      return false;
    }
时间: 2024-10-11 17:43:14

Backbone源码分析(二)的相关文章

netty 源码分析二

以服务端启动,接收客户端连接整个过程为例分析, 简略分为 五个过程: 1.NioServerSocketChannel 管道生成, 2.NioServerSocketChannel 管道完成初始化, 3.NioServerSocketChannel注册至Selector选择器, 4.NioServerSocketChannel管道绑定到指定端口,启动服务 5.NioServerSocketChannel接受客户端的连接,进行相应IO操作 Ps:netty内部过程远比这复杂,简略记录下方便以后回忆

[Android]Volley源码分析(二)Cache

Cache作为Volley最为核心的一部分,Volley花了重彩来实现它.本章我们顺着Volley的源码思路往下,来看下Volley对Cache的处理逻辑. 我们回想一下昨天的简单代码,我们的入口是从构造一个Request队列开始的,而我们并不直接调用new来构造,而是将控制权反转给Volley这个静态工厂来构造. com.android.volley.toolbox.Volley: public static RequestQueue newRequestQueue(Context conte

哇!板球 源码分析二

游戏主页面布局 创建屏下Score标签 pLabel = CCLabelTTF::create("Score", "Arial", TITLE_FONT_SIZE); //分数标签 //设置标签字体的颜色 pLabel->setColor (ccc3(0, 0, 0)); //设置文本标签的位置 pLabel->setPosition ( ccp ( SCORE_X, //X坐标 SCORE_Y //Y坐标 ) ); //将文本标签添加到布景中 this

baksmali和smali源码分析(二)

这一节,主要介绍一下 baksmali代码的框架. 我们经常在反编译android apk包的时候使用apktool这个工具,其实本身这个工具里面对于dex文件解析和重新生成就是使用的baksmali 和smali这两个jar包其中 baksmali是将 dex文件转换成便于阅读的smali文件的,具体使用命令如下:java -jar baksmali.jar classes.dex -o myout其中myout是输出的文件夹 而smali是将smali文件重新生成回 dex文件的具体使用的命

【梦幻连连连】源码分析(二)

转载请注明出处:http://blog.csdn.net/oyangyufu/article/details/24736711 GameLayer场景界面效果: 源码分析: GameLayer场景初始化,主要是初始化加载界面及背景音乐 bool GameLayer::init() { float dt=0.0f; if ( !CCLayerColor::initWithColor(ccc4(255, 255, 255, 255))) { return false; } this->initLoa

[Android]Fragment源码分析(二) 状态

我们上一讲,抛出来一个问题,就是当Activity的onCreateView的时候,是如何构造Fragment中的View参数.要回答这个问题我们先要了解Fragment的状态,这是Fragment管理中非常重要的一环.我们先来看一下FragmentActivity提供的一些核心回调: @Override protected void onCreate(Bundle savedInstanceState) { mFragments.attachActivity(this, mContainer,

JAVA Collection 源码分析(二)之SubList

昨天我们分析了ArrayList的源码,我们可以看到,在其中还有一个类,名为SubList,其继承了AbstractList. // AbstractList类型的引用,所有继承了AbstractList都可以传进来 private final AbstractList<E> parent; // 这个是其实就是parent的偏移量,从parent中的第几个元素开始的 private final int parentOffset; private final int offset; int s

Tomcat源码分析二:先看看Tomcat的整体架构

Tomcat源码分析二:先看看Tomcat的整体架构 Tomcat架构图 我们先来看一张比较经典的Tomcat架构图: 从这张图中,我们可以看出Tomcat中含有Server.Service.Connector.Container等组件,接下来我们一起去大致的看看这些组件的作用和他们之间的相互联系.在这之前,我们先补充一个知识点,也就是Tomcat它实现的功能点是什么呢?通过查找一些资料,这里参考下极客时间<深入拆解Tomcat_Jetty>中的总结,即Tomcat 要实现 2 个核心功能:

Volley源码分析二

在前两天我发布的文章:Volley源码分析一 中我较为详细的分析了Volley,今天继续,这篇文章会讲一些上一篇没有提到的比较细节的点,以及对于Volley源码中一些可以优化的实现的一些思考 ByteArrayPool的分析 byte[] 的回收池,用于 byte[] 的回收再利用,减少了内存的分配和回收.主要通过一个元素长度从小到大排序的ArrayList作为 byte[] 的缓存,另有一个按使用时间先后排序的ArrayList属性用于缓存满时清理元素. public synchronized

3.算子+PV&amp;UV+submit提交参数+资源调度和任务调度源码分析+二次排序+分组topN+SparkShell

1.补充算子 transformations ?  mapPartitionWithIndex 类似于mapPartitions,除此之外还会携带分区的索引值. ?  repartition 增加或减少分区.会产生shuffle.(多个分区分到一个分区不会产生shuffle) 多用于增多分区. 底层调用的是coalesce ?  coalesce(合并) coalesce常用来减少分区,第二个参数是减少分区的过程中是否产生shuffle. true为产生shuffle,false不产生shuff