Verstehen Sie kurz den Quellcode des Modellmodells und die Ansicht von Backbone.js_Grundkenntnisse

Backbone.Model

Heute sprechen wir zunächst über M in Backbone.js MVC-Modell ist der Kernbestandteil des Backbones, der die Daten für den Seitenanzeigeinhalt sowie verschiedene Konvertierungen, Überprüfungen, Berechnungen und Berechtigungskontrollen rund um Datenoperationen enthält. , serverseitige Interaktion und andere Vorgänge können Sie Ihr Modell über Backbone.Model.extend() generieren. Natürlich kann das generierte Modell auch als Basisklasse zum Erweitern weiterer Modelle verwendet werden

 var People = Backbone.Model.extend({
     
 });

 var Man = People.extend({

 });

Backbone.Model Api

Backbone.Model bietet eine große Anzahl von Methoden zum Implementieren der Grundoperationen eines Modells. Die grundlegendste ist natürlich der auf Backbone.Events basierende Ereignismechanismus. Das attr-Ereignis wird zum Auslöser. Die folgende API wird bereitgestellt:

Es gibt Methoden zum Durchführen serverseitiger Vorgänge an Daten:

• sync: umschließt Backbone.sync, die Basisklasse von xhr
• Abrufen: Wird zum Abrufen von Daten vom Server verwendet
• Speichern: Daten auf dem Server speichern
• zerstören: Daten vom Server löschen

Methoden zur Datenmanipulation im Modell:

• get: Daten aus Attributen abrufen
• set: Daten auf Attribute setzen
• escape: Daten mit dem Unterstrich _.escape kodieren
• hat: Ob entsprechende Daten in Attributen vorhanden sind
• nicht gesetzt: Daten aus Attributen löschen
• clear: Attributdaten löschen
• geändert: Der geänderte Wert
im Vergleich zum vorherigen Zustand (gesetzt, nicht gesetzt wurde ausgeführt)
• toJSON: Attribute in ein Objekt serialisieren
• Parsen: Wenn das Einstellungselement „Parse“ wahr ist, werden die Zieldaten während der Initialisierung/Setzung/Deaktivierung/Abruf und anderen Datenoperationen analysiert, um das analysierte Objekt zurückzugeben. Diese Methode ist eine leere Methode und muss überschrieben werden >
hasChanged: Ob es eine Änderung im Vergleich zum vorherigen Zustand gegeben hat (Setzen, Unset wurde ausgeführt)
changeAttributes: Alle aufgetretenen Werte im Vergleich zum vorherigen Zustand (gesetzt, nicht gesetzt wurde ausgeführt)
Vorheriger: Vorheriger Zustand (gesetzt, nicht gesetzt wurde ausgeführt), der diesem Attribut entsprechende Wert
previousAttributes: Alle Werte des vorherigen Zustands des Objekts, die sich gegenüber dem vorherigen Zustand geändert haben (gesetzt, nicht gesetzt wurde ausgeführt)

Methoden zur Datenüberprüfung im Modell:

validieren: Wird zum Überprüfen der Daten im Modell verwendet und muss überschrieben werden, um die Standardmethode
• zu überschreiben
validationError: Gibt den Wert zurück, der zurückgegeben wurde, als die letzte Ungültigkeit aufgetreten ist
isValid: Rufen Sie die _validate-Methode auf

Einige wichtige APIs werden im Folgenden erläutert:

Konstrukteur

  var Model = Backbone.Model = function(attributes, options) {
     var attrs = attributes || {};
     options || (options = {});
     this.cid = _.uniqueId('c');
     this.attributes = {};
     if (options.collection) this.collection = options.collection;
     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);
   };

Der Konstruktor legt hauptsächlich die initialisierten Daten und Optionen fest und generiert dann eine eindeutige CID, um das Modell zu markieren. Wenn „Parse in Options“ wahr ist, wird der initialisierte Wert über die Parse-Methode und die Call-Set-Methode analysiert, alle Anfangswerte ​​wird in Attributen gespeichert und die Initialisierungsmethode initialize aufgerufen. Die Initialisierung des Modells ist abgeschlossen.

einstellen

model.set(attributes, [options])

Die Set-Methode setzt den Wert in das Attribut, wenn beim Setzen das entsprechende Change:attr-Ereignis ausgelöst wird. Schließlich wird das Change-Ereignis einheitlich ausgelöst Methode ist wie folgt:

  set: function(key, val, options) {
     //......

      // key值可以是键值对，也可以是一个字符串,将赋值传入attrs属性中  
    if (typeof key === 'object') {
     attrs = key;
     options = val;
    } else {
     (attrs = {})[key] = val;
    }

   // ....

    //对设置的值进行校验 
      if (!this._validate(attrs, options)) return false;
    unset = options.unset; // unset为true时会删除设置的值,unset方法就是通过 set(key,val,{unset:true})去实现的
   
    //当对象正在被被设置的时候，不给 previousAttributes 赋值
    if (!changing) {
     this._previousAttributes = _.clone(this.attributes);
     this.changed = {};
    }
 
    current = this.attributes, prev = this._previousAttributes;
 
    //如果对Id进行了设置，则对对象的id属性也进行改变
    if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];
 

    //进行 设置或者是删除操作
    for (attr in attrs) {
     val = attrs[attr];
     if (!_.isEqual(current[attr], val)) changes.push(attr);
     if (!_.isEqual(prev[attr], val)) {
      this.changed[attr] = val;//为model的changed进行设置
     } else {
      delete this.changed[attr];
     }
     unset ? delete current[attr] : current[attr] = val;//如果unset被设置成true了，则进行删除操作
    }
 
    //在silent不为false 的情况下，进行change:attr事件发送
    if (!silent) {
     if (changes.length) this._pending = options;
     for (var i = 0, l = changes.length; i < l; i++) {
      this.trigger('change:' + changes[i], this, current[changes[i]], options);
     }
    }
 

    //触发change事件
    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;
   
  }

Der gesamte Set-Prozess besteht darin, den eingehenden Wert zu verarbeiten und in ein Schlüssel-Wert-Paar umzuwandeln, dann den Wert zu überprüfen, die Richtigkeit zu überprüfen und dann den Einstellungsvorgang zu starten. Beim Festlegen ändert sich der Wert bei der Überprüfung. Wenn dies der Fall ist, fügen Sie es einem geänderten Objekt hinzu, überprüfen Sie dann den Wert von unset und führen Sie die entsprechenden Vorgänge zum Hinzufügen, Aktualisieren und Löschen aus. Dann werden nacheinander die Ereignisse „change:attr“ und „change“ ausgelöst.

speichern

model.save([attributes], [options])

Die Speichermethode wird verwendet, um Daten auf dem Client beizubehalten. Sie verwendet Erstellen, Aktualisieren oder Patchen entsprechend den unterschiedlichen Daten und Konfigurationen und löst das Synchronisierungsereignis aus:

  save: function(key, val, options) {     
    // ......
 

 
    //当设置了wait属性true的时候 , save方法先不执行set方法(不触发change事件),只执行validate
    if (attrs && !options.wait) {
     if (!this.set(attrs, options)) return false;
    } else {
     if (!this._validate(attrs, options)) return false;
    }

    //如果wait为true,设置this.attributes
    if (attrs && options.wait) {
     this.attributes = _.extend({}, attributes, attrs);
    }
 

    // .....
   
    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);
     //如果wait为true , 那么会在请求返回之后才进行set操作
     if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);
     if (_.isObject(serverAttrs) && !model.set(serverAttrs, options)) {
      return false;
     }
     if (success) success(model, resp, options);
     //触发 sync 事件
     model.trigger('sync', model, resp, options);
    };

    //生成XHR onerror 回调函数
    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;
    //返回xhr对象
    return xhr;
  }

 
save 中最需要注意的就是 wait 的设置，当wait为真的时候，save返回会在xhr返回之后再执行set操作，而不是在xhr之前就进行set操作，因此change事件的触发时机也就不同了。

之前说过整个Backbone都是通过事件串联起来的，所以对于事件触发时机的了解和把握是非常重要的，不然会在开发过程中导致一些奇怪的问题出现。

Backbone.View
前面已经对backbone中的Event、Model、Collection代码进行了分析，现在我们来看下MVC中的V部分，也就是Backbone.View，View在Backbone中主要用于沟通页面中的DOM和Backbone.Model/Collection，页面的逻辑操作，DOM事件的绑定等，View部分的代码非常简答，加上注释只有110左右。 View部分有一下API：

方法不多，下面对部分API进行介绍:

构造方法

  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
 var View = Backbone.View = function(options) {
   this.cid = _.uniqueId('view');
   options || (options = {});
   _.extend(this, _.pick(options, viewOptions));
   this._ensureElement();
   this.initialize.apply(this, arguments);
   this.delegateEvents();
 };

构造方法中为View生成了一个唯一的cid,以'view'开头,然后进行对目标属性viewOptions进行合并，接着调用_ensureElement判断el的情况，接着调用delegateEvents进行方法绑定，初始化完成 。

delegateEvents

view.setElement(element)

   setElement: function(element, delegate) {
    if (this.$el) this.undelegateEvents();//如果已经存在this.$el，进行事件解绑

    //对$el进行赋值，本质是一个jquery或者是 Lo-Dash and Zepto 对象
    this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
    //把dom element 赋值给el
    this.el = this.$el[0];

     //如果没有显式传值,则进行事件绑定
    if (delegate !== false) this.delegateEvents();
    return this;
   }

setElement方法用于设置View对应的element , 这个方法在new的时候会被调用， 如果想要在使用过程中改变View的dom元素指向，可调用这个方法进行重新设置

_ensureElement

  _ensureElement: function() {
     //如果已经对el进行设置，直接调用setElement方法
    if (!this.el) {//如果没有设置，生成一个元素对象，再调用setElement方法
     var attrs = _.extend({}, _.result(this, 'attributes'));
     if (this.id) attrs.id = _.result(this, 'id');
     if (this.className) attrs['class'] = _.result(this, 'className');
     var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);
     this.setElement($el, false);
    } else {
     this.setElement(_.result(this, 'el'), false);
    }
  }

_ensureElement这个方法是内部方法，在构造函数中使用，用于判断指定的el在页面中存不存在，如果存在则对$el进行赋值，如果不存在，则生成一个$el,但是要注意这个对象是没有落地到dom树中的 。

delegateEvents

delegateEvents([events])

    // *{"event selector": "callback"}*
   //
   //   {
   //    'mousedown .title': 'edit',
   //    'click .button':   'save',
   //    'click .open':    function(e) { ... }
   //   }

   delegateEvents: function(events) {
      //如果不存在events,则直接返回
      if (!(events || (events = _.result(this, 'events')))) return this;
   
      //先解除所有的事件绑定
      this.undelegateEvents();
   
      //处理每个事件
      for (var key in events) {
       var method = events[key];
       //解析回调函数
       if (!_.isFunction(method)) method = this[events[key]];
       if (!method) continue;
   
       //对选择器进行分析
       var match = key.match(delegateEventSplitter);
       var eventName = match[1], selector = match[2];
       method = _.bind(method, this);
   
       //绑定的事件名都是以 eventName + '.delegateEvents' + cid 组成,
       //这么做能够在undelegateEvents的时候选择到这个View的所有事件
       eventName += '.delegateEvents' + this.cid;
       if (selector === '') {
        this.$el.on(eventName, method);
       } else {
        this.$el.on(eventName, selector, method);
       }
      }
      return this;
   }

在View中你可以使用一个 key:value 集合指定对应的事件，在初始化的时候构造函数会调用delegateEvents进行绑定，需要注意的是所有在key中指定的元素的父元素都必须是$el,也就是说元素必须是$el的子节点，否则绑定失败。

View和其他backbone模块一个区别就是没有自己的内建自定义事件，当然他也组合了Events模块，但是所有的事件都需要自己进行建立。View主要是一个MVC模型的承载，其实真正的功能不多，其实从模型层面上看V在前端开发中是最接近业务逻辑的，所以在View中大部分的逻辑都是开发者自己去扩展的。