BackBone 源碼解讀及思考

時間 2019-11-18

標籤 backbone 源碼解讀思考欄目興趣愛好简体版

原文原文鏈接

說明

前段時間略忙，終於找到時間看看backbone代碼。javascript

正如知友們說的那樣，backbone簡單、隨性。代碼簡單的看一眼，就能知道做者的思路。由於簡單，因此隨性，能夠很自由的和其餘類庫大搭配使用，不太要求特別的格式。html

本文會關注backbone實現的細節，總體框架在博客園的一位朋友已經總結的很好了。連接：點擊這裏java

本文Bakcbone版本：node

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

照例提點問題，有目的的讀源碼。ajax

怎麼和模板引擎配合使用的。
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

Modeljson

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;

說明

本次分析基本上對翻譯源碼註釋，中間省略了一些我的認爲對理解代碼實現和平時應用關係不大的代碼。