如何實現VM框架中的數據綁定

BlackFlagBin 發布于2019-08-22 13:52 / 3373人閱讀

摘要：作者佳杰本文原創，轉載請注明作者及出處如何實現框架中的數據綁定一數據綁定概述視圖和數據之間的綁定二數據綁定目的不用手動調用方法渲染視圖，提高開發效率統一處理數據，便于維護三數據綁定中的元素視圖說白了就是中元素的展示數據用于保存數據的引用類型

作者：佳杰

本文原創，轉載請注明作者及出處

如何實現VM框架中的數據綁定 一：數據綁定概述

視圖（view）和數據（model）之間的綁定

二：數據綁定目的

不用手動調用方法渲染視圖，提高開發效率；統一處理數據，便于維護

三：數據綁定中的元素

視圖（view）：說白了就是html中dom元素的展示
數據（model）：用于保存數據的引用類型

四：數據綁定分類

view > model的數據綁定：view改變，導致model改變
model > view的數據綁定：model改變，導致view改變

五：數據綁定實現方法

view > model的數據綁定實現方法
        修改dom元素（input,textarea,select）的數據，導致model產生變化，
        只要給dom元素綁定change事件，觸發事件的時候修改model即可，不細講

model > view的數據綁定實現方法
        1.發布訂閱模式（backbone.js用到）；
        2.數據劫持(vue.js用到)；
        3.臟值檢查(angular.js用到)；

六：model > view數據綁定demo講解（如何實現數據改變，導致UI界面重新渲染）

簡易思路 
> 1.通過defineProperty來監控model中的所有屬性（對每一個屬性都監控）
> 2.編譯template生成DOM樹，同時綁定dom節點和model（例如）,
    defineProperty中已經給“model.name”綁定了對應的function，
    一旦model.name改變，該funciton就操作上面這個dom節點，改變view


主要js模塊：Observer,Compile,ViewModel

    1.Observer
        用到了發布訂閱模式和數據監控，defineProperty用于“監控model", dom元素執行"訂閱"操作，給model中
        的屬性綁定function；model中屬性變化的時候，執行"發布"這個操作，執行之前綁定的那個function

      源碼如下：
    var Observer = function(opts) {
        this.id = (opts && opts.id) ? opts.id : +new Date();
        this.opts = opts;
        this.subs = []; //觀察者數組
        /*this.subs包含了所有觀察者，每個觀察者的結構如下：
        {
            key："person.age.range",//這個key代表model.person.age.range這個屬性

            /*
             和key綁定的函數數組，每個函數操作一個dom節點，
             一個key對應多個dom節點，所以actionList是個function數組；
             */
            actionList：[function(){},function(){}]
        }*/
    }
    Observer.prototype = {

        //遍歷model中所有的屬性，每個屬性用defineKey來監控所有屬性
        monit: function(data, baseUrl) {
            var me = this;
            baseUrl = baseUrl || "";
            var isTypeMatch = (data && typeof data === "object");
            if (isTypeMatch) {
                Object.keys(data).forEach(function(key) {
                    var base = baseUrl ? (baseUrl + "." + key) : key;
                    me.defineKey(data, key, data[key], baseUrl); //定義自己
                    me.monit(data[key], base); //遞歸【定義的是下一層】
                });
            }
        },

        //用到了Object.defineProperty來定義屬性，這樣屬性改變的時候，就會自動執行里面的set方法
        defineKey: function(data, key, val, baseUrl) {
            var me = this;
            var base = baseUrl ? (baseUrl + "." + key) : key;

            Object.defineProperty(data, key, {
                enumerable: true,
                configurable: false,
                get: function() {
                    return val;
                },

                //更新并監控新的值，執行publish函數
                set: function(newVal) {
                    if (newVal !== val) {
                        val = newVal;

                        //設置新值需要重新監控
                        me.monit(newVal, base); 

                        //(baseUrl+"."+key)作為觀察者模式中的監聽的那個key，也可以說是監聽的那個事件
                        me.publish(base, newVal); 
                    }
                }
            });
        },

        /*
         根據key來執行綁定在這個key上的所有函數，比如說person.age.range這個key，
         它變動的時候，publish會執行綁定在person.age.range這個key上所有的function
         */
        publish: function(key, newVal) {
            (this.subs || []).forEach(function(sub) {
                if (sub.key == key) {
                    (sub.actionList || []).forEach(function(action) {
                        action(newVal);
                    });
                }
            });
        },

        //給model中的某個key（例如person.age.range)添加綁定的function 
        subscribe: function(key, callback) {
            var tgIdx;
            var hasExist = this.subs.some(function(unit, idx) {
                tgIdx = (unit.key === key) ? idx : -1;
                return (unit.key === key)
            });
            if (hasExist) {
                if (Object.prototype.toString.call(this.subs[tgIdx].actionList)=="[object Array]"){
                    this.subs[tgIdx].actionList.push(callback);
                } else {
                    this.subs[tgIdx].actionList = [callback];
                }
            } else {
                this.subs.push({
                    key: key,
                    actionList: [callback]
                });
            }
        },

        //取消訂閱
        remove: function(key) {
            var removeIdx;
            this.subs.forEach(function(sub, idx) {
                removeIdx = sub.key === key ? idx : -1;
                return sub.key === key
            });
            if (removeIdx !== -1) {
                this.subs.splice(removeIdx, 1);
            }
        },

        isObject: function(data) {
            return data && typeof data === "object"
        }
    };



    2.Compile： 模板編譯器
    var Compile = function(opts) {
        this.opts = opts;
        this.data = this.opts.data;
        this.observer = this.opts.observer;
        this.regExp = /{{([sS]*)}}/;
        this.ele = document.createElement("div");
        this.ele.innerHTML = opts.template; //渲染頁面
        this.fragment = this.transToFrament(this.ele);
        this.travelAllNodes(this.fragment);
        this.ele.appendChild(this.fragment);
    };
    Compile.prototype = {

        //把頁面上的dom節點轉化成文檔碎片，防止dom頻繁操作影響頁面性能
        transToFrament: function(el) {
            var fragment = document.createDocumentFragment(),
                child;
            // 將原生節點拷貝到fragment
            while (child = el.firstChild) {
                fragment.appendChild(child);
            }
            return fragment;
        },

        //遍歷文檔碎片節點下所有的node節點（用到了函數遞歸調用）,執行compileNode
        travelAllNodes: function(ele) {
            this.compileNode(ele);
            ([].slice.call(ele.childNodes) || []).forEach(function(node) {
                this.compileNode(node);
                if (node.childNodes && node.childNodes.length) {
                    this.travelAllNodes(node);
                }
            }.bind(this));
        },

        /*包含功能
         1.渲染node節點
         2.給key設置callback函數，函數內操作node節點
         */
        compileNode: function(node) {
            if (this.isElement(node)) {
                this.compileElementNode(node);
            } else if (this.isText(node)) {
                this.compileTextNode(node);
            }
        },

        /*
          編譯element類型的node節點,
          需要處理屬性綁定v-bind="{{data.name}}"和
          事件v-event="{{data.event}}"
         */
        compileElementNode: function(node) {
            var me = this,
                nodeAttrs = node.attributes;
            [].slice.call(nodeAttrs).forEach(function(attr) {
                var attrName = attr.name;
                var attrValue = attr.value;
                var key = me.getKey(attrValue);
                me.bindKeyToNode(key, attr);
                attr.value = me.compileString(attrValue); //渲染node
            });
        },

        //編譯文本類型的node節點，里面放了對應的"{{data.name}}"這種數據格式
        compileTextNode: function(ele) {
            var key = this.getKey(ele.textContent);
            this.bindKeyToNode(key, ele);
            ele.textContent = this.compileString(ele.textContent);
        },

        //解析“{{}}”，把它變成對應的數據值
        compileString: function(str) {
            var key = this.getKey(str);
            return str.replace(this.regExp, this.getValueByKey(key));
        },

        //綁定key和node節點，key一旦改變，就會觸發對應的函數，修改node節點
        bindKeyToNode: function(key, node) {
            if (!!key.trim()) {
                console.log(key);
                var nodeType = node.nodeType;
                var regExp = new RegExp("{{" + key + "}}");
                var originTextConetnt;
                if (nodeType === 2) {
                    originTextConetnt = node.value;
                } else if (nodeType === 3) {
                    originTextConetnt = node.textContent;
                }

                this.observer.subscribe(key, function(newVal) {
                    var tgValue = originTextConetnt.replace(regExp, newVal);
                    if (nodeType === 2) {
                        node.value = tgValue;
                    } else if (nodeType === 3) {
                        node.textContent = tgValue;
                    }
                });
            }
        },

        //從{{name.age.sex}}中獲取name.age.sex
        getKey: function(str) {
            return str.match(this.regExp) ? str.match(this.regExp)[1] : "";
        },

        //獲取key對應的value值
        getValueByKey: function(key) {
            var arr = key ? key.split(".") : [];
            var temp = this.data;
            for (var i = 0; i < arr.length; i++) {
                if (temp) {
                    temp = temp[arr[i]];
                } else {
                    temp = undefined;
                    break
                }
            }
            return temp;
        },


        isElement: function(ele) {
            return ele.nodeType === 1 ? true : false;
        },
        isText: function(ele) {
            return ele.nodeType === 3 ? true : false;
        },
        getElement: function() {
            return this.ele;
        }
    }




    3.ViewModel：結合Observer與Compile，實現model > view的數據單向綁定
    var ViewModel = function(opts) {
        this.opts = opts;
        this.data = opts.data;
        this.wrapper = opts.wrapper;
        this.template = opts.template;
        this.Observer = (typeof Observer != undefined) ? Observer : opts.Observer;
        this.Compile = (typeof Compile != undefined) ? Compile : opts.Compile;
        this.init();
    }

    ViewModel.prototype = {
        init: function() {
            var opts = this.opts;
            this.observer = new this.Observer(opts);
            this.observer.monit(this.data); //監控數據變化，數據已經改變了
            this.compiler = new this.Compile(Object.assign(opts, {
                observer: this.observer
            })); //編譯生成節點
            if (this.wrapper) {
                this.wrapper.appendChild(this.compiler.getElement());
            }
        },
        get: function() {
            return this.compiler.getElement();
        }
    };

總結

簡單地調用new ViewModel({data:data,template:template})，完成了model和view的綁定，
ViewModel內部大致執行順序是：

1. 創建數據監控對象this.observer，該對象監控data（監控以后，data的屬性改變，
   就會執行defineProperty中的set函數，set函數里面添加了publish發布函數）

2. 創建模板編譯器對象this.compiler，該對象編譯template，生成最終的dom樹，
   并且給每個需要綁定數據的dom節點添加了subscribe訂閱函數

3. 最后，改變data里面的屬性，會自動觸發defineProperty中的set函數，set函數調用publish函數，
   publish會根據key的名稱，找到對應的需要執行的函數列表，依次執行所有函數

Git地址

https://github.com/devil1989/databind/

demo

使用場景說明：

當我們想要修改頁面某個元素的信息，但又不想費勁地查找dom元素再去修改元素的值，
這種情況下，可以用demo中的數據綁定，只需修改數據的值，就實現了頁面元素重新渲染
請看下面的gif動畫中展示的，只要修改data.age和data.name,頁面元素就自動重新渲染了

結束語

本demo只是簡單實現數據綁定，很多功能并未實現，只是提供一種思路，拋磚引玉;
如果對上述代碼中的Observer類的代碼不是很理解，可以先了解下觀察者模式以及實現原理；
最后，感謝大家的閱讀!!

推薦：翻譯項目Master的自述： 1. 干貨｜人人都是翻譯項目的Master 2. iKcamp出品微信小程序教學共5章16小節匯總(含視頻) 3. 開始免費連載啦～每周２更共11堂iKcamp課｜基于Koa2搭建Node.js實戰項目教學（含視頻）| 課程大綱介紹

GPU云服務器云服務器 HTML中的數據綁定 js 數據綁定框架 asp實現數據綁定 java中的緩存框架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92544.html

MVVM 中的動態數據綁定

摘要：要實現最小化刷新，我們要將模板中的每個綁定都收集起來。思考題在最后的實現下，我們把模板改為下面這樣雖然很少會有人這樣寫，就會出現重復的實例，該如何解決這個問題，參考早期源碼學習系列之四如何實現動態數據綁定上一篇文章我們了解了怎樣實現一個簡單模板引擎。但這個模板引擎只適合靜態模板，因為它是將模板整體編譯成字符串進行全量替換。如果每次數據改變都進行一次替換，會有兩個最主要的問題：性能...

Meils 2019-08-26 11:53 評論0 收藏0
用原生 JS 實現 MVVM 框架2——單向綁定

摘要：上一篇寫了實現框架的一些基本概念本篇用代碼來實現一個完整的框架思考假設有如下代碼，里面的會和試圖中的一一映射，修改的值，會直接引起試圖中對應數據的變化如何實現上述呢回想下這篇講的觀察者模式和數據監聽主題是什么觀察者是什么觀察者何時訂閱主題主上一篇寫了實現 MVVM 框架的一些基本概念本篇用代碼來實現一個完整的 MVVM 框架思考假設有如下代碼，data里面的name會和試圖中的...

Zoom 2019-08-23 11:39 評論0 收藏0
Vue基本原理

摘要：標簽添加監聽事件文本節點這一步我們操作頁面輸入框，可以看到以下效果，證明監聽事件添加有效。前言經過幾天的研究，發現學習框架的底層技術，收獲頗豐，相比只學習框架的使用要來的合算；如果工作急需，快速上手應用，掌握如何使用短期內更加高效；如果有較多的時間來系統學習，建議研究一下框架的等層技術、原理。 Vue、React、Angular三大框架對比 1、Vue Vue是尤雨溪編寫的一個構建...

firim 2019-08-23 16:24 評論0 收藏0
Vue基本原理

摘要：標簽添加監聽事件文本節點這一步我們操作頁面輸入框，可以看到以下效果，證明監聽事件添加有效。前言經過幾天的研究，發現學習框架的底層技術，收獲頗豐，相比只學習框架的使用要來的合算；如果工作急需，快速上手應用，掌握如何使用短期內更加高效；如果有較多的時間來系統學習，建議研究一下框架的等層技術、原理。 Vue、React、Angular三大框架對比 1、Vue Vue是尤雨溪編寫的一個構建...

ytwman 2019-08-30 15:43 評論0 收藏0