首頁  >  文章  >  web前端  >  關於javascript實現資料雙向綁定的三種方法分享

關於javascript實現資料雙向綁定的三種方法分享

黄舟
黄舟原創
2017-03-21 14:41:001914瀏覽

本篇文章主要介紹了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">
  <p q-text="value" id="el"></p>
  <script>
    var elems = [document.getElementById(&#39;el&#39;), document.getElementById(&#39;input&#39;)];

    var data = {
      value: &#39;hello!&#39;
    };

    var command = {
      text: function(str){
        this.innerHTML = str;
      },
      value: function(str){
        this.setAttribute(&#39;value&#39;, 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(&#39;q-&#39;) >= 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(&#39;keyup&#39;, function(e){
      mvSet(&#39;value&#39;, e.target.value);
    }, false);

    scan();

    /**
     * 改变数据更新视图
     */
    setTimeout(function(){
      mvSet(&#39;value&#39;, &#39;fuck&#39;);
    },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">
  <p q-event="text" ng-bind="value" id="el"></p>
  <script>

  var elems = [document.getElementById(&#39;el&#39;), document.getElementById(&#39;input&#39;)];
  
  var data = {
    value: &#39;hello!&#39;
  };

  var command = {
    text: function(str) {
      this.innerHTML = str;
    },
    value: function(str) {
      this.setAttribute(&#39;value&#39;, 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(&#39;q-event&#39;) >= 0) {
          /**
           * 调用属性指令
           */
          var dataKey = elem.getAttribute(&#39;ng-bind&#39;) || 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(&#39;q-event&#39;) >= 0) {
          /**
           * 调用属性指令
           */
          var dataKey = elem.getAttribute(&#39;ng-bind&#39;) || 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(&#39;[ng-bind=&#39;+ value + &#39;]&#39;);
    digest(list);
  }

  /**
   * 输入框数据绑定监听
   */
  if(document.addEventListener){
    elems[1].addEventListener(&#39;keyup&#39;, function(e) {
      data.value = e.target.value;
      $digest(e.target.getAttribute(&#39;ng-bind&#39;));
    }, false);
  }else{
    elems[1].attachEvent(&#39;onkeyup&#39;, function(e) {
      data.value = e.target.value;
      $digest(e.target.getAttribute(&#39;ng-bind&#39;));
    }, false);
  }

  setTimeout(function() {
    data.value = &#39;fuck&#39;;
    /**
     * 这里问啥还要执行$digest这里关键的是需要手动调用$digest方法来启动脏检测
     */
    $digest(&#39;value&#39;);
  }, 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">
  <p q-text="value" id="el"></p>
  <script>


  var elems = [document.getElementById(&#39;el&#39;), document.getElementById(&#39;input&#39;)];

  var data = {
    value: &#39;hello!&#39;
  };

  var command = {
    text: function(str) {
      this.innerHTML = str;
    },
    value: function(str) {
      this.setAttribute(&#39;value&#39;, 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(&#39;q-&#39;) >= 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, &#39;value&#39;);

  /**
   * 数据绑定监听
   */
  if(document.addEventListener){
    elems[1].addEventListener(&#39;keyup&#39;, function(e) {
      data.value = e.target.value;
    }, false);
  }else{
    elems[1].attachEvent(&#39;onkeyup&#39;, function(e) {
      data.value = e.target.value;
    }, false);
  }

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

</html>

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

4、小結

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

以上是關於javascript實現資料雙向綁定的三種方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn