es6數(shù)據(jù)變更同步到視圖層的方法
更新時(shí)間：2019年03月04日 15:22:46 作者：努力努力再努力
這篇文章主要介紹了es6數(shù)據(jù)變更同步到視圖層的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
數(shù)據(jù)變更同步到視圖層有一個(gè)很重要的東西就是Proxy,Proxy的作用就是可以隱藏真正的對(duì)象，而用戶去修改它的代理對(duì)象.Proxy可以監(jiān)聽(tīng)數(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中，就可以實(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>
最終效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Web程序員必備的7個(gè)JavaScript函數(shù)
這篇文章主要為大家詳細(xì)介紹了Web程序員必備的7個(gè)JavaScript函數(shù)，教會(huì)大家如何靈活運(yùn)用JavaScript函數(shù)，感興趣的小伙伴們可以參考一下2016-06-06
JavaScript遍歷數(shù)組和對(duì)象的元素簡(jiǎn)單操作示例
這篇文章主要介紹了JavaScript遍歷數(shù)組和對(duì)象的元素簡(jiǎn)單操作,結(jié)合實(shí)例形式分析了javascript數(shù)組與對(duì)象元素遍歷相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-07-07
最近接觸了一下html5，當(dāng)然，接觸過(guò)html5的人都知道，html5也不過(guò)是提供一些新的標(biāo)簽而已，至于整下實(shí)現(xiàn)的核心，還是在javascript這里。2011-08-08
js實(shí)現(xiàn)的GridView即表頭固定表體有滾動(dòng)條且可滾動(dòng)
實(shí)現(xiàn)GridView，表頭固定，表體有滾動(dòng)條且可滾動(dòng)，下面有個(gè)不錯(cuò)的示例，希望對(duì)大家有所幫助2014-02-02
使用javascript實(shí)現(xiàn)有效時(shí)間的控制,并顯示將要過(guò)期的時(shí)間
本篇文章主要介紹了使用javascript實(shí)現(xiàn)有效時(shí)間的控制,并顯示將要過(guò)期的時(shí)間示例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
javascript實(shí)現(xiàn)的平方米、畝、公頃單位換算小程序
這篇文章主要介紹了javascript實(shí)現(xiàn)的平方米、畝、公頃單位換算小程序,此代碼通過(guò)URL傳參的方式使用,也可以根據(jù)自己的需求做些改動(dòng),需要的朋友可以參考下2014-08-08
微信小程序?qū)崿F(xiàn)Timeline時(shí)間線效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)Timeline時(shí)間線效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了JS未跨域操作iframe里的DOM 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
Ajax Blog 用到的幾個(gè)函數(shù)...2006-10-10
理解Javascript_09_Function與Object
在《理解Javascript_08_函數(shù)對(duì)象》中講解了很多函數(shù)對(duì)象的問(wèn)題，同時(shí)也留下了許多疑問(wèn)，今天讓我們來(lái)解答部分問(wèn)題。2010-10-10