使用JavaScript怎么实现数据监听?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
javascript是一种动态类型、弱类型的语言,基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言,同时也是一种广泛用于客户端Web开发的脚本语言。它主要用来给HTML网页添加动态功能,现在JavaScript也可被用于网络服务器,如Node.js。
主要是用Object.defineProperty实现类似vue的数据绑定。
const data = {
name: "tom",
age: 14
}
Object.defineProperty(data, "name", {
get(){
return "name被读取了"
},
set(val){
console.log(‘我被赋值了‘,val)
}
})
//将此代码放到浏览器控制台查看效果
console.log(data.name )
输出的data.name并不是tom,而是name被读取了,因为defineProperty对data的name字段进行的监听劫持,修改了,name字段本应该返回的值。
const _data = { ...data }
for(let i in data){
Object.defineProperty(data, i, {
get(){
return _data[i]+"经过了js的修改"
},
set(val){
_data[i] = val;
}
})
}
回答:监听了data的字段,并修改了字段的返回属性,导致的影响就是,每次获取data内监听的字段时候,浏览器都会调用get返回的值,如果你get里直接返回return data[i]的话,就会导致浏览器不停的调用get方法,从而进入到一个死循环当中。
const data = {
name: "tom",
age: 14,
friend: {
"name1": "张三",
"name2": "李四",
"name3": "王五",
"name4": "赵六"
},
}
const createNewWatch = (val, path, parentKey, event) => {
//如果值不是object类型,那么直接返回此值
if(typeof val != ‘object‘) return val;
//反之如果是object类型,那么调用WatchObject,在进行子元素的遍历及监听
//WatchObject会在下面的代码中进行创建
return WatchObject(val,path.concat(parentKey), event)
}
广州品牌设计公司https://www.houdianzi.com
const WatchObject = (data, path, event) => {
function WatchObject(){
for(var key in data){
//调用之前创建的函数,格式化val
data[key] = createNewWatch(data[key], path, key, event)
//创建对数据key的监听
defineProperty(this, key, data[key], path.concat(key), event)
}
}
return new WatchObject()
}
最后执行代码,一个简单的数据监听就完成了。
const b = WatchObject(data,[],{
set(path,val){
console.log(path,val)
}
})
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。