前端的三种数据绑定技术

本喵写了以下三种不同方式的数据绑定(只实现了单向绑定):

  • 第一种,使用了“脏值”检测,该方法是 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 的数据绑定技术是基于什么?有哪位技术淫可以告知一下吗?


前端
本喵专注于前端技术,不定期更新优质前端文章,欢迎关注~

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

26 声望
0 粉丝
0 条评论
推荐阅读
css - overflow-wrap、word-wrap、word-break、white-space 使用总结
效果:可以看到在默认情况下,有两个比较需要注意的地方1、在一行内,当最后一个单词无法完整放下,这个单词会放到下一行去2、在一行内,如果只有一个单词,且该单词的长度已经超过容器的长度,单词末尾部分的字...

技术四毛喵阅读 6.8k

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -&gt; Preference-&gt; Settings(如果装了中文插件包应该是 文件 -&gt; 选项 -&gt; 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城32阅读 7.3k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan25阅读 1.7k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.8k评论 3

封面图

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

26 声望
0 粉丝
宣传栏