javascript實現數據的雙向綁定（手動綁定）

時間 2019-11-24

標籤 javascript 實現數據雙向綁定手動欄目 JavaScript 简体版

原文原文鏈接

今天來說一下Javascript是如何實現數據的雙向綁定，由於是第一次寫文章因此是借鑑了一下別人的文章。根據別人的文章來談一些本身的理解，廢話很少說直接開始講解。javascript

首先數據雙向綁定你們必定都不陌生（如angular，vue等），那麼它的結構大體以下html

<input q-value="value" type="text" id="input">
<div q-text="value" id="el"></div>
複製代碼

這跟vue的寫法很像這是比較老的實現方式，有點像觀察者編程模式，主要思路是經過在數據對象上定義get和set方法(固然還有其它方法)，調用時手動調用get或set數據，改變數據後出發UI層的渲染操做；以視圖驅動數據變化的場景主要應用與input、select、textarea等元素，當UI層變化時，經過監聽dom的change，keypress，keyup等事件來出發事件改變數據層的數據。整個過程均經過函數調用完成。先上一段代碼vue

var elems = [document.getElementById('el'), document.getElementById('input')];
複製代碼

總體思路是先取到標籤，而後把取到的標籤放到一個數組裏java

var data = {
    value: 'hello!'
};
複製代碼

以後定義一個初始化的值數組data裏面value的值爲hellonode

var command = {
        text: function(str){
            this.innerHTML = str;
        },
        value: function(str){
            this.setAttribute('value', str);
        }
};
複製代碼

text定義文本得內容 value輸入的內容以後經過setAttribute() 方法給輸入框添加指定的文本內容定義完以後基礎的部分也就作好了以後是須要進行邏輯的編寫編程

var scan = function(){
        /**
         * 掃描帶指令的節點屬性
         */
        for(var i = 0, len = elems.length; i < len; i++){
            var elem = elems[i];
            elem.command = [];
            for(var j = 0, len1 = elem.attributes.length; j < len1; j++){
                var attr = elem.attributes[j];
                if(attr.nodeName.indexOf('q-') >= 0){
                    /**
                     * 調用屬性指令，這裏可使用數據改變檢測
                     */
                    command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
                    elem.command.push(attr.nodeName.slice(2));
                }
            }
        }
    }
複製代碼

首先須要循環節點首先定義一個空數組elem.command = []用來存取改變的值，以後須要循環獲取指定字符首次出現的位置elem.attributes.length就是這個東西而後作判斷調用指令，這裏可使用數據改變檢測數組

command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
 elem.command.push(attr.nodeName.slice(2));
複製代碼

以後能夠設置掃描執行來改變視圖的顯示bash

function mvSet(key, value){
       data[key] = value;
       scan();
}
複製代碼

而後經過數據綁定監聽來實現數據的綁定效果dom

elems[1].addEventListener('keyup', function(e){
       mvSet('value', e.target.value);
}, false);
複製代碼

addEventListener方法用於向指定元素添加事件句柄函數

target可返回事件目標節點（觸發該事件的節點），如生成事件的元素、文檔或窗口。

最後一步就是設置時間來更新視圖的顯示

setTimeout(function(){
        mvSet('value', data.value)
},1000)
複製代碼

這裏綁定了剛纔上面設置的數組的值

下面帖一下總體的代碼

<input q-value="value" type="text" id="input">
<div q-text="value" id="el"></div>
<script>
    var elems = [document.getElementById('el'), document.getElementById('input')];

    var data = {
        value: 'hello!'
    };

    var command = {
        text: function(str){
            this.innerHTML = str;
        },
        value: function(str){
            this.setAttribute('value', str);
        }
    };

    var scan = function(){
        /**
         * 掃描帶指令的節點屬性
         */
        for(var i = 0, len = elems.length; i < len; i++){
            var elem = elems[i];
            elem.command = [];
            for(var j = 0, len1 = elem.attributes.length; j < len1; j++){
                var attr = elem.attributes[j];
                if(attr.nodeName.indexOf('q-') >= 0){
                    /**
                     * 調用屬性指令，這裏可使用數據改變檢測
                     */
                    command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
                    elem.command.push(attr.nodeName.slice(2));
                }
            }
        }
    }

    /**
     * 設置數據後掃描
     */
    function mvSet(key, value){
        data[key] = value;
        scan();
    }
    /**
     * 數據綁定監聽
     */
    elems[1].addEventListener('keyup', function(e){
        mvSet('value', e.target.value);
    }, false);

    scan();

    /**
     * 改變數據更新視圖
     */
    setTimeout(function(){
        mvSet('value', 'fuck');
    },1000)

</script>
複製代碼