当前位置：Gxlcms > JavaScript > javascript实现数据双向绑定的三种方式小结

javascript实现数据双向绑定的三种方式小结

时间：2021-07-01 10:21:17 帮助过：11人阅读

前端数据的双向绑定方法

前端的视图层和数据层有时需要实现双向绑定(two-way-binding)，例如mvvm框架，数据驱动视图，视图状态机等，研究了几个目前主流的数据双向绑定框架，总结了下。目前实现数据双向绑定主要有以下三种。

1、手动绑定

比较老的实现方式，有点像观察者编程模式，主要思路是通过在数据对象上定义get和set方法(当然还有其它方法)，调用时手动调用get或set数据，改变数据后出发UI层的渲染操作；以视图驱动数据变化的场景主要应用与input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>data-binding-method-set</title>
  6. </head>
  7. <body>
  8.   <input q-value="value" type="text" id="input">
  9.   <div q-text="value" id="el"></div>
  10.   <script>
  11.     var elems = [document.getElementById('el'), document.getElementById('input')];
  12.     var data = {
  13.       value: 'hello!'
  14.     };
  15.     var command = {
  16.       text: function(str){
  17.         this.innerHTML = str;
  18.       },
  19.       value: function(str){
  20.         this.setAttribute('value', str);
  21.       }
  22.     };
  23.     var scan = function(){    
  24.       /**
  25.        * 扫描带指令的节点属性
  26.        */
  27.       for(var i = 0, len = elems.length; i < len; i++){
  28.         var elem = elems[i];
  29.         elem.command = [];
  30.         for(var j = 0, len1 = elem.attributes.length; j < len1; j++){
  31.           var attr = elem.attributes[j];
  32.           if(attr.nodeName.indexOf('q-') >= 0){
  33.             /**
  34.              * 调用属性指令，这里可以使用数据改变检测
  35.              */
  36.             command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
  37.             elem.command.push(attr.nodeName.slice(2));
  38.           }
  39.         }
  40.       }
  41.     }
  42.     /**
  43.      * 设置数据后扫描
  44.      */
  45.     function mvSet(key, value){
  46.       data[key] = value;
  47.       scan();
  48.     }
  49.     /**
  50.      * 数据绑定监听
  51.      */
  52.     elems[1].addEventListener('keyup', function(e){
  53.       mvSet('value', e.target.value);
  54.     }, false);
  55.     scan();
  56.     /**
  57.      * 改变数据更新视图
  58.      */
  59.     setTimeout(function(){
  60.       mvSet('value', 'fuck');
  61.     },1000)
  62.   </script>
  63. </body>
  64. </html>

2、脏检查机制

以典型的mvvm框架angularjs为代表，angular通过检查脏数据来进行UI层的操作更新。关于angular的脏检测，有几点需要了解些： - 脏检测机制并不是使用定时检测。 - 脏检测的时机是在数据发生变化时进行。 - angular对常用的dom事件，xhr事件等做了封装， 在里面触发进入angular的digest流程。 - 在digest流程里面， 会从rootscope开始遍历， 检查所有的watcher。 （关于angular的具体设计可以看其他文档，这里只讨论数据绑定），那我们看下脏检测该如何去做：主要是通过设置的数据来需找与该数据相关的所有元素，然后再比较数据变化，如果变化则进行指令操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>data-binding-drity-check</title>
  6. </head>
  7. <body>
  8.   <input q-event="value" ng-bind="value" type="text" id="input">
  9.   <div q-event="text" ng-bind="value" id="el"></div>
  10.   <script>
  11.   var elems = [document.getElementById('el'), document.getElementById('input')];
  12.   
  13.   var data = {
  14.     value: 'hello!'
  15.   };
  16.   var command = {
  17.     text: function(str) {
  18.       this.innerHTML = str;
  19.     },
  20.     value: function(str) {
  21.       this.setAttribute('value', str);
  22.     }
  23.   };
  24.   var scan = function(elems) {
  25.     /**
  26.      * 扫描带指令的节点属性
  27.      */
  28.     for (var i = 0, len = elems.length; i < len; i++) {
  29.       var elem = elems[i];
  30.       elem.command = {};
  31.       for (var j = 0, len1 = elem.attributes.length; j < len1; j++) {
  32.         var attr = elem.attributes[j];
  33.         if (attr.nodeName.indexOf('q-event') >= 0) {
  34.           /**
  35.            * 调用属性指令
  36.            */
  37.           var dataKey = elem.getAttribute('ng-bind') || undefined;
  38.           /**
  39.            * 进行数据初始化
  40.            */
  41.           command[attr.nodeValue].call(elem, data[dataKey]);
  42.           elem.command[attr.nodeValue] = data[dataKey];
  43.         }
  44.       }
  45.     }
  46.   }
  47.   /**
  48.    * 脏循环检测
  49.    * @param {[type]} elems [description]
  50.    * @return {[type]}    [description]
  51.    */
  52.   var digest = function(elems) {
  53.     /**
  54.      * 扫描带指令的节点属性
  55.      */
  56.     for (var i = 0, len = elems.length; i < len; i++) {
  57.       var elem = elems[i];
  58.       for (var j = 0, len1 = elem.attributes.length; j < len1; j++) {
  59.         var attr = elem.attributes[j];
  60.         if (attr.nodeName.indexOf('q-event') >= 0) {
  61.           /**
  62.            * 调用属性指令
  63.            */
  64.           var dataKey = elem.getAttribute('ng-bind') || undefined;
  65.           /**
  66.            * 进行脏数据检测，如果数据改变，则重新执行指令，否则跳过
  67.            */
  68.           if(elem.command[attr.nodeValue] !== data[dataKey]){
  69.             command[attr.nodeValue].call(elem, data[dataKey]);
  70.             elem.command[attr.nodeValue] = data[dataKey];
  71.           }
  72.         }
  73.       }
  74.     }
  75.   }
  76.   /**
  77.    * 初始化数据
  78.    */
  79.   scan(elems);
  80.   /**
  81.    * 可以理解为做数据劫持监听
  82.    */
  83.   function $digest(value){
  84.     var list = document.querySelectorAll('[ng-bind='+ value + ']');
  85.     digest(list);
  86.   }
  87.   /**
  88.    * 输入框数据绑定监听
  89.    */
  90.   if(document.addEventListener){
  91.     elems[1].addEventListener('keyup', function(e) {
  92.       data.value = e.target.value;
  93.       $digest(e.target.getAttribute('ng-bind'));
  94.     }, false);
  95.   }else{
  96.     elems[1].attachEvent('onkeyup', function(e) {
  97.       data.value = e.target.value;
  98.       $digest(e.target.getAttribute('ng-bind'));
  99.     }, false);
  100.   }
  101.   setTimeout(function() {
  102.     data.value = 'fuck';
  103.     /**
  104.      * 这里问啥还要执行$digest这里关键的是需要手动调用$digest方法来启动脏检测
  105.      */
  106.     $digest('value');
  107.   }, 2000)
  108.   </script>
  109. </body>
  110. </html>

3、前端数据劫持(Hijacking)

第三种方法则是avalon等框架使用的数据劫持方式。基本思路是使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以了。具体实现如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>data-binding-hijacking</title>
  6. </head>
  7. <body>
  8.   <input q-value="value" type="text" id="input">
  9.   <div q-text="value" id="el"></div>
  10.   <script>
  11.   var elems = [document.getElementById('el'), document.getElementById('input')];
  12.   var data = {
  13.     value: 'hello!'
  14.   };
  15.   var command = {
  16.     text: function(str) {
  17.       this.innerHTML = str;
  18.     },
  19.     value: function(str) {
  20.       this.setAttribute('value', str);
  21.     }
  22.   };
  23.   var scan = function() {
  24.     /**
  25.      * 扫描带指令的节点属性
  26.      */
  27.     for (var i = 0, len = elems.length; i < len; i++) {
  28.       var elem = elems[i];
  29.       elem.command = [];
  30.       for (var j = 0, len1 = elem.attributes.length; j < len1; j++) {
  31.         var attr = elem.attributes[j];
  32.         if (attr.nodeName.indexOf('q-') >= 0) {
  33.           /**
  34.            * 调用属性指令
  35.            */
  36.           command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
  37.           elem.command.push(attr.nodeName.slice(2));
  38.         }
  39.       }
  40.     }
  41.   }
  42.   var bValue;
  43.   /**
  44.    * 定义属性设置劫持
  45.    */
  46.   var defineGetAndSet = function(obj, propName) {
  47.     try {
  48.       Object.defineProperty(obj, propName, {
  49.         get: function() {
  50.           return bValue;
  51.         },
  52.         set: function(newValue) {
  53.           bValue = newValue;
  54.           scan();
  55.         },
  56.         enumerable: true,
  57.         configurable: true
  58.       });
  59.     } catch (error) {
  60.       console.log("browser not supported.");
  61.     }
  62.   }
  63.   /**
  64.    * 初始化数据
  65.    */
  66.   scan();
  67.   /**
  68.    * 可以理解为做数据劫持监听
  69.    */
  70.   defineGetAndSet(data, 'value');
  71.   /**
  72.    * 数据绑定监听
  73.    */
  74.   if(document.addEventListener){
  75.     elems[1].addEventListener('keyup', function(e) {
  76.       data.value = e.target.value;
  77.     }, false);
  78.   }else{
  79.     elems[1].attachEvent('onkeyup', function(e) {
  80.       data.value = e.target.value;
  81.     }, false);
  82.   }
  83.   setTimeout(function() {
  84.     data.value = 'fuck';
  85.   }, 2000)
  86.   </script>
  87. </body>
  88. </html>

但值得注意的是defineProperty支持IE8以上的浏览器，这里可以使用__defineGetter__ 和 __defineSetter__ 来做兼容但是浏览器兼容性的原因，直接用defineProperty就可以了。至于IE8浏览器仍需要使用其它方法来做hack。如下代码可以对IE8进行hack，defineProperty支持IE8。例如使用es5-shim.js就可以了。（IE8以下浏览器忽略）

4、小结

首先这里的例子只是简单的实现，读者可以深入感受三种方式的异同点，复杂的框架也是通过这样的基本思路滚雪球滚大的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！