es6數(shù)據(jù)變更同步到視圖層的方法

2024-05-06 16:48:44

字體：大中小

供稿：網(wǎng)友

數(shù)據(jù)變更同步到視圖層有一個(gè)很重要的東西就是Proxy,Proxy的作用就是可以隱藏真正的對(duì)象，而用戶去修改它的代理對(duì)象.Proxy可以監(jiān)聽數(shù)據(jù)的變化，例如

<div id="test">  name:{{name}}  age:{{age}}</div><script>  let el = document.getElementById('test');  let datainner = {    name:"Jack",    age:"18"  }  let template = el.innerHTML;  let data = new Proxy(datainner,{    set(obj,name,value){      console.log(name+"的值被操縱成了value"+value)      obj[name]=value;      console.log("數(shù)據(jù)改變了");      render()    }  })  data.name="Jack Chen"</script>

es6,數(shù)據(jù)變更,同步,視圖層

可以監(jiān)控到data數(shù)據(jù)的改變,然后就可以將數(shù)據(jù)渲染到html中，就可以實(shí)現(xiàn)es6數(shù)據(jù)同步到視圖層

最終代碼

 <script>  let el = document.getElementById('test');  let datainner = {    name:"Jack",    age:"18"  }  let template = el.innerHTML;  let data = new Proxy(datainner,{    set(obj,name,value){      console.log(name+"的值被操縱成了"+value)      obj[name]=value;      console.log("數(shù)據(jù)改變了");      render();    }  })  render();  //數(shù)據(jù)渲染  function render(){    el.innerHTML = template.replace(//{/{/w+/}/}/g,str=>{      str=str.substring(2,str.length-2);      console.log(datainner[str]);      return datainner[str]    })  }</script>

最終效果

es6,數(shù)據(jù)變更,同步,視圖層