前端的三种数据绑定技术-51CTO.COM

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

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

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

01 脏值检测

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

<!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>

02 Object.defineProperty（ES5）

该方法是目前比较主流的方法，兼容性也不错，支持 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>

03 Proxy（ES6）

相比上面两种方法，用 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>

04 总结

除了上面三种方式外，其实原本还有一种 Object.observe 方法，该方法是在 es7 的草案中，不过经过各位大佬的讨论，还是废弃了这种方法，只有 chrome 曾经支持过（没错，是曾经，现在不支持了），这里就不鞭尸了（懒）。上面三种方式，无疑 proxy 是一个趋势，vue3 也改用它了，相信未来几年，proxy 会得到各个技术人的热捧。