JavaScript实现数据双向绑定的三种核心机制解析

前端数据双向绑定概述

前端数据的双向绑定方法

在前端开发中，视图层与数据层之间有时需要实现双向绑定（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>

数据劫持与Object.defineProperty

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>

但值得注意的是，Object.defineProperty仅支持IE8及以上的浏览器。为了兼容旧版浏览器，可以使用__defineGetter__和__defineSetter__进行兼容处理，但考虑到浏览器兼容性的复杂性，直接使用defineProperty即可。对于IE8浏览器，仍需使用其他方法进行Hack处理。例如，可以使用es5-shim.js来确保IE8支持defineProperty（IE8以下浏览器则忽略此兼容方案）。

总结

4、小结

上述示例仅为简单的实现演示，读者可以借此深入体会这三种方式的异同点。复杂的框架也是基于这些基本思路逐步扩展和完善起来的。

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