Shulou(Shulou.com)06/03 Report--

This article focuses on "what are the front-end data binding technologies", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the front-end data binding technologies?"

01 dirty value detection

If too much data is bound, dirty value detection may cause performance problems, because each time you change the value, you need to poll to change the corresponding value.

Dirty value detection increases the reset of the first bound data: the second binding data: the third binding data: _ window.onload = function () {/ / the first load requires initialization of data 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 (item = > {if [XSS _ clean]! = counter +') {item [XSS _ clean] = counter})} 02 Object.defineProperty (ES5)

This method is currently the mainstream method, compatibility is also good, support ie8 (note: the following does not implement the vue2 release subscriber mode, free to do another one).

Object.defineProperty Object.defineProperty (ES5 syntax) added to reset the first bound data: the second bound data: the third bound data: _ window.onload = function () {/ / the first load requires initializing data apply ('counter' Obj.counter) bind ()} / / data let obj = {_ counter: 0} / / counter is just a carrier The real value is stored in _ 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 murick')] ()}})} / / bind data function apply (str) Val) {let list = document.querySelectorAll (`[a color binder ${str}]`) list.forEach (item = > {if (item [XSS _ clean]! = val +') {item [XSS _ clean] = val}})} 03 Proxy (ES6)

Compared with the above two methods, using es6 Proxy to write data binding, the code will be much more intuitive, and very easy to use, but unfortunately Proxy compatibility is very poor, IE does not support it at all, and babel can not completely convert it into es5 syntax, although there is Polyfill written by google, but that is also incomplete (I do not know how to solve it in vue3).

Proxy proxy (ES6 syntax) added to reset the first bound data: the second bound data: the third bound data: _ window.onload = function () {/ / the first load requires initializing data 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 ('amurclick')] ()})} / / bind data function apply (str Val) {let list = document.querySelectorAll (`[a color bindings ${str}]`) list.forEach (item = > {if (item [XSS _ clean]! = val +') {item [XSS _ clean] = val}})} so far I believe you have a deeper understanding of "what are the front-end data binding technologies?". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.