2. 程式人生 > >原生js實現資料雙向繫結的三種方式總彙

原生js實現資料雙向繫結的三種方式總彙

阿新 • • 發佈：2019-02-17

前端資料的雙向繫結方法

  前端的檢視層和資料層有時需要實現雙向繫結(two-way-binding)，例如mvvm框架，資料驅動檢視，檢視狀態機等，研究了幾個目前主流的資料雙向繫結框架，總結了下。目前實現資料雙向繫結主要有以下三種。

1、手動繫結

比較老的實現方式，有點像觀察者程式設計模式，主要思路是通過在資料物件上定義get和set方法(當然還有其它方法)，呼叫時手動呼叫get或set資料，改變資料後出發UI層的渲染操作；以檢視驅動資料變化的場景主要應用與input、select、textarea等元素，當UI層變化時，通過監聽dom的change，keypress，keyup等事件來出發事件改變資料層的資料。整個過程均通過函式呼叫完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data-binding-method-set</title>
</head>
<body>
    <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>
</body>
</html>

2、髒檢查機制

 以典型的mvvm框架angularjs為代表，angular通過檢查髒資料來進行UI層的操作更新。關於angular的髒檢測，有幾點需要了解些：

  • 髒檢測機制並不是使用定時檢測。
  • 髒檢測的時機是在資料發生變化時進行。
  • angular對常用的dom事件，xhr事件等做了封裝， 在裡面觸發進入angular的digest流程。
  • 在digest流程裡面， 會從rootscope開始遍歷， 檢查所有的watcher。 （關於angular的具體設計可以看其他文件，這裡只討論資料繫結），那我們看下髒檢測該如何去做：主要是通過設定的資料來需找與該資料相關的所有元素，然後再比較資料變化，如果變化則進行指令操作
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>data-binding-drity-check</title>
</head>

<body>
    <input q-event="value" ng-bind="value" type="text" id="input">
    <div q-event="text" ng-bind="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(elems) {
        /**
         * 掃描帶指令的節點屬性
         */
        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-event') >= 0) {
                    /**
                     * 呼叫屬性指令
                     */
                    var dataKey = elem.getAttribute('ng-bind') || undefined;
                    /**
                     * 進行資料初始化
                     */
                    command[attr.nodeValue].call(elem, data[dataKey]);
                    elem.command[attr.nodeValue] = data[dataKey];
                }
            }
        }
    }

    /**
     * 髒迴圈檢測
     * @param  {[type]} elems [description]
     * @return {[type]}       [description]
     */
    var digest = function(elems) {
        /**
         * 掃描帶指令的節點屬性
         */
        for (var i = 0, len = elems.length; i < len; i++) {
            var elem = elems[i];
            for (var j = 0, len1 = elem.attributes.length; j < len1; j++) {
                var attr = elem.attributes[j];
                if (attr.nodeName.indexOf('q-event') >= 0) {
                    /**
                     * 呼叫屬性指令
                     */
                    var dataKey = elem.getAttribute('ng-bind') || undefined;

                    /**
                     * 進行髒資料檢測，如果資料改變，則重新執行指令，否則跳過
                     */
                    if(elem.command[attr.nodeValue] !== data[dataKey]){

                        command[attr.nodeValue].call(elem, data[dataKey]);
                        elem.command[attr.nodeValue] = data[dataKey];
                    }
                }
            }
        }
    }

    /**
     * 初始化資料
     */
    scan(elems);

    /**
     * 可以理解為做資料劫持監聽
     */
    function $digest(value){
        var list = document.querySelectorAll('[ng-bind='+ value + ']');
        digest(list);
    }

    /**
     * 輸入框資料繫結監聽
     */
    if(document.addEventListener){
        elems[1].addEventListener('keyup', function(e) {
            data.value = e.target.value;
            $digest(e.target.getAttribute('ng-bind'));
        }, false);
    }else{
        elems[1].attachEvent('onkeyup', function(e) {
            data.value = e.target.value;
            $digest(e.target.getAttribute('ng-bind'));
        }, false);
    }

    setTimeout(function() {
        data.value = 'fuck';
        /**
         * 這裡問啥還要執行$digest這裡關鍵的是需要手動呼叫$digest方法來啟動髒檢測
         */
        $digest('value');
    }, 2000)

    </script>
</body>
</html>

3、前端資料劫持(Hijacking)

  第三種方法則是avalon等框架使用的資料劫持方式。基本思路是使用Object.defineProperty對資料物件做屬性get和set的監聽，當有資料讀取和賦值操作時則呼叫節點的指令，這樣使用最通用的=等號賦值就可以了。具體實現如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>data-binding-hijacking</title>
</head>

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

                }
            }
        }
    }

    var bValue;
    /**
     * 定義屬性設定劫持
     */
    var defineGetAndSet = function(obj, propName) {
        try {
            Object.defineProperty(obj, propName, {

                get: function() {
                    return bValue;
                },
                set: function(newValue) {
                    bValue = newValue;
                    scan();
                },

                enumerable: true,
                configurable: true
            });
        } catch (error) {
            console.log("browser not supported.");
        }
    }
    /**
     * 初始化資料
     */
    scan();

    /**
     * 可以理解為做資料劫持監聽
     */
    defineGetAndSet(data, 'value');

    /**
     * 資料繫結監聽
     */
    if(document.addEventListener){
        elems[1].addEventListener('keyup', function(e) {
            data.value = e.target.value;
        }, false);
    }else{
        elems[1].attachEvent('onkeyup', function(e) {
            data.value = e.target.value;
        }, false);
    }

    setTimeout(function() {
        data.value = 'fuck';
    }, 2000)
    </script>
</body>

</html>

  但值得注意的是defineProperty支援IE8以上的瀏覽器，這裡可以使用__defineGetter__ 和 __defineSetter__ 來做相容但是瀏覽器相容性的原因，直接用defineProperty就可以了。至於IE8瀏覽器仍需要使用其它方法來做hack。如下程式碼可以對IE8進行hack，defineProperty支援IE8。例如使用es5-shim.js就可以了。（IE8以下瀏覽器忽略）

4、小結

  首先這裡的例子只是簡單的實現，讀者可以深入感受三種方式的異同點，複雜的框架也是通過這樣的基本思路滾雪球滾大的。

參考：https://gist.github.com/brettz9/4093766#file_html5_dataset.js https://github.com/xufei/blog/issues/10
原文連結：http://jixianqianduan.com/frontend-javascript/2015/11/29/js-data-two-ways-binding.html  

相關推薦

原生js實現資料雙向繫結的三種方式總彙

前端資料的雙向繫結方法  前端的檢視層和資料層有時需要實現雙向繫結(two-way-binding)，例如mvvm框架，資料驅動檢視，檢視狀態機等，研究了幾個目前主流的資料雙向繫結框架，總結了下。目前實現資料雙向繫結主要有以下三種。1、手動繫結比較老的實現方式，有點像觀察者程

用原生js實現資料雙向繫結

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <sc

js實現資料雙向繫結

資料的雙向繫結在vue和angular裡面用的比較多,原生js的也可以實現，下面是個小例子，可以做為參考。 <!DOCTYPE html> <html lang="en"> &

如何在原生微信小程式中實現資料雙向繫結歡迎使用CSDN-markdown編輯器

在原生小程式開發中，資料流是單向的，無法雙向繫結，但是要實現雙向繫結的功能還是蠻簡單的！ 下文要講的是小程式框架 minapp 中實現雙向繫結的原理，在 minapp 中，你只需要在 wxml 模板中給元件的屬性名後加上 .sync 就可以實現雙向繫

javascript實現資料雙向繫結的三種方式

前端資料的雙向繫結方法  前端的檢視層和資料層有時需要實現雙向繫結(two-way-binding)，例如mvvm框架，資料驅動檢視，檢視狀態機等，研究了幾個目前主流的資料雙向繫結框架，總結了下。目前實現資料雙向繫結主要有以下三種。1、手動繫結比較老的實現方式，有點像觀察者程

面試總結：vue實現資料雙向繫結的原理

vue實現資料雙向繫結的原理就是用Object.defineproperty()重新定義（set方法）物件設定屬性值和（get方法）獲取屬性值的操縱來實現的 Object.property()方法的解釋：Object.property(引數1，引數2，引數3)   返回值為

javascript簡單實現資料雙向繫結

可以直接點選檢視例子。 程式碼實現如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars

Vue之v-model指令實現資料雙向繫結

v-bind指令只能實現資料的單向繫結，從M繫結到V，無法實現雙向繫結。 使用v-model指令，可以實現表單元素和Model中資料的雙向繫結，並且v-model指令只能運用在表單元素中。 <

Vue是怎麼實現資料雙向繫結的

vue資料雙向繫結原理 vue資料雙向繫結是通過資料劫持結合釋出者-訂閱者模式的方式來實現的，那麼vue是如果進行資料劫持的，我們可以先來看一下通過控制檯輸出一個定義在vue初始化資料上的物件是個什麼東西 var vm = new Vue({ dat

原生JS實現輪播圖的幾種方式

I 絕對定位+透明度 原理：首先，將所有輪播圖以絕對定位的方式定位父元素的相同位置；接著，實現上下鍵按鈕修改active的下標；最後，將所有圖片透明度重置為0，而被啟用的圖片透明度設定為1； 優點：實現最為簡單，程式碼量小，圖片過渡自然； 缺點：沒有左右滑

Vue.js資料雙向繫結的實現原理

Vue.js 最核心的功能有兩個，一是響應式的資料繫結系統，二是元件系統。本文僅探究雙向繫結是怎樣實現的。一、訪問器屬性訪問器屬性是物件中的一種特殊屬性，它不能直接在物件中設定，而必須通過 defineProperty() 方法單獨定義。       var obj = {

React學習之旅----實現類似vue的資料雙向繫結

react沒有資料的雙向繫結，但可以用過一些方法實現： import React from 'react'; class TodoList extends React.Component { constructor(props) { super(props) this.sta

自定義父子元件的資料雙向繫結實現

資料結構： 流程分析： 新建時，需要在提交表單時獲取到子元件的child資料，一般情況下，在提交時，利用this.parent.child=this.$refs.child.child,將child的資料賦值到parent中 修改時，需要從父元件把child物件傳遞給子元件，在獲取parent的資

實現VUE2.0中props資料雙向繫結的一種方案

問題描述 在vue2.0中，我們通過props方法來接受父元件所傳過來的值，但是這個過程是單項的，父元件可以改變傳給子元件的值，但是如果子元件想改變所接受的值並傳給父元件是不可以的，會報以下的錯誤。 該錯誤的意思的是：避免直接更改一個PROP，因為每當父元件重新呈現時

vue資料雙向繫結的原理和vue-router路由的實現原理

vue實現雙向資料繫結的原理就是利用了 Object.defineProperty() 這個方法重新定義了物件獲取屬性值(get)和設定屬性值(set)的操作來實現的。 在MDN上對該方法的說明是：Object.defineProperty() 方法會直接在一個物件上定義一

【VUE】IView.js下拉框資料雙向繫結

寫在前面的    在Iview.js的眾多元件中，drop selection也是使用比較頻繁的元件之一，下面就用最為簡單的方法來實現下拉框中資料的動態繫結。 Select Option

用jquery實現的簡單資料雙向繫結

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script

vue.js v-model資料雙向繫結例項

vue.js的一大功能便是實現資料的雙向繫結，本文就表單處理時運用v-model指令實現雙向繫結做一個介紹： v-model這個指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向繫結，指的就是我們

vue中資料雙向繫結的實現原理

* Object.defineProperty() * 對物件的屬性進行 定義/修改 * */ let obj = {x:10} // 這兩種方式都相對來說比較簡單，直接，但是有些時候我們需要對物件的屬性的修改和增加進行必要的干預 //

今天學習一下js實現vue.js中的雙向繫結

看完後，越來越感覺到JavaScript原生的強大了。 話不多，原始碼附上 實現效果圖: HTML: <div id="app"> <input type="text" zf-model="msg" /> <input