Fahami secara ringkas kod sumber model Model dan View of Backbone.js_Basic pengetahuan

Model Tulang Belakang

Hari ini kita akan bercakap tentang M dalam Backbone.js MVC Model ialah bahagian teras tulang belakang, yang mengandungi data untuk kandungan paparan halaman, serta pelbagai penukaran, pengesahan, pengiraan dan kawalan kebenaran yang mengelilingi operasi data. , interaksi sisi pelayan dan operasi lain, anda boleh menjana model anda melalui Backbone.Model.extend() Sudah tentu, model yang dijana juga boleh digunakan sebagai kelas asas untuk melanjutkan lebih banyak model

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

 var Man = People.extend({

 });

Tulang Belakang.Model Api

Backbone.Model menyediakan sejumlah besar kaedah untuk melaksanakan operasi asas Model Sudah tentu, yang paling asas ialah mekanisme acara berdasarkan Backbone.Events Apabila atribut Model berubah, perubahan yang sepadan: acara attr akan menjadi Trigger, berikut ialah API yang disediakan:

Terdapat kaedah untuk melaksanakan operasi sebelah pelayan pada data:

• segerak: membalut Backbone.sync, kelas asas xhr
• fetch: digunakan untuk mendapatkan data daripada pelayan
• simpan: Kekalkan data ke pelayan
• musnahkan: Padam data daripada pelayan

Kaedah untuk manipulasi data dalam model:

• dapatkan: Dapatkan data daripada atribut
• set: Tetapkan data kepada atribut
• melarikan diri: Mengekod data, menggunakan garis bawah _.escape
• mempunyai: Sama ada terdapat data yang sepadan dalam atribut
• nyahset: padamkan data daripada atribut
• jelas: Kosongkan data atribut
• diubah: Nilai berubah
berbanding keadaan sebelumnya (ditetapkan, tidak ditetapkan telah dilaksanakan)
• keJSON: Mensiri atribut ke dalam objek
• parse: Apabila penghuraian item tetapan adalah benar, data sasaran akan dihuraikan semasa pemulaan/set/nyahset/fetch dan operasi data lain untuk mengembalikan objek yang dihuraikan Kaedah ini adalah kaedah kosong dan perlu ditindih
• telah Berubah: Sama ada terdapat sebarang perubahan berbanding keadaan sebelumnya (ditetapkan, tidak ditetapkan telah dilaksanakan)
• changeAttributes: Semua nilai yang berlaku berbanding keadaan sebelumnya (set, unset telah dilaksanakan)
• sebelumnya: keadaan sebelumnya (ditetapkan, tidak ditetapkan telah dilaksanakan), nilai yang sepadan dengan atribut ini
• previousAttributes: Semua nilai keadaan sebelumnya bagi objek yang telah berubah daripada keadaan sebelumnya (set, unset telah dilaksanakan)

Kaedah untuk pengesahan data dalam model:

• sahkan: digunakan untuk mengesahkan data dalam model, ia perlu ditindih untuk mengatasi kaedah lalai
• validationError: Mengembalikan nilai yang dikembalikan apabila tidak sah terkini berlaku
• isValid: Panggil kaedah _validate

Beberapa API utama akan diterangkan di bawah:

Pembina

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

Pembina terutamanya menetapkan data dan pilihan yang dimulakan, dan kemudian menjana cid unik untuk menandakan model Jika parse dalam pilihan adalah benar, maka nilai yang dimulakan akan dihuraikan melalui kaedah parse dan kaedah set panggilan, semua nilai awal. akan disimpan dalam atribut, dan kaedah permulaan permulaan dipanggil. Permulaan model selesai.

set

model.set(attributes, [options])

Kaedah yang ditetapkan akan menetapkan nilai ke dalam atribut Jika klien ditetapkan kepada benar semasa tetapan, peristiwa perubahan:attr yang sepadan akan dicetuskan akhirnya, peristiwa perubahan akan dicetuskan secara seragam kaedah adalah seperti berikut:

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

Seluruh proses set adalah untuk memproses nilai masuk dan mengubahnya menjadi pasangan nilai kunci, kemudian sahkan nilai, semak ketepatan, dan kemudian mulakan operasi tetapan Apabila menetapkan, nilai akan berubah apabila menyemak. Jika ada, tambahkannya pada objek yang diubah, kemudian semak nilai unset, dan lakukan operasi tambah, kemas kini dan padam yang sepadan. Kemudian perubahan:attr dan peristiwa perubahan dicetuskan dalam urutan.

simpan

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

Kaedah simpan digunakan untuk meneruskan data kepada klien Ia akan menggunakan cipta, kemas kini atau tampalan mengikut data dan konfigurasi yang berbeza, dan mencetuskan peristiwa penyegerakan Berikut adalah sebahagian daripada kod

  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中大部分的逻辑都是开发者自己去扩展的。