前端的三种数据绑定技术

头像
技术四毛喵
    阅读 6 分钟

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

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

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

    image.png

    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 会得到各个技术淫的热捧。
        
        那么问题来了，react 的数据绑定技术是基于什么？有哪位技术淫可以告知一下吗？

    前端javascript
    技术四毛喵
    36 声望0 粉丝

    喜欢搞机，喜欢写bug，喜欢炒老板鱿鱼......

    下一篇 »
    网页播放器埋坑，看这一篇就搞定！！！

    引用和评论

    推荐阅读
    头像
    css - overflow-wrap、word-wrap、word-break、white-space 使用总结

    技术四毛喵阅读 8.2k

    头像
    如何在仓库中添加只对自己生效的.gitignore规则？

    热饭班长赞 4阅读 2.3k

    头像
    浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

    chokcoco赞 5阅读 1.3k

    头像
    不要再这样编写 async/await

    王大冶赞 7阅读 1.4k

    头像
    EventLoop事件循环机制(浏览器和Node EventLoop)

    大卫talk赞 6阅读 2.4k

    头像
    微信授权全链路打通指南

    程序员海军赞 4阅读 4k

    头像
    静态NodeList 和 动态NodeList的区别

    Change赞 5阅读 5.2k评论 2

    0 条评论
    得票最新