自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

前端的三種數(shù)據(jù)綁定技術(shù)

作者：湯姆技術(shù)貓
開發(fā) 前端
本文寫了以下三種不同方式的數(shù)據(jù)綁定（只實(shí)現(xiàn)了單向綁定）。

 本喵寫了以下三種不同方式的數(shù)據(jù)綁定（只實(shí)現(xiàn)了單向綁定）：

  • 第一種，使用了“臟值”檢測(cè)，該方法是 angular 的數(shù)據(jù)綁定原理。
  • 第二種，使用了 es5 的 Object.defineProperty()，vue2 的數(shù)據(jù)綁定就是基于該方法。
  • 第三種，使用了 es6 的 Proxy ，vue3 的數(shù)據(jù)綁定開始全盤換為這種方式。

廢話不多說(shuō)，直接擼起代碼~

[[360473]]

01 臟值檢測(cè)

如果綁定的數(shù)據(jù)過(guò)多，臟值檢測(cè)可能會(huì)造成性能問題，因?yàn)槊看胃淖冎?，都需要進(jìn)行輪詢改變對(duì)應(yīng)的值。

  1. <!DOCTYPE html> 
  2. <html lang="zh-CN"> 
  3.  
  4. <head> 
  5.   <meta charset="UTF-8"> 
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  7.   <title>臟值檢測(cè)</title> 
  8. </head> 
  9.  
  10. <body> 
  11.   <h3>臟值檢測(cè)</h3> 
  12.   <button a-click="add" style="width: 40%; height: 50px;">增加</button> 
  13.   <button a-click="reset" style="width: 40%; height: 50px;">重置</button> 
  14.   <div> 
  15.     <span>第一個(gè)綁定數(shù)據(jù)：</span> 
  16.     <span id="aa" style="color:#CC6600" a-bind="counter"></span> 
  17.   </div> 
  18.   <div> 
  19.     <span>第二個(gè)綁定數(shù)據(jù)：</span> 
  20.     <span style="color:#CCCC33" a-bind="counter"></span> 
  21.   </div> 
  22.   <div> 
  23.     <span>第三個(gè)綁定數(shù)據(jù)：</span> 
  24.     <span style="color:#336699" a-bind="counter"></span> 
  25.   </div> 
  26.   <script type="text/javascript"> 
  27.     window.onload = function () { 
  28.       // 首次加載需要初始化數(shù)據(jù) 
  29.       apply() 
  30.       bind() 
  31.     } 
  32.     // data 
  33.     let counter = 0 
  34.     // methods 
  35.     function add() { 
  36.       counter++ 
  37.     } 
  38.  
  39.     function reset() { 
  40.       counter = 0 
  41.     } 
  42.     // bind event 
  43.     function bind() { 
  44.       let list = document.querySelectorAll("[a-click]") 
  45.       list.forEach(item => { 
  46.         item.onclick = function () { 
  47.           window[item.getAttribute("a-click")]() 
  48.           apply() 
  49.         } 
  50.       }) 
  51.     } 
  52.     // bind data 
  53.     function apply() { 
  54.       let list = document.querySelectorAll("[a-bind='counter']") 
  55.       list.forEach(item => { 
  56.         if (item.innerHTML !== counter + '') { 
  57.           item.innerHTML = counter 
  58.         } 
  59.       }) 
  60.     } 
  61.   </script> 
  62. </body> 
  63.  
  64. </html> 

02 Object.defineProperty（ES5）

該方法是目前比較主流的方法，兼容性也不錯(cuò)，支持 ie8（注意：下面并沒實(shí)現(xiàn) vue2 的發(fā)布訂閱者模式，有空再擼一個(gè)出來(lái)）。

  1. <!DOCTYPE html> 
  2. <html lang="zh-CN"> 
  3.  
  4. <head> 
  5.   <meta charset="UTF-8"> 
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  7.   <title>Object.defineProperty</title> 
  8. </head> 
  9.  
  10. <body> 
  11.   <h3>Object.defineProperty（ES5語(yǔ)法）</h3> 
  12.   <button a-click="add" style="width: 40%; height: 50px;">增加</button> 
  13.   <button a-click="reset" style="width: 40%; height: 50px;">重置</button> 
  14.   <div> 
  15.     <span>第一個(gè)綁定數(shù)據(jù)：</span> 
  16.     <span style="color:#CC6600" a-bind="counter"></span> 
  17.   </div> 
  18.   <div> 
  19.     <span>第二個(gè)綁定數(shù)據(jù)：</span> 
  20.     <span style="color:#CCCC33" a-bind="counter"></span> 
  21.   </div> 
  22.   <div> 
  23.     <span>第三個(gè)綁定數(shù)據(jù)：</span> 
  24.     <span style="color:#336699" a-bind="counter"></span> 
  25.   </div> 
  26.   <script type="text/javascript"> 
  27.     window.onload = function () { 
  28.       // 首次加載需要初始化數(shù)據(jù) 
  29.       apply('counter', obj.counter) 
  30.       bind() 
  31.     } 
  32.     // data 
  33.     let obj = { 
  34.       _counter: 0 
  35.     } 
  36.     // counter 只是一個(gè)載體，真正的值存儲(chǔ)在 _counter 
  37.     Object.defineProperty(obj, 'counter', { 
  38.       get: function () { 
  39.         //console.log('get:', counter) 
  40.         return this._counter 
  41.       }, 
  42.       set: function (val) { 
  43.         this._counter = val 
  44.         //console.log('set:', counter) 
  45.         apply('counter', this._counter) 
  46.       } 
  47.     }) 
  48.     // methods 
  49.     function add() { 
  50.       obj.counter++ 
  51.     } 
  52.  
  53.     function reset() { 
  54.       obj.counter = 0 
  55.     } 
  56.     // bind event 
  57.     function bind() { 
  58.       let list = document.querySelectorAll('[a-click]') 
  59.       list.forEach(item => { 
  60.         item.onclick = function () { 
  61.           window[item.getAttribute('a-click')]() 
  62.         } 
  63.       }) 
  64.     } 
  65.     // bind data 
  66.     function apply(str, val) { 
  67.       let list = document.querySelectorAll(`[a-bind=${str}]`) 
  68.       list.forEach(item => { 
  69.         if (item.innerHTML !== val + '') { 
  70.           item.innerHTML = val 
  71.         } 
  72.       }) 
  73.     } 
  74.   </script> 
  75. </body> 
  76.  
  77. </html> 

03 Proxy（ES6）

相比上面兩種方法，用 es6 Proxy 來(lái)寫數(shù)據(jù)綁定，代碼會(huì)直觀很多，而且很易用，不過(guò)遺憾的是 Proxy 兼容性很差，IE 是全面不支持它，而且 babel 沒法完全將它轉(zhuǎn)為 es5 語(yǔ)法，雖然有 google 大佬寫的 Polyfill，但那個(gè)也是有殘缺的（不知道尤大在 vue3 里怎么解決它）。

  1. <!DOCTYPE html> 
  2. <html lang="zh-CN"> 
  3.  
  4. <head> 
  5.   <meta charset="UTF-8"> 
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  7.   <title>proxy</title> 
  8. </head> 
  9.  
  10. <body> 
  11.   <h3>proxy（ES6語(yǔ)法）</h3> 
  12.   <button a-click="add" style="width: 40%; height: 50px;">增加</button> 
  13.   <button a-click="reset" style="width: 40%; height: 50px;">重置</button> 
  14.   <div> 
  15.     <span>第一個(gè)綁定數(shù)據(jù)：</span> 
  16.     <span style="color:#CC6600" a-bind="counter"></span> 
  17.   </div> 
  18.   <div> 
  19.     <span>第二個(gè)綁定數(shù)據(jù)：</span> 
  20.     <span style="color:#CCCC33" a-bind="counter"></span> 
  21.   </div> 
  22.   <div> 
  23.     <span>第三個(gè)綁定數(shù)據(jù)：</span> 
  24.     <span style="color:#336699" a-bind="counter"></span> 
  25.   </div> 
  26.   <script type="text/javascript"> 
  27.     window.onload = function () { 
  28.       // 首次加載需要初始化數(shù)據(jù) 
  29.       apply('counter', obj.counter) 
  30.       bind() 
  31.     } 
  32.  
  33.     // data 
  34.     let obj = new Proxy({ 
  35.       counter: 0 
  36.     }, { 
  37.       set: function (obj, prop, value) { 
  38.         obj[prop] = value 
  39.         if (prop == 'counter') { 
  40.           apply('counter', value) 
  41.         } 
  42.         return true 
  43.       } 
  44.     }) 
  45.     // methods 
  46.     function add() { 
  47.       obj.counter++ 
  48.     } 
  49.  
  50.     function reset() { 
  51.       obj.counter = 0 
  52.     } 
  53.     // bind event 
  54.     function bind() { 
  55.       let list = document.querySelectorAll('[a-click]') 
  56.       list.forEach(item => { 
  57.         item.onclick = function () { 
  58.           window[item.getAttribute('a-click')]() 
  59.         } 
  60.       }) 
  61.     } 
  62.     // bind data 
  63.     function apply(str, val) { 
  64.       let list = document.querySelectorAll(`[a-bind=${str}]`) 
  65.       list.forEach(item => { 
  66.         if (item.innerHTML !== val + '') { 
  67.           item.innerHTML = val 
  68.         } 
  69.       }) 
  70.     } 
  71.   </script> 
  72. </body> 
  73.  
  74. </html> 

04 總結(jié)

除了上面三種方式外，其實(shí)原本還有一種 Object.observe 方法，該方法是在 es7 的草案中，不過(guò)經(jīng)過(guò)各位大佬的討論，還是廢棄了這種方法，只有 chrome 曾經(jīng)支持過(guò)（沒錯(cuò)，是曾經(jīng)，現(xiàn)在不支持了），這里就不鞭尸了（懶）。上面三種方式，無(wú)疑 proxy 是一個(gè)趨勢(shì)，vue3 也改用它了，相信未來(lái)幾年，proxy 會(huì)得到各個(gè)技術(shù)人的熱捧。

 

 

責(zé)任編輯：張燕妮 來(lái)源： segmentfault.com
前端數(shù)據(jù)技術(shù)
相關(guān)推薦

2025-02-17 11:08:08

2010-09-26 16:31:13

隨機(jī)查詢語(yǔ)句

2016-01-27 10:25:31

數(shù)據(jù)分析數(shù)據(jù)架構(gòu)數(shù)據(jù)價(jià)值

2023-03-06 08:40:43

RedisListJava

2022-05-27 11:33:02

前端代碼設(shè)計(jì)模式

2020-10-28 10:10:03

Java單鏈表數(shù)據(jù)結(jié)構(gòu)

2010-07-30 11:03:54

Flex數(shù)據(jù)綁定

2017-06-29 14:12:13

SQL ServerMysqlOracle

2016-11-10 13:00:32

網(wǎng)絡(luò)傳輸協(xié)議pythonhttp

2010-04-20 12:00:01

負(fù)載均衡技術(shù)

2015-10-20 11:12:16

數(shù)據(jù)公司部門

2010-07-30 10:30:58

Flex數(shù)據(jù)綁定

2010-07-05 18:32:25

2010-08-31 11:14:32

2012-08-07 10:02:06

JSP

2021-11-23 10:30:35

Android技術(shù)代碼

2015-11-12 10:06:28

數(shù)據(jù)中心模塊化

2014-09-10 10:07:50

工程師前端工程師

2011-01-18 15:35:59

jQueryJavaScriptweb

2017-04-19 16:30:51

SDNNFV網(wǎng)絡(luò)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)