关于前端:前端的三种数据绑定技术

12次阅读

共计 4384 个字符，预计需要花费 11 分钟才能阅读完成。

本喵写了以下三种不同形式的数据绑定（只实现了单向绑定）：

第一种，应用了“脏值”检测，该办法是 angular 的数据绑定原理。
第二种，应用了 es5 的 Object.defineProperty()，vue2 的数据绑定就是基于该办法。
第三种，应用了 es6 的 Proxy，vue3 的数据绑定开始全盘换为这种形式。

废话不多说，间接撸起代码~

如果绑定的数据过多，脏值检测可能会造成性能问题，因为每次扭转值，都须要进行轮询扭转对应的值。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 脏值检测 </title>
</head>

<body>
  <h3> 脏值检测 </h3>
  <button a-click="add" style="width: 40%; height: 50px;"> 减少 </button>
  <button a-click="reset" style="width: 40%; height: 50px;"> 重置 </button>
  <div>
    <span> 第一个绑定数据：</span>
    <span id="aa" style="color:#CC6600" a-bind="counter"></span>
  </div>
  <div>
    <span> 第二个绑定数据：</span>
    <span style="color:#CCCC33" a-bind="counter"></span>
  </div>
  <div>
    <span> 第三个绑定数据：</span>
    <span style="color:#336699" a-bind="counter"></span>
  </div>
  <script type="text/javascript">
    window.onload = function () {
      // 首次加载须要初始化数据
      apply()
      bind()}
    // data
    let counter = 0
    // methods
    function add() {counter++}

    function reset() {counter = 0}
    // bind event
    function bind() {let list = document.querySelectorAll("[a-click]")
      list.forEach(item => {item.onclick = function () {window[item.getAttribute("a-click")]()
          apply()}
      })
    }
    // bind data
    function apply() {let list = document.querySelectorAll("[a-bind='counter']")
      list.forEach(item => {if (item.innerHTML !== counter + '') {item.innerHTML = counter}
      })
    }
  </script>
</body>

</html>

该办法是目前比拟支流的办法，兼容性也不错，反对 ie8（留神：上面并没实现 vue2 的公布订阅者模式，有空再撸一个进去）。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Object.defineProperty</title>
</head>

<body>
  <h3>Object.defineProperty（ES5 语法）</h3>
  <button a-click="add" style="width: 40%; height: 50px;"> 减少 </button>
  <button a-click="reset" style="width: 40%; height: 50px;"> 重置 </button>
  <div>
    <span> 第一个绑定数据：</span>
    <span style="color:#CC6600" a-bind="counter"></span>
  </div>
  <div>
    <span> 第二个绑定数据：</span>
    <span style="color:#CCCC33" a-bind="counter"></span>
  </div>
  <div>
    <span> 第三个绑定数据：</span>
    <span style="color:#336699" a-bind="counter"></span>
  </div>
  <script type="text/javascript">
    window.onload = function () {
      // 首次加载须要初始化数据
      apply('counter', obj.counter)
      bind()}
    // data
    let obj = {_counter: 0}
    // counter 只是一个载体，真正的值存储在 _counter
    Object.defineProperty(obj, 'counter', {get: function () {//console.log('get:', counter)
        return this._counter
      },
      set: function (val) {
        this._counter = val
        //console.log('set:', counter)
        apply('counter', this._counter)
      }
    })
    // methods
    function add() {obj.counter++}

    function reset() {obj.counter = 0}
    // bind event
    function bind() {let list = document.querySelectorAll('[a-click]')
      list.forEach(item => {item.onclick = function () {window[item.getAttribute('a-click')]()}
      })
    }
    // bind data
    function apply(str, val) {let list = document.querySelectorAll(`[a-bind=${str}]`)
      list.forEach(item => {if (item.innerHTML !== val + '') {item.innerHTML = val}
      })
    }
  </script>
</body>

</html>

—

相比下面两种办法，用 es6 Proxy 来写数据绑定，代码会直观很多，而且很易用，不过遗憾的是 Proxy 兼容性很差，IE 是全面不反对它，而且 babel 没法齐全将它转为 es5 语法，尽管有 google 大佬写的 Polyfill，但那个也是有完好的（不晓得尤大在 vue3 里怎么解决它）。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>proxy</title>
</head>

<body>
  <h3>proxy（ES6 语法）</h3>
  <button a-click="add" style="width: 40%; height: 50px;"> 减少 </button>
  <button a-click="reset" style="width: 40%; height: 50px;"> 重置 </button>
  <div>
    <span> 第一个绑定数据：</span>
    <span style="color:#CC6600" a-bind="counter"></span>
  </div>
  <div>
    <span> 第二个绑定数据：</span>
    <span style="color:#CCCC33" a-bind="counter"></span>
  </div>
  <div>
    <span> 第三个绑定数据：</span>
    <span style="color:#336699" a-bind="counter"></span>
  </div>
  <script type="text/javascript">
    window.onload = function () {
      // 首次加载须要初始化数据
      apply('counter', obj.counter)
      bind()}

    // data
    let obj = new Proxy({counter: 0}, {set: function (obj, prop, value) {obj[prop] = value
        if (prop == 'counter') {apply('counter', value)
        }
        return true
      }
    })
    // methods
    function add() {obj.counter++}

    function reset() {obj.counter = 0}
    // bind event
    function bind() {let list = document.querySelectorAll('[a-click]')
      list.forEach(item => {item.onclick = function () {window[item.getAttribute('a-click')]()}
      })
    }
    // bind data
    function apply(str, val) {let list = document.querySelectorAll(`[a-bind=${str}]`)
      list.forEach(item => {if (item.innerHTML !== val + '') {item.innerHTML = val}
      })
    }
  </script>
</body>

</html>

    除了下面三种形式外，其实本来还有一种 Object.observe 办法，该办法是在 es7 的草案中，不过通过各位大佬的探讨，还是废除了这种办法，只有 chrome 已经反对过（没错，是已经，当初不反对了），这里就不鞭尸了（懒）。下面三种形式，无疑 proxy 是一个趋势，vue3 也改用它了，置信将来几年，proxy 会失去各个技术淫的热捧。

    那么问题来了，react 的数据绑定技术是基于什么？有哪位技术淫能够告知一下吗？

本喵第一次正式在思否平台发表文章，欢送~ 欢送~，心愿可能与大家一起共同进步。
本喵专一于前端技术，不定期更新优质前端文章。
喜爱本喵，请点击上面“关注作者”，亲们还能够关注公众号“技术汤姆喵”哦~

正文完