前端扁平化数据转树形数据_前端的三种数据绑定技术

最新推荐文章于 2024-05-22 19:09:52 发布

赖明星

最新推荐文章于 2024-05-22 19:09:52 发布

阅读量146

点赞数

文章标签：前端扁平化数据转树形数据

本文链接：https://blog.csdn.net/weixin_34303763/article/details/112516109

版权

“ 如今，旧时代的 jq 的 dom 操作已逐渐摒弃，数据绑定技术已成为新时代的潮流，前端三大框架都有自身的数据绑定技术，了解这种技术背后的奸情才能更好地撸代码。”

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

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

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

01 脏值检测

—

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

<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 的发布订阅者模式，有空再撸一个出来)。

<html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Object.definePropertytitle>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 里怎么解决它)。

<html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>proxytitle>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>

03 总结

—

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

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