欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2019年03月04日 15:22:46   作者：努力努力再努力  
這篇文章主要介紹了es6數(shù)據(jù)變更同步到視圖層的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

數(shù)據(jù)變更同步到視圖層有一個很重要的東西就是Proxy,Proxy的作用就是可以隱藏真正的對象，而用戶去修改它的代理對象.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>


可以監(jiān)控到data數(shù)據(jù)的改變,然后就可以將數(shù)據(jù)渲染到html中，就可以實現(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>

最終效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論