javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方式小結(jié)

更新時(shí)間：2017年03月09日 10:10:33 作者：ouven

本篇文章主要介紹了javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方式小結(jié)，前端的視圖層和數(shù)據(jù)層有時(shí)需要實(shí)現(xiàn)雙向綁定，目前實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要有三種，有興趣的可以了解一下。

前端數(shù)據(jù)的雙向綁定方法

前端的視圖層和數(shù)據(jù)層有時(shí)需要實(shí)現(xiàn)雙向綁定(two-way-binding)，例如mvvm框架，數(shù)據(jù)驅(qū)動(dòng)視圖，視圖狀態(tài)機(jī)等，研究了幾個(gè)目前主流的數(shù)據(jù)雙向綁定框架，總結(jié)了下。目前實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要有以下三種。

1、手動(dòng)綁定

比較老的實(shí)現(xiàn)方式，有點(diǎn)像觀察者編程模式，主要思路是通過(guò)在數(shù)據(jù)對(duì)象上定義get和set方法(當(dāng)然還有其它方法)，調(diào)用時(shí)手動(dòng)調(diào)用get或set數(shù)據(jù)，改變數(shù)據(jù)后出發(fā)UI層的渲染操作；以視圖驅(qū)動(dòng)數(shù)據(jù)變化的場(chǎng)景主要應(yīng)用與input、select、textarea等元素，當(dāng)UI層變化時(shí)，通過(guò)監(jiān)聽(tīng)dom的change，keypress，keyup等事件來(lái)出發(fā)事件改變數(shù)據(jù)層的數(shù)據(jù)。整個(gè)過(guò)程均通過(guò)函數(shù)調(diào)用完成。

<!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(){    
      /**
       * 掃描帶指令的節(jié)點(diǎn)屬性
       */
      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){
            /**
             * 調(diào)用屬性指令，這里可以使用數(shù)據(jù)改變檢測(cè)
             */
            command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
            elem.command.push(attr.nodeName.slice(2));
          }
        }
      }
    }

    /**
     * 設(shè)置數(shù)據(jù)后掃描
     */
    function mvSet(key, value){
      data[key] = value;
      scan();
    }
    /**
     * 數(shù)據(jù)綁定監(jiān)聽(tīng)
     */
    elems[1].addEventListener('keyup', function(e){
      mvSet('value', e.target.value);
    }, false);

    scan();

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

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

2、臟檢查機(jī)制

以典型的mvvm框架angularjs為代表，angular通過(guò)檢查臟數(shù)據(jù)來(lái)進(jìn)行UI層的操作更新。關(guān)于angular的臟檢測(cè)，有幾點(diǎn)需要了解些： - 臟檢測(cè)機(jī)制并不是使用定時(shí)檢測(cè)。 - 臟檢測(cè)的時(shí)機(jī)是在數(shù)據(jù)發(fā)生變化時(shí)進(jìn)行。 - angular對(duì)常用的dom事件，xhr事件等做了封裝，在里面觸發(fā)進(jìn)入angular的digest流程。 - 在digest流程里面，會(huì)從rootscope開(kāi)始遍歷，檢查所有的watcher。（關(guān)于angular的具體設(shè)計(jì)可以看其他文檔，這里只討論數(shù)據(jù)綁定），那我們看下臟檢測(cè)該如何去做：主要是通過(guò)設(shè)置的數(shù)據(jù)來(lái)需找與該數(shù)據(jù)相關(guān)的所有元素，然后再比較數(shù)據(jù)變化，如果變化則進(jìn)行指令操作

<!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) {
    /**
     * 掃描帶指令的節(jié)點(diǎn)屬性
     */
    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) {
          /**
           * 調(diào)用屬性指令
           */
          var dataKey = elem.getAttribute('ng-bind') || undefined;
          /**
           * 進(jìn)行數(shù)據(jù)初始化
           */
          command[attr.nodeValue].call(elem, data[dataKey]);
          elem.command[attr.nodeValue] = data[dataKey];
        }
      }
    }
  }

  /**
   * 臟循環(huán)檢測(cè)
   * @param {[type]} elems [description]
   * @return {[type]}    [description]
   */
  var digest = function(elems) {
    /**
     * 掃描帶指令的節(jié)點(diǎn)屬性
     */
    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) {
          /**
           * 調(diào)用屬性指令
           */
          var dataKey = elem.getAttribute('ng-bind') || undefined;

          /**
           * 進(jìn)行臟數(shù)據(jù)檢測(cè)，如果數(shù)據(jù)改變，則重新執(zhí)行指令，否則跳過(guò)
           */
          if(elem.command[attr.nodeValue] !== data[dataKey]){

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

  /**
   * 初始化數(shù)據(jù)
   */
  scan(elems);

  /**
   * 可以理解為做數(shù)據(jù)劫持監(jiān)聽(tīng)
   */
  function $digest(value){
    var list = document.querySelectorAll('[ng-bind='+ value + ']');
    digest(list);
  }

  /**
   * 輸入框數(shù)據(jù)綁定監(jiān)聽(tīng)
   */
  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';
    /**
     * 這里問(wèn)啥還要執(zhí)行$digest這里關(guān)鍵的是需要手動(dòng)調(diào)用$digest方法來(lái)啟動(dòng)臟檢測(cè)
     */
    $digest('value');
  }, 2000)

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

3、前端數(shù)據(jù)劫持(Hijacking)

第三種方法則是avalon等框架使用的數(shù)據(jù)劫持方式?；舅悸肥鞘褂肙bject.defineProperty對(duì)數(shù)據(jù)對(duì)象做屬性get和set的監(jiān)聽(tīng)，當(dāng)有數(shù)據(jù)讀取和賦值操作時(shí)則調(diào)用節(jié)點(diǎn)的指令，這樣使用最通用的=等號(hào)賦值就可以了。具體實(shí)現(xiàn)如下：

<!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() {
    /**
     * 掃描帶指令的節(jié)點(diǎn)屬性
     */
    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) {
          /**
           * 調(diào)用屬性指令
           */
          command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
          elem.command.push(attr.nodeName.slice(2));

        }
      }
    }
  }

  var bValue;
  /**
   * 定義屬性設(shè)置劫持
   */
  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.");
    }
  }
  /**
   * 初始化數(shù)據(jù)
   */
  scan();

  /**
   * 可以理解為做數(shù)據(jù)劫持監(jiān)聽(tīng)
   */
  defineGetAndSet(data, 'value');

  /**
   * 數(shù)據(jù)綁定監(jiān)聽(tīng)
   */
  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__ 來(lái)做兼容但是瀏覽器兼容性的原因，直接用defineProperty就可以了。至于IE8瀏覽器仍需要使用其它方法來(lái)做hack。如下代碼可以對(duì)IE8進(jìn)行hack，defineProperty支持IE8。例如使用es5-shim.js就可以了。（IE8以下瀏覽器忽略）

4、小結(jié)

首先這里的例子只是簡(jiǎn)單的實(shí)現(xiàn)，讀者可以深入感受三種方式的異同點(diǎn)，復(fù)雜的框架也是通過(guò)這樣的基本思路滾雪球滾大的。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: