js双向绑定

题目来源： 

双向绑定_牛客题霸_牛客网 (nowcoder.com)

JS37 双向绑定

 

描述

请补全JavaScript代码，要求如下：
1. 监听对象属性的变化
2. 当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新
3. 将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新
注意：
1. 必须使用Object.defineProperty实现且触发set方法时更新视图
2. 必须使用DOM0级标准事件（oninput）
3. 可以使用预设代码"_render"函数

 

DOCTYPE html>
    
        
    
    
        
        
        
 
        
    

预览：

 

---

1.首先我们需要先监听input输入框，当输入框内容发生变化时，触发回调函数更新person.weight值

inp.oninput=function(){
    person.weight=this.value
}

这段代码给输入框（）添加了一个oninput事件监听器。当输入框的值发生变化时，即用户输入内容时，会触发该事件，并执行相应的回调函数。在这个回调函数中，将输入框的值赋给person.weight属性，实现了实时更新person对象的体重属性。

但仅仅这样子，并不能事实更新页面种体重的显示值，因为没有重新渲染的操作。

 2.我们需要为person的属性设置getter和setter方法。

Object.keys(person).forEach((key)=>{
    var value = person[key];
    Object.defineProperty(person,key,{
        get(){
            return value;
        },
        set(newValue){
            value=newValue;
            _render();//重新执行渲染函数
        }
    })
})

这段代码使用Object.defineProperty方法为person对象的每个属性定义了一个getter和setter。在getter中，返回属性对应的值；在setter中，将新的值赋给属性，并调用_render()函数重新渲染页面。通过这种方式，当person对象的属性发生改变时，会自动更新页面上显示的相关内容。

总结

首先要监听输入框的变化，并将输入框的值实时更新到person对象的体重属性中。同时，通过使用Object.defineProperty方法定义getter和setter，实现了当person对象的属性发生改变时，自动重新渲染页面。