前端的数据绑定技术有哪些

本篇内容主要讲解“前端的数据绑定技术有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“前端的数据绑定技术有哪些”吧!

创新互联专注于网站建设|成都企业网站维护|优化|托管以及网络推广，积累了大量的网站设计与制作经验，为许多企业提供了网站定制设计服务，案例作品覆盖宣传片制作等行业。能根据企业所处的行业与销售的产品，结合品牌形象的塑造，量身策划品质网站。

01 脏值检测

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

                  
脏值检测
   增加   重置   
     第一个绑定数据：        
   
     第二个绑定数据：        
   
     第三个绑定数据：        
        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         }       })     }      

02 Object.defineProperty（ES5）

该方法是目前比较主流的方法，兼容性也不错，支持 ie8（注意：下面并没实现 vue2 的发布订阅者模式，有空再撸一个出来）。

                  
Object.defineProperty（ES5语法）
   增加   重置   
     第一个绑定数据：        
   
     第二个绑定数据：        
   
     第三个绑定数据：        
        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         }       })     }      

03 Proxy（ES6）

相比上面两种方法，用 es6 Proxy 来写数据绑定，代码会直观很多，而且很易用，不过遗憾的是 Proxy 兼容性很差，IE 是全面不支持它，而且 babel 没法完全将它转为 es5 语法，虽然有 google 大佬写的 Polyfill，但那个也是有残缺的（不知道尤大在 vue3 里怎么解决它）。

                  
proxy（ES6语法）
   增加   重置   
     第一个绑定数据：        
   
     第二个绑定数据：        
   
     第三个绑定数据：        
        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         }       })     }      

到此，相信大家对“前端的数据绑定技术有哪些”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！