前两天面试某公司,让我实现input框和data对象的响应式变化。我直接表示不会。。。。以此记录我的菜狗日常
<body>
<input type="text" name="" id="">
<script>
let input = document.querySelector('input')
const data = {
msg: ''
}
input.value = data.msg
// Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
Object.defineProperty(data, 'msg', {
get: function () { // 当访问data的msg属性时,会调用get这个函数,即直接返回msg属性
console.log('get')
return msg
},
set: function (newVal) { // 当修改data的msg属性时,会调用set函数,将msg修改为新的值
console.log('set')
msg = newVal
}
})
// keyup:事件在按键被松开时触发
input.addEventListener('keyup', e => {
// console.log(e.target.value);
data.msg = e.target.value // 这里触发了data的set函数,将其msg属性改为了键盘事件值
console.log(data.msg); // 这里触发了data的get函数,返回了data的msg
})
</script>
</body>
我的想法大概是这样,但是有可能不对,如果朋友你有幸看到了,仅供参考哈。