溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“前端的數據綁定技術有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“前端的數據綁定技術有哪些”吧!
如果綁定的數據過多，臟值檢測可能會造成性能問題，因為每次改變值，都需要進行輪詢改變對應的值。
<!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> <h4>臟值檢測</h4> <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>該方法是目前比較主流的方法，兼容性也不錯，支持 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> <h4>Object.defineProperty（ES5語法）</h4> <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>相比上面兩種方法，用 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> <h4>proxy（ES6語法）</h4> <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>到此，相信大家對“前端的數據綁定技術有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
