如何用JS實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)監(jiān)聽(tīng)
概述
主要是用Object.defineProperty實(shí)現(xiàn)類(lèi)似vue的數(shù)據(jù)綁定。
第一步
const data = { name: "tom", age: 14 } Object.defineProperty(data, "name", { get(){ return "name被讀取了" }, set(val){ console.log(‘我被賦值了‘,val) } }) //將此代碼放到瀏覽器控制臺(tái)查看效果 console.log(data.name )
輸出的data.name并不是tom,而是name被讀取了,因?yàn)閐efineProperty對(duì)data的name字段進(jìn)行的監(jiān)聽(tīng)劫持,修改了,name字段本應(yīng)該返回的值。
第二步
const _data = { ...data } for(let i in data){ Object.defineProperty(data, i, { get(){ return _data[i]+"經(jīng)過(guò)了js的修改" }, set(val){ _data[i] = val; } }) }
為什么需要單獨(dú)的_data?
回答:監(jiān)聽(tīng)了data的字段,并修改了字段的返回屬性,導(dǎo)致的影響就是,每次獲取data內(nèi)監(jiān)聽(tīng)的字段時(shí)候,瀏覽器都會(huì)調(diào)用get返回的值,如果你get里直接返回return data[i]的話,就會(huì)導(dǎo)致瀏覽器不停的調(diào)用get方法,從而進(jìn)入到一個(gè)死循環(huán)當(dāng)中。
給data多添加一點(diǎn)數(shù)據(jù)
const data = { name: "tom", age: 14, friend: { "name1": "張三", "name2": "李四", "name3": "王五", "name4": "趙六" }, }
格式化初始值
const createNewWatch = (val, path, parentKey, event) => { //如果值不是object類(lèi)型,那么直接返回此值 if(typeof val != ‘object‘) return val; //反之如果是object類(lèi)型,那么調(diào)用WatchObject,在進(jìn)行子元素的遍歷及監(jiān)聽(tīng) //WatchObject會(huì)在下面的代碼中進(jìn)行創(chuàng)建 return WatchObject(val,path.concat(parentKey), event) } 廣州品牌設(shè)計(jì)公司https://www.houdianzi.com
格式化object對(duì)象,監(jiān)聽(tīng)值
const WatchObject = (data, path, event) => { function WatchObject(){ for(var key in data){ //調(diào)用之前創(chuàng)建的函數(shù),格式化val data[key] = createNewWatch(data[key], path, key, event) //創(chuàng)建對(duì)數(shù)據(jù)key的監(jiān)聽(tīng) defineProperty(this, key, data[key], path.concat(key), event) } } return new WatchObject() }
最后執(zhí)行代碼,一個(gè)簡(jiǎn)單的數(shù)據(jù)監(jiān)聽(tīng)就完成了。
const b = WatchObject(data,[],{ set(path,val){ console.log(path,val) } })
以上就是如何用JS實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)監(jiān)聽(tīng)的詳細(xì)內(nèi)容,更多關(guān)于JS數(shù)據(jù)監(jiān)聽(tīng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- JS如何監(jiān)聽(tīng)div的resize事件詳解
- JavaScript 監(jiān)聽(tīng)組合按鍵思路及代碼實(shí)現(xiàn)
- JavaScript如何實(shí)現(xiàn)監(jiān)聽(tīng)鍵盤(pán)輸入和鼠標(biāo)監(jiān)點(diǎn)擊
- NodeJS多種創(chuàng)建WebSocket監(jiān)聽(tīng)的方式(三種)
- js實(shí)現(xiàn)無(wú)刷新監(jiān)聽(tīng)URL的變化示例代碼詳解
- JavaScript監(jiān)聽(tīng)鍵盤(pán)事件代碼實(shí)現(xiàn)
- 使用JS監(jiān)聽(tīng)鍵盤(pán)按下事件(keydown event)
- js 實(shí)現(xiàn)watch監(jiān)聽(tīng)數(shù)據(jù)變化的代碼
- javascript事件監(jiān)聽(tīng)與事件委托實(shí)例詳解
相關(guān)文章
手寫(xiě)Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash
這篇文章主要介紹了手寫(xiě)Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash,接下來(lái)將會(huì)帶你們了解下這兩者的區(qū)別,以及我們?cè)撊绾问謱?xiě)實(shí)現(xiàn)這兩個(gè)函數(shù)2022-03-03js實(shí)現(xiàn)從右往左勻速顯示圖片(無(wú)縫輪播)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)從右往左勻速顯示圖片,無(wú)縫輪播,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式,一是利用按鈕組實(shí)現(xiàn)、二是Bootstrap專(zhuān)門(mén)做了相應(yīng)的css類(lèi),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Bootstrap 最常用的JS插件系列總結(jié)(圖片輪播、標(biāo)簽切換等)
這篇文章主要為大家詳細(xì)介紹了Bootstrap 最常用的JS插件,包括圖片輪播carousel.js、標(biāo)簽切換tab.js、滾動(dòng)監(jiān)聽(tīng)scrollspy.js等,感興趣的小伙伴們可以參考一下2016-07-07javascript實(shí)現(xiàn)確定和取消提示框效果
這篇文章主要介紹了javascript實(shí)現(xiàn)確定和取消提示框效果的方法以及示例代碼分享,有需要的小伙伴可以參考下。2015-07-07一個(gè)輕量級(jí)的XHTML右鍵菜單[支持IE和firefox]
一個(gè)輕量級(jí)的XHTML右鍵菜單[支持IE和firefox]...2007-01-01JavaScript中實(shí)現(xiàn)數(shù)組分組功能的方法詳解
最近,JavaScript引入了一個(gè)備受期待的功能:原生支持?jǐn)?shù)組分組,這一特性使得在處理復(fù)雜的數(shù)據(jù)集時(shí)變得更加簡(jiǎn)單和高效,本文將深入探討這一全新的JavaScript特性,希望對(duì)大家有所幫助2023-12-12js刪除數(shù)組元素、清空數(shù)組的簡(jiǎn)單方法(必看)
下面小編就為大家?guī)?lái)一篇js刪除數(shù)組元素、清空數(shù)組的簡(jiǎn)單方法(必看)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07